Question

我有两个类：Arrow和RotateToMouse。箭头占据两个点并在两者之间画一个箭头。 RotateToMouse应该围绕其起点旋转箭头以始终指向鼠标，但它似乎围绕原点旋转。如何使其移动旋转点？箭头采用a1，a2（点）和col（颜色）。

这是RotateToMouse：

package{
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
public class RotateToMouse extends Sprite{
private var arr:Arrow;
}
public function RotateToMouse(arr:Arrow){
this.arr=arr;
init();
}

private function init():void{
addChild(arr);
addEventListener(Event.ENTER_FRAME, onEnterFrame;
}

public function onEnterFrame(evt:Event):void{
    var diffx:Number=mouseX-arr.a2.x;
    var diffy:Number=mouseX-arr.a2.y;
    var radians:Number=Math.atan2(diffy, diffx);
    arr.rotation=radians*180/Math.PI;
}

我还有另一个文件，arrowdrawing.fla，它在第1帧动作脚本上写着：

    var arr:Arrow=new Arrow(new Point(40, 50), new Point(450, 400), 0x000000);
    var rotarr:RotateToMouse(arr);
    addChild(rotarr);

如上所述，这是Arrow类：包{ import flash.display.Sprite; import flash.geom.Point;

public class Arrow extends Sprite{
public var a1:Point;
public var a2:Point;
private var col:uint;
private var dx:Number;
private var dy:Number;
private var angle:Number;
private var thdiff:Number=30; //angle of arrowhead is 30
private var len:Number=20; //length of arrowhead is 20
private var bangle:Number;
private var cangle:Number;

public function Arrow(a1:Point, a2:Point, col:uint){
    //constructor code
    this.col=col;
    this.a1=a1;
    this.a2=a2;
    dx=a2.x-a1.x;
    dy=a2.y-a1.y;   
}

public function init():void{
//draws a line between a1 and a2 of color col
    graphics.lineStyle(3, col);
    graphics.beginFill(col);
    graphics.moveTo(a1.x, a1.y);
    graphics.lineTo(a2.x, a2.y);
    graphics.endFill();
    drawArrowHead();
}

public function getCos(n:Number){
    //n will be given in degrees; we need to convert it to radians
    return Math.cos(n*Math.PI/180);
}
public function getSin(n:Number){
    //n will be given in degrees; we need to convert it to radians
    return Math.sin(n*Math.PI/180);
}
//arrow head consists of 2 points, b=(b1, b2) and c=(c1, c2)
public function drawArrowHead():void{
    //find the angle of the line we start with
    angle=Math.atan2(dx, dy);
    //for c,b we are going to figure out what the angle is of the lines to either side
    bangle=angle*(180/Math.PI)-thdiff;
    cangle=angle*(180/Math.PI)+thdiff;
    //point b, c are flipped around so that they can start from a2 (the endpoint)
    var b1:Number=a2.x-(len*getCos(bangle));
    var b2:Number=a2.y-(len*getSin(bangle));
    var c1:Number=a2.x-(len*getCos(cangle));
    var c2:Number=a2.y-(len*getSin(cangle));
//draw arrohead from a2 to b, and c
    graphics.lineStyle(3, col);
    graphics.beginFill(col);
    graphics.moveTo(a2.x, a2.y);
    graphics.lineTo(b1, b2);
    graphics.lineTo(c1, c2);
    graphics.lineTo(a2.x, a2.y);
    graphics.endFill();
    drawArrowHead();

}
}
}
}

Answer 1

在Arrow类上，您必须以旋转点位于（0,0）的方式绘制它。我不知道你现在的表现如何（查看Arrow类声明会很有用），但你必须记住每个对象都有不同的原点位置。

最可能的错误是您在舞台位置（0,0）创建箭头对象（或者只是创建而不是移动）。

 --------------
|*             |
|              |
|   ------>    |
|              |
|              |
|              |
 --------------

其中*是箭头位置（x，y）==（0,0）。在这种情况下，您需要做的是将箭头移动到起始位置，并在绘制时从所有点中减去该值：

 --------------
|              |
|              |
|   *----->    |
|              |
|              |
|              |
 --------------

它看起来完全一样，但旋转行为会有所不同。

Answer 2

我知道围绕枢轴点旋转的最简单方法是根据目标的父节点记录枢轴点的位置，进行旋转，并且因为您知道本地枢轴点不应该相对于父，用差异调整x，y。

import flash.display.Sprite;
import flash.geom.Point;
import flash.geom.Matrix;

/**
 * Sets the rotation of the given sprite to [newRotation], rotating around [pivotPoint].
 * @param target The sprite to set the rotation.
 * @param pivotPoint The local point to rotate around. This is in the coordinate space of the target.
 * @param newRotation (Degrees) the rotation in degrees to apply to target.
 */
function pivotRotate(target:Sprite, pivotPoint:Point, newRotation:Number) {
    var pivotPointParent:Point = target.transform.matrix.transformPoint(pivotPoint);
    target.rotation = newRotation;
    var pivotPointParent2:Point = target.transform.matrix.transformPoint(pivotPoint);
    var diff:Point = pivotPointParent2.subtract(pivotPointParent);
    target.x -= diff.x;
    target.y -= diff.y;
}

pivotRotate(arrow, new Point(15, 30), 90);

绘制一个箭头，然后围绕其起点AS3旋转它

2 个答案: