putImageData（）在旋转的画布上工作不正确

Question

我需要在画布上绘制旋转的图像数据。 （这是一个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以什么单位返回它的大小？

Answer 1

那么，它是你的错。 putImageData不受转换矩阵的影响。

这是由规格的命令：

电流路径，变换矩阵，阴影属性，全局α，剪切区域，和全局合成操作员必须不影响getImageData（）和putImageData（）方法。

你可以做的是putImageData到内存中的帆布，然后

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

到你的正常的画布。

注意：从您的编辑中，您似乎暗示您可能只是从一个画布绘制到另一个画布而不更改任何图像数据。如果是这种情况，只要可能，只需使用drawImage(othercanvas, x, y)，而不是使用getImageData和putImageData。使用drawImage要快得多。