Easeljs使用mousemove旋转对象

Question

我正在使用HTML5 canvas + Easeljs

我想使用鼠标在我的应用程序中旋转对象。想法如下：点击一个对象＆gt;圆圈出现时带有可拖动的框＆gt;将此框拖到圆圈上可使对象旋转。

这与this one有点相同，但我不知道如何在Easeljs中做到这一点。

举例说明

现在你可以通过点击右上角的按钮来旋转对象（L =左，R =右），但我希望它像这里一样：

点击+拖动白色框将使其旋转

非常感谢帮助！

Answer 1

您必须将监听器添加到mousedown，mousemove和mouseup的舞台（或者在您的情况下，可能是比赛场形状）。在this example中，我只是在收听全球stagemouseup，stagemousedown和stagemousemove事件。在stagemousemove被解雇之前，我不会指定stagemousedown侦听器。然后我在stagemouseup被解雇时将其删除。

对于每个stagemousemove事件，您需要找到播放器与舞台鼠标位置之间的角度。您可以执行以下公式，其中shape是您的玩家：

var angleInRadians = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x);  
var angleInDegrees = angleInRadians * (180 / Math.PI);

然后您只需设置shape.rotation = angleInDegrees即可。

Check out this working example