在鼠标上拖动对象绕半圆-Adobe动画HTML5画布

Question

我在Adobe Animate HTML5 Canvas中使用JavaScript/Easel.js/Create.js编写了以下代码。该代码可以将对象拖动到一个圆圈周围。

我现在想把它改为半个圆的函数，上半部分。对象需要顺时针和逆时针移动，并在半圆的末端停止(因此可以前后移动，但不能正好围绕圆移动(。

stage.enableMouseOver();
var knob_X = 454;
var knob_Y = 169;
var radius = 80;
var streakAngle;

root.streakRotatorKnob.addEventListener("mouseover", mouseOverKnob.bind(this));
root.streakRotatorKnob.x = knob_X + radius * Math.cos(0);
root.streakRotatorKnob.y = knob_Y + radius * Math.sin(0);
function mouseOverKnob(evt)
{
root.streakRotatorKnob.addEventListener("pressmove", moveF);
}

function moveF(evt) { 
var rads = Math.atan2(stage.mouseY - knob_Y, stage.mouseX - knob_X);
var atan_knob = Math.atan2(evt.currentTarget.y, evt.currentTarget.x);
evt.currentTarget.x = knob_X + radius * Math.cos(rads);
evt.currentTarget.y = knob_Y + radius * Math.sin(rads);
stage.update();
console.log(atan_knob);

streakAngle = Math.round(((rads * 180 / Math.PI) * 100) / 100);
if (leye == true) {
root.streakMainLeft.rotation = streakAngle + 90;
} else if (reye == true) {
root.streakMainRight.rotation = streakAngle + 90;
}
root.streakAngle.text = streakAngle + "u00B0";
}

视频前半部分的视频链接显示了我目前在该代码中的工作内容。

视频的后半部分显示了我想要什么。

我会把圆形图形改成半圆。。。

https://youtu.be/781GzUulX1c

Answer 1

我不能完全理解你想要什么。如果直接共享源文件会更好。我准备了一个例子，你能下载并检查一下吗？

we.tl/toflBkdma0o

我还表示，我无法通过您的代码进行编辑。

stage.enableMouseOver();
var root = this;
var knob_X = 454;
var knob_Y = 169;
var radius = 80;
var streakAngle;
var leye = true;

root.streakRotatorKnob.addEventListener("mouseover", mouseOverKnob.bind(this));
root.streakRotatorKnob.x = knob_X + radius * Math.cos(0);
root.streakRotatorKnob.y = knob_Y + radius * Math.sin(0);
function mouseOverKnob(evt)
{
root.streakRotatorKnob.addEventListener("pressmove", moveF);
}

function moveF(evt) { 
var rads = Math.atan2(stage.mouseY/stage.scaleY - knob_Y, stage.mouseX/stage.scaleX - knob_X);
var atan_knob = Math.atan2(evt.currentTarget.y, evt.currentTarget.x);

streakAngle = Math.round(((rads * 180 / Math.PI) * 100) / 100);

if(streakAngle>=-90 && streakAngle<=90)
{
evt.currentTarget.x = knob_X + radius * Math.cos(rads);
evt.currentTarget.y = knob_Y + radius * Math.sin(rads);
}

stage.update();
//console.log("atan_knob: "+atan_knob);


/*
if (leye == true) {
root.streakMainLeft.rotation = streakAngle + 90;
} else if (reye == true) {
root.streakMainRight.rotation = streakAngle + 90;
}
*/
console.log("streakAngle: " +streakAngle);
//root.streakAngle.text = streakAngle + "u00B0";
}