Tengo el siguiente código en Adobe Animate HTML5 Canvas usando JavaScript/Easel.js/Create.js. El código permite arrastrar un objeto alrededor de un círculo.
Ahora quiero cambiar esto para que funcione como medio círculo, la mitad superior. El objeto debe moverse en sentido horario y antihorario, y detenerse en los extremos del semicírculo (es decir, hacia adelante y hacia atrás, pero no alrededor de un círculo).
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"; }El enlace de video a continuación en la primera mitad del video muestra lo que actualmente tengo trabajando en este código.
La última mitad del video muestra lo que quiero.
Cambiaría el gráfico del círculo a un medio círculo...
No puedo entender exactamente lo que quieres. Sería mejor si compartieras el archivo fuente directamente. Preparé un ejemplo, ¿puedes descargarlo y examinarlo?
we.tl/t-oflBkdma0o
También transmito que no puedo editar a través de sus códigos.
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"; }