将鼠标悬停在半圆周围拖动对象 - Adobe Animate HTML5 Canvas

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";
}

下方视频 link 的前半部分显示了我目前在此代码中所做的工作。

视频的后半部分是我想要的。

我会将圆形图形更改为半圆形...

https://youtu.be/781GzUulX1c

Answer 1

我不明白你到底想要什么。如果直接分享源文件就更好了。我准备了一个例子，你能下载看看吗？

我们.tl/t-oflBkdma0o

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

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";
}

将鼠标悬停在半圆周围拖动对象 - Adobe Animate HTML5 Canvas

Drag object around a half circle on mouse over - Adobe Animate HTML5 Canvas

javascript

easeljs

create.js

将鼠标悬停在半圆周围拖动对象 - Adob​​e Animate HTML5 Canvas

Drag object around a half circle on mouse over - Adobe Animate HTML5 Canvas

javascript

easeljs

create.js

将鼠标悬停在半圆周围拖动对象 - Adobe Animate HTML5 Canvas