在EaselJS中心周围旋转弧形

时间:2013-11-12 03:12:04

标签: javascript easeljs

我有一个像这样实例化的弧:

Var arc = new createjs.Shape();
arc.graphics.beginStroke('#6d6e71')
                .setStrokeStyle(16)
                .arc(CONSTANTS.WIDTH/2, CONSTANTS.HEIGHT/2, 250, 0 + doorPosition, Math.PI/5 + doorPosition);

我想围绕中心旋转它,好像弧的其余部分完成一样。如果在使用setTransform:

时圆圈包含在矩形中,它似乎围绕0点旋转
arc.setTransform(0, 0, 1, 1, angle);

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:3)

旋转在(0,0)点附近,因为即使您的弧被绘制在(CONSTANTS.WIDTH / 2,CONSTANTS.HEIGHT / 2),您的形状位置仍然是(0,0)。相反,请将您的形状放在:

之前
var arc = new createjs.Shape();
arc.x = CONSTANTS.WIDTH/2;
arc.y = CONSTANTS.HEIGHT/2;
arc.graphics.beginStroke('#6d6e71')
            .setStrokeStyle(16)
            .arc(0,0, 250, 0 + doorPosition, Math.PI/5  + doorPosition); 

如果你只想旋转弧线,你可以修改“rotation”属性而不是使用“setTransform”:

arc.rotation = angle;

以下是一个示例:http://jsfiddle.net/JTqvJ/40/,希望这会有所帮助。