putImageData（）在旋转的画布工作不正确 [英] putImageData() on rotated canvas work incorrect

问题描述

我需要在画布上绘制旋转的图像数据。
（这是一个gwt项目，上下文是com.google.gwt.canvas.dom.client.Context2d的实例）

我试图使用下面的代码

  context.rotate（rotation）; 
 context.putImageData（data，x，y）; 
 context.rotate（-rotation）; 
  

但它不绘制旋转的图像。如果我改变这样的代码

  context.rotate（rotation）; 
 context.fillRect（x，y，100，50）; 
 context.rotate（-rotation）; 
  

比旋转矩形将在画布上绘制。
是一个API错误，还是我的错误？

我尝试使用drawImage（）与其他图像而不是putImageDate（）来测试它是如何做的作品。它与旋转精细工作。但我需要绘制ImageData比我采取其他画布。是否有任何快速的方法来将ImageData转换为ImageElement？在什么单位ImageData返回它的大小？

解决方案

putImageData 不受转换矩阵的影响。

这是由Spec的订单：

当前路径，变换矩阵，阴影属性，全局Alpha，剪切区域和全局合成运算符不得影响getImageData（）和putImageData（）方法。

你可以做的是在内存画布上的 putImageData

  context.rotate（rotation）; 
 context.drawImage（inMemoryCanvas，x，y）
 context.rotate（-rotation）; 
  

到您的常规画布。

strong>注意：从你的编辑你似乎暗示你可能只是从一个画布到另一个，而不改变任何图像数据。如果是这种情况，肯定只需使用 drawImage（othercanvas，x，y）而不是使用 getImageData 和 putImageData 如果可能。使用 drawImage 的速度要快得多。

I need to draw rotated image data on canvas. (This is an gwt project and context is instance of com.google.gwt.canvas.dom.client.Context2d)

I trying to use following code for that:

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

but it draw not rotated image. If I change code like this

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

than rotated rectangle will be drawn on canvas. Is it a API bug, or my falt? What can I do to correct it?

Edited I try to use drawImage() with some other image instead putImageDate() to test how it works. It works with rotation fine. But I need to draw ImageData than I take form other canvas. Is it any fast methods to translate ImageData to ImageElement? In what units ImageData returns its size?

解决方案

Well, its your fault. putImageData is not affected by the transformation matrix.

This is by the Spec's orders:

The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.

What you can do is putImageData to an in-memory canvas, and then

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

onto your regular canvas.

NOTE: from your edit you seem to imply that you might just be drawing from one canvas to another without changing any of the imagedata. If this is the case, definitely just use drawImage(othercanvas, x, y) instead of using getImageData and putImageData if possible. Using drawImage is far faster.

这篇关于putImageData（）在旋转的画布工作不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！