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不受转换矩阵的影响。

这是由Spec的订单：

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

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

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

到你的普通画布上。

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

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

1 个答案: