Estoy trabajando en arrastrar y rotar imágenes en preact y javascript. el problema es que event.offsetX,Y no funciona correctamente después de rotar una imagen. event.LayerX,Y funciona bien, sin embargo, están en desuso.

Traté de usar sin, cos, rotación de matriz. ¿Hay algún método para resolver este problema en lugar de LayerX, Y?

ingrese la descripción de la imagen aquí

Usé la fórmula dragg a continuación.

const movePosOfBox = useCallback((e: MouseEvent) => {

 const el = document.getElementById("canvas"); if (el) { const elRect = el.getBoundingClientRect(); let x = e.clientX - elRect.left - imgOffset.x; let y = e.clientY - elRect.top - imgOffset.y;

// Usé e.offsetX,Y en imgOffset.x,y. pero no pueden no trabajar en la imagen girada.

 setBoxPos({ left: x, top: y }); } }, []);