将鼠标悬停在圆圈上拖动对象 - Adobe Animate/Create.js/Easel.js
使用采用 Create.js/Easel.js 的 Adobe Animate HTML5 Canvas。
我有以下代码，它将一个对象拖动到一个圆圈上。
工作正常，但只有当光标位于对象上方时，对象才可以移动；对象是 streakRotatorKnob。
var knob_X = 454;
var knob_Y = 175;
var radius = 80;
root.streakRotatorKnob.addEventListener("pressmove",moveF.bind(this));
function moveF(e){
var rads = Math.atan2(stage.mouseY-knob_Y,stage.mouseX-knob_X);
e.currentTarget.x = knob_X + radius * Math.cos(rads);
e.currentTarget.y = knob_Y + radius * Math.sin(rads);
stage.update();
}
我已尝试以下操作，但它根本不适用于 if 语句：
var knob_X = 454;
var knob_Y = 175;
var radius = 80;
root.streakRotatorKnob.addEventListener("pressmove",moveF.bind(this));
function moveF(e){
if(stage.mouseY == root.streakRotatorKnob.y && stage.mouseX == root.streakRotatorKnob.x){
var rads = Math.atan2(stage.mouseY-knob_Y,stage.mouseX-knob_X);
e.currentTarget.x = knob_X + radius * Math.cos(rads);
e.currentTarget.y = knob_Y + radius * Math.sin(rads);
stage.update();
}
}
更新
根据下面 Muhammed Maruf 的回答（Adobe Animate 版本），通过删除以下内容可以更好地工作该行：
root.c.addEventListener("rollout", rollout);
所以我们只有：
stage.enableMouseOver();
var knob_X = 454;
var knob_Y = 169;
var radius = 90;
var root = this;
root.c.addEventListener("rollover", rollover);
//root.c.addEventListener("rollout", rollout);
function rollover(e)
{
console.log("rollover")
root.c.addEventListener("pressmove", moveF);
}
function rollout(e)
{
console.log("rollout")
root.c.removeEventListener("pressmove", moveF);
}
function moveF(e)
{
var rads = Math.atan2(stage.mouseY - knob_Y, stage.mouseX - knob_X);
e.currentTarget.x = knob_X + radius * Math.cos(rads);
e.currentTarget.y = knob_Y + radius * Math.sin(rads);
stage.update();
}
Using Adobe Animate HTML5 Canvas which employs Create.js/Easel.js.
I have the following code which drags an object around a circle.
Works Ok, but the object should only be moveable when the cursor is over the object; object being streakRotatorKnob.
var knob_X = 454;
var knob_Y = 175;
var radius = 80;
root.streakRotatorKnob.addEventListener("pressmove",moveF.bind(this));
function moveF(e){
var rads = Math.atan2(stage.mouseY-knob_Y,stage.mouseX-knob_X);
e.currentTarget.x = knob_X + radius * Math.cos(rads);
e.currentTarget.y = knob_Y + radius * Math.sin(rads);
stage.update();
}
I have tried the following but it's not working at all with the if statement:
var knob_X = 454;
var knob_Y = 175;
var radius = 80;
root.streakRotatorKnob.addEventListener("pressmove",moveF.bind(this));
function moveF(e){
if(stage.mouseY == root.streakRotatorKnob.y && stage.mouseX == root.streakRotatorKnob.x){
var rads = Math.atan2(stage.mouseY-knob_Y,stage.mouseX-knob_X);
e.currentTarget.x = knob_X + radius * Math.cos(rads);
e.currentTarget.y = knob_Y + radius * Math.sin(rads);
stage.update();
}
}
UPDATE
Based on Muhammed Maruf's answer below (the Adobe Animate version), the following works better by removing the line:
root.c.addEventListener("rollout", rollout);
So we just have:
stage.enableMouseOver();
var knob_X = 454;
var knob_Y = 169;
var radius = 90;
var root = this;
root.c.addEventListener("rollover", rollover);
//root.c.addEventListener("rollout", rollout);
function rollover(e)
{
console.log("rollover")
root.c.addEventListener("pressmove", moveF);
}
function rollout(e)
{
console.log("rollout")
root.c.removeEventListener("pressmove", moveF);
}
function moveF(e)
{
var rads = Math.atan2(stage.mouseY - knob_Y, stage.mouseX - knob_X);
e.currentTarget.x = knob_X + radius * Math.cos(rads);
e.currentTarget.y = knob_Y + radius * Math.sin(rads);
stage.update();
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这就是我编辑代码的方式。我想你就是这个意思。
This is how I edited the code. I think you meant that.
由于时差，我才看到你写的。
让我回答你最后的评论如下。在我发布的示例中，我对画布进行了平均。当您给出起始位置时，您需要输入初始位置信息，就像旋转它一样。我还解决了 Mac 设备的问题。例子应该是：
I just saw what you wrote because of the time difference.
Let me answer your last comment as follows. In the example I posted, I averaged over the canvas. While you are giving the starting position, you need to enter the initial position information as if you were rotating it. I also solved a problem with Mac devices. The example should be: