HTML Canvas - Drag object along a path

Engaged ,
Mar 16, 2022 Mar 16, 2022

Copy link to clipboard

Copied

Looking for an example of dragging an object (e.g. symbol) along a path. In this case just aound a circle path.

Views

375

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 20, 2022 Mar 20, 2022

Copy link to clipboard

Copied

@kglad   Last question on this for the moment hopefully.

 

As I mentioned earlier, when you click to move the object around the circle, the object jumps to a postion on the circle circumference. 

 

I want the object to move from where it is originally positioned (above the 90 degree mark on the circle/compass symbol), and not jump to another position when starting to drag. 

 

You can see this in the video below.   

 

I need this to coordinate the movement of the light streak on the eye, as per a previous vide I posted above.  This is really important.

 

 

My current code:

 

stage.enableMouseOver();

var knob_X = 454;
var knob_Y = 169;
var radius = 80;
var streakAngle;


root.streakRotatorKnob.addEventListener("mouseover", mouseOverKnob.bind(this));


function mouseOverKnob(evt)
{
    root.streakRotatorKnob.addEventListener("pressmove", moveF);
}


function moveF(evt) {
	var rads = Math.atan2(stage.mouseY - knob_Y, stage.mouseX - knob_X);
	evt.currentTarget.x = knob_X + radius * Math.cos(rads);
    evt.currentTarget.y = knob_Y + radius * Math.sin(rads);
	stage.update();
	
	streakAngle = Math.round(((rads * 180 / Math.PI) * 100) / 100);
	if (leye == true) {
		root.streakMainLeft.rotation = streakAngle;
	} else if (reye == true) {
		root.streakMainRight.rotation = streakAngle;
	}
	root.streakAngle.text = streakAngle;
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

what's wrong with this, c (kglad.com)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

@kglad   The c object jumps to a position close to the 180 mark on the circle, almost 1.57 rads clockwise from its starting location, on pressmove.  I need c to start from the the 90 mark on the circle on pressmove, that is it's originally stage position.

 

This is necesssy as the c object together with the dial/compass graphic is used by the user to rotate the light streak over the eye.  So they need to have the same starting angle to be synchcronised. The light streak coming from the retinoscope onto the eye always starts from vertical, so too does the knobe, c (in this case).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

LATEST

I solved this by just setting the position of the knob at the 0 position (3 o'clock) on the compass/dial/.  

 

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

 

Though I may only need a half circle in the end going from 1 to 180...

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines