2011-10-03 12 views
7

Necesito dibujar datos de imagen girados en lienzo. (Este es un proyecto GWT y el contexto es instancia de com.google.gwt.canvas.dom.client.Context2d)putImageData() en lienzo girado trabajo incorrecto

que tratar de utilizar siguiente código para que:

context.rotate(rotation); 
context.putImageData(data, x, y); 
context.rotate(-rotation); 

pero no dibujar imagen girada. Si cambio el código de esta manera

context.rotate(rotation); 
context.fillRect(x, y, 100, 50); 
context.rotate(-rotation); 

que el rectángulo girado se dibujará en el lienzo. ¿Es un error de API o mi falt? ¿Qué puedo hacer para corregirlo?

Editado Intento usar drawImage() con alguna otra imagen en lugar de putImageDate() para probar cómo funciona. Funciona con rotación fina. Pero necesito dibujar ImageData de lo que tomo de otro lienzo. ¿Hay algún método rápido para traducir ImageData a ImageElement? ¿En qué unidades ImageData devuelve su tamaño?

Respuesta

11

Bueno, es tu culpa. putImageData no se ve afectado por la matriz de transformación.

Este es, de las órdenes de la especificación:

la trayectoria de corriente, matriz de transformación, los atributos de sombra, alfa global, la región de recorte, y del operador composición global no debe afectar a la getImageData() y putImageData() Métodos .

Lo que puede hacer es putImageData a un lienzo en memoria, y luego

context.rotate(rotation); 
context.drawImage(inMemoryCanvas, x, y) 
context.rotate(-rotation); 

en su lienzo regular.

NOTA: De su edición parece que implica que puede estar dibujando de un lienzo a otro sin cambiar ninguno de los datos de imagen. Si este es el caso, definitivamente solo use drawImage(othercanvas, x, y) en lugar de usar getImageData y putImageData si es posible. Usar drawImage es mucho más rápido.

+0

Tienes razón. Hago toda la manipulación en lona temporal y luego la pongo en el lugar correcto en el lienzo original. Gracias por tu respuesta, me ayuda mucho. – hatesms

Cuestiones relacionadas