Probablemente estoy pensando demasiado en esto. Pero tengo un círculo que estoy generando dinámicamente con segmentos de PI. Me gustaría poder hacer clic en el círculo y girarlo. Cualquiera que sea el punto del círculo en el que haga clic, ese punto del círculo es el que me gustaría seguir con el mouse.

He estado jugando con eso por un tiempo. Y puedo hacer que funcione en un lado del círculo. Pero el otro lado del círculo hace lo contrario de lo que esperaba. Aquí está básicamente la configuración

 const currentDegrees = piCircle.current; const rect = canvas.getBoundingClientRect(); const x = state.xy[0] - rect.left; const y = state.xy[1] - rect.top; const dx = state.delta[0]; const dy = state.delta[1];

x e y son las posiciones del mouse en el círculo, dx y dy es el movimiento normalizado en el que se mueve el mouse (típicamente 1/0/-1). currentDegrees es la rotación actual del círculo.

Mi enfoque actual, algo funcional, fue este
const degrees = toDegrees(Math.atan2(y + dy, x + dx));

Ese enfoque no parece respetar la rotación del círculo. en el lado derecho del círculo funciona bien, en el lado izquierdo se invierte el movimiento.

Para simplificar el problema, me doy cuenta de que puedo expresarlo más así. Tengo dos vectores, posición del mouse (x&y) y delta (x&y). Al sumar esos dos, tendría un tercer vector que es el destino en el que me gustaría que terminara mi posición inicial cuando aplico algún grado de rotación.

 const x = state.xy[0] - rect.left; const y = state.xy[1] - rect.top; const dx = x + state.delta[0]; const dy = y + state.delta[1];

Dibujé algo horrible para ayudar a visualizar mi problema