Estoy tratando de encontrar grados fijos de rotación de una imagen en una página html. El siguiente código del autor original funciona perfectamente para rotar la imagen.
Me gusta obtener los grados de rotación desde el punto de partida inicial (que es 0), preferiblemente limitado a 0-360, cada vez que se gira la imagen (varias veces).
HTML
<body> <span> <img class="rotate" id="img01" src="wheel.png" alt="image" /> </span> </body>código JavaScript
const rotate = (EL) => { let ang = 0; let angStart = 0; let isStart = false; const angXY = (ev) => { const bcr = EL.getBoundingClientRect(); const radius = bcr.width / 2; const { clientX, clientY } = ev.touches ? ev.touches[0] : ev; const y = clientY - bcr.top - radius; // y from center const x = clientX - bcr.left - radius; // x from center return Math.atan2(y, x); }; const mousedown = (ev) => { isStart = true; angStart = angXY(ev) - ang; }; const mousemove = (ev) => { if (!isStart) return; ev.preventDefault(); ang = angXY(ev) - angStart; EL.style.transform = `rotateZ(${ang}rad)`; }; const mouseup = () => { console.log('mouse up to ', ang, ', ', getDegrees(ang)); isStart = false; }; EL.addEventListener("mousedown", mousedown); document.addEventListener("mousemove", mousemove); document.addEventListener("mouseup", mouseup); }; function getDegrees(ang) { /* let deg = (ang * (180 / Math.PI) * -1) + 90; while (deg > 360) { deg -= 360; } while (deg < -360) { deg += 360; } return deg; */ return ang * (180.0 / 3.141592653589793238463) } document.querySelectorAll(".rotate").forEach(rotate);Solo recuerda el último ángulo. Luego mod por 360 (y que sea positivo)
var last_ang = null; const rotate = (EL) => { let ang = 0; let angStart = 0; let isStart = false; const angXY = (ev) => { const bcr = EL.getBoundingClientRect(); const radius = bcr.width / 2; const { clientX, clientY } = ev.touches ? ev.touches[0] : ev; const y = clientY - bcr.top - radius; // y from center const x = clientX - bcr.left - radius; // x from center return Math.atan2(y, x); }; const mousedown = (ev) => { isStart = true; angStart = angXY(ev) - ang; }; const mousemove = (ev) => { if (!isStart) return; ev.preventDefault(); last_ang = ang; ang = angXY(ev) - angStart; EL.style.transform = `rotateZ(${ang}rad)`; }; const mouseup = () => { console.log(getDegrees(ang) + " degrees"); isStart = false; }; EL.addEventListener("mousedown", mousedown); document.addEventListener("mousemove", mousemove); document.addEventListener("mouseup", mouseup); }; function getDegrees(ang) { if (last_ang) { return (((last_ang * 180 / Math.PI) % 360 + 360) % 360).toFixed(2) } return 0 } document.querySelectorAll(".rotate").forEach(rotate); body { padding: 10px 50px; } <body> Drag and rotate<br> <span> <img class="rotate" id="img01" src="https://picsum.photos/150" alt="image" /> </span> </body>