Easeljs 使用 mousemove 旋转对象

Posted 2023-03-05

【中文标题】Easeljs 使用 mousemove 旋转对象

【英文标题】：Easeljs rotate object using mousemove

【发布时间】：2016-11-30 13:29:46

【问题描述】：

我在 html5 canvas + Easeljs 中工作

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

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

为了说明

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

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

非常感谢您的帮助！

【参考方案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.

【讨论】：

我对这个小提琴进行了快速编辑，使其在开始拖动时不会重置，因此您可以继续旋转它：jsfiddle.net/lannymcnie/hb8a7ys8/2