Estoy tratando de tratar un rectángulo en el lienzo como una hoja de papel y obtener las mismas coordenadas relativas devueltas cuando paso el mouse sobre el mismo punto, independientemente de la escala, la rotación o la traducción de la página.

Actualmente obtengo resultados precisos cuando estoy en retrato o rotaciones de retrato invertidas e independientemente de la escala/traducción. Sin embargo, cuando cambio a paisaje o paisaje invertido, mis resultados no son buenos.

Intenté cambiar a coordenadas giratorias del mouse con algunas funciones trigonométricas que encontré, pero las matemáticas no son mi fuerte y no funcionó.

Si alguien pudiera señalarme en la dirección correcta, estaría agradecido. Sospecho que necesito cambiar el eje o la altura/anchura al rotar el paisaje, pero eso tampoco ha sido fructífero.

La tecla R gira la "página" en 4 cambios de 90 grados. Las coordenadas de su mouse en relación con la página, sujetas al ancho/alto de la página, se muestran en la consola.

https://jsfiddle.net/2hg6u3wd/2/ (Nota, JSFiddle compensa ligeramente las coordenadas por una razón desconocida)

 const orientation = Object.freeze({ portrait: 0, landscape: -90, invertedPortrait: 180, invertedLandscape: 90 }); function CameraRotate(rotation) { // Rotates using the center of target as origin. ctx.translate(target.width / 2, target.height / 2); ctx.rotate(-(currentRot * Math.PI / 180)); // Negate currentRot because ctx.rotate() is additive. ctx.rotate(rotation * Math.PI / 180); ctx.translate(-(target.width / 2), -(target.height / 2)); currentRot = rotation; } function CameraCalcRelTargetCoords(viewX, viewY) { return { x: clamp((viewX - ctx.getTransform().e) / ctx.getTransform().a, 0, page.width), y: clamp((viewY - ctx.getTransform().f) / ctx.getTransform().d, 0, page.height) }; } function clamp(number, min, max) { return Math.max(min, Math.min(number, max)); } canvas.addEventListener(`mousemove`, function(e) { console.log(CameraCalcRelTargetCoords(ex, ey)); });