Imagen de dibujo en Lienzo en un ángulo SIN rotar el lienzo

Question

Estoy dibujando una imagen en HTML 5 utilizando lienzo en JavaScript. Necesito dibujarlo en un ángulo girado. Sé que esto se puede hacer aplicando la función rotar (ángulo) usando el contexto del lienzo. Pero necesito hacer esto sin rotar el lienzo en sí.

Amablemente sugiera un posible enfoque para esto si es posible.

Answer 1

En realidad se puede dibujar lo que desea girar en un lienzo fuera de la pantalla y dibujar que en su lienzo principal. Tomé prestado este código desde un Google IO Discusión:

rotateAndCache = function(image,angle) { 
    var offscreenCanvas = document.createElement('canvas'); 
    var offscreenCtx = offscreenCanvas.getContext('2d'); 

    var size = Math.max(image.width, image.height); 
    offscreenCanvas.width = size; 
    offscreenCanvas.height = size; 

    offscreenCtx.translate(size/2, size/2); 
    offscreenCtx.rotate(angle + Math.PI/2); 
    offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2)); 

    return offscreenCanvas; 
} 

continuación, almacenar en caché con:

rotobj = rotateAndCache(myimg,myangle) 

y en su drawcode:

mycontext.drawImage(rotobj,x_coord,y_coord) 

esto sólo es útil si tiene un objeto que gira un ángulo solo una vez y, posteriormente, solo está sujeto a transformaciones.

Answer 2

Eso no es posible y probablemente no lo necesite. Prueba esto:

context.save() // Save current state (includes transformations) 
context.rotate() 
... draw image ... 
context.restore() // Restore state 

Answer 3

Cuando se aplica la transformación en la lona no rotar lienzo. simplemente diga que todo lo que va a dibujar se transformará de una manera particular. Si desea evitar que la transformación afecte a otros comandos, utilice los métodos save() y restore(). Permiten guardar y restaurar la configuración del lienzo.

ctx.save(); 
ctx.rotate(30); 
ctx.drawImage(); 
ctx.restore(); 

Answer 4

He votado @ PeterT-- buen fragmento y funciona bien-- ¡gracias por eso! Tuve que hacer 3 pequeños cambios para que esto funcionara para mí:

1. el máximo de ancho y alto no es suficiente: si piensas en rotar un cuadrado, necesitas un círculo cuyo diámetro es la diagonal del cuadrado (var diam).
2. el lienzo debe ser traducido de nuevo (o use guardar/restaurar).
3. las coordenadas del objeto xey deben ajustarse para el tamaño del lienzo.

así que terminé con:

rotateAndCache = function(image,angle) { 
     var offscreenCanvas = document.createElement('canvas'); 
     var offscreenCtx = offscreenCanvas.getContext('2d'); 

     var size = Math.max(image.width, image.height); 
     var diam = 2*((size/2)*Math.sqrt(2));     // needs to be saved 
     offscreenCanvas.width = diam; 
     offscreenCanvas.height = diam; 

     offscreenCtx.translate(diam/2, diam/2); 
     offscreenCtx.rotate(angle); 
     offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2)); 
     offscreenCtx.translate(-diam/2, -diam/2); 

     return offscreenCanvas; 
} 

y la posición ajustada empate (necesita ser guardado en rotateAndCache):
mycontext.drawImage(rotobj,x-(diam-width)/2,y-(diam-height)/2);