para un pequeño juego, escribo un componente de cámara para lienzo html5. Debería poder hacer zoom (rueda del mouse), desplazarse (mouse izquierdo) y rotar (mouse derecho). Mi problema es que después de la rotación, si intenta mover hacia arriba, la orientación es incorrecta y la imagen se mueve hacia abajo.
Preparé un ejemplo aquí:
https://codepen.io/rogerbuecker/pen/yLzYqXq
Mi código de sorteo actual:
canvas.width = window.innerWidth canvas.height = window.innerHeight // Translate to the canvas centre before zooming - so you'll always zoom on what you're looking directly at ctx.translate( window.innerWidth / 2, window.innerHeight / 2 ) ctx.rotate(cameraRotation*Math.PI / 180) ctx.scale(cameraZoom, cameraZoom) ctx.translate( -window.innerWidth / 2 + cameraOffset.x, -window.innerHeight / 2 + cameraOffset.y )Saludos Roger
Encontré una solución:
https://codepen.io/rogerbuecker/pen/yLzYqXq
Me perdí la parte donde invierto la Transformación para obtener la Posición
var transform = ctx.getTransform(); const invMat = transform.invertSelf();No tengo demasiada experiencia con el lienzo, pero tengo un poco con la propiedad de transformación css.
Intenta crear un objeto contenedor, dentro de él pon lo que tengas ahora. Luego, cuando necesite mover la imagen o algo relacionado para tener una orientación persistente, simplemente mueva o aplique lo que quiera al contenedor grande, luego gire al pequeño dentro de él.
Avísame si te funciona.