Easeljs 使用 mousemove 旋转对象

Question

我在 HTML5 canvas + Easeljs 中工作

我想使用鼠标旋转应用程序中的对象。思路如下：单击一个对象 > 出现带有可拖动框的圆圈 > 将此框拖动到圆圈上使对象旋转。

这有点像this one 的问题，但我不知道如何在 Easeljs 中做到这一点。

为了说明

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

点击+拖动白框会使其旋转

非常感谢您的帮助！

Answer 1

您必须为mousedown、mousemove 和mouseup 将听众添加到舞台（或者在您的情况下，可能是比赛场地Shape）。在this example 中，我只是在收听全球stagemouseup、stagemousedown 和stagemousemove 事件。在stagemousedown 被触发之前，我不会分配stagemousemove 监听器。然后，当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.