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

Question

I have the following code in Adobe Animate HTML5 Canvas using JavaScript/Easel.js/Create.js. The code enables an object to be dragged around a circle.

I now want to change this to function for a half circle, the top half. The object needs to be moved CW and CCW, and stop at the ends of the half circle (so backwards and forwards, but not right around a circle).

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

The video link below in the first half of the video shows what I currently have working in this code.

The last half of the video shows what I want.

I would change the circle graphic to a half circle...

https://youtu.be/781GzUulX1c

score 1 · Accepted Answer · answered Mar 22 '22 at 08:47

I can't understand exactly what you want. It would be better if you shared the source file directly. I prepared an example, can you download and examine it?

we.tl/t-oflBkdma0o

I also convey that I cannot edit through your codes.

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

Thanks. I downloaded the zip. That looks good. One problem is that I need streakAngle to be from 1 and 180. I have created a chat room, Retinoscopy, and given you write access. Can you access it? If not I can give you the direct URL... — IlludiumPu36, Mar 23 '22 at 01:00

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

1 Answers1

Linked