在 EaselJS 中围绕中心旋转弧

【问题标题】：Rotating arc around center in EaselJS在 EaselJS 中围绕中心旋转弧
【发布时间】：2013-11-12 17:14:27
【问题描述】：

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

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,0 点旋转：

arc.setTransform(0, 0, 1, 1, angle);

任何帮助将不胜感激。

【问题讨论】：

标签： javascript easeljs

【解决方案1】：

旋转是围绕 (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/，希望对您有所帮助。

【讨论】：