putImageData() auf gedrehter Leinwand funktioniert nicht richtig

Question

Ich muss gedrehte Bilddaten auf die Leinwand zeichnen. (Dies ist ein Gwt-Projekt und Kontext ist Instanz von com.google.gwt.canvas.dom.client.Context2d)

Ich versuche, den folgenden Code dafür zu verwenden:

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

aber es zeichnet kein gedrehtes Bild. Wenn ich den Code wie folgt ändere

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

als gedrehtes Rechteck auf die Leinwand gezeichnet wird. Ist es ein API-Bug oder mein Fehler? Was kann ich tun, um es zu korrigieren?

Bearbeitet Ich versuche, drawImage() mit einem anderen Bild statt putImageDate() zu verwenden, um zu testen, wie es funktioniert. Es funktioniert mit Rotation gut. Aber ich brauche, um ImageData zu zeichnen, als ich Form andere Leinwand nehmen. Gibt es eine schnelle Methode, um ImageData in ImageElement zu übersetzen? In welchen Einheiten gibt ImageData seine Größe zurück?

Answer 1

putImageData wird von der Transformationsmatrix nicht beeinflusst.

Dies geschieht auf Anweisung des Spec:

Der aktuelle Pfad, die Transformationsmatrix, die Schattenattribute, das globale Alpha, der Beschneidungsbereich und der globale Kompositionsoperator dürfen die Methoden getImageData() und putImageData() nicht beeinflussen.

Was Sie tun können, ist putImageData in eine speicherinterne Leinwand und dann

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

auf Ihre normale Leinwand.

NOTE : Nach Ihrer Bearbeitung scheinen Sie zu vermuten, dass Sie einfach von einer Leinwand auf eine andere ziehen, ohne die Bilddaten zu ändern. Wenn dies der Fall ist, verwenden Sie auf jeden Fall einfach drawImage(othercanvas, x, y) statt mit getImageData y putImageData wenn möglich. Verwendung von drawImage ist viel schneller.