Aktuelle Transformation wird von Canvas angewendet

Question

Wie kann ich die aktuelle Transformation ermitteln, die von einem HTML5-Canvas angewendet wird?

Es scheint, dass es nur zwei Methoden zum Umgang mit Transformationen "transform", "setTransform" unterstützt, aber ich kann nicht scheinen, die Ergebnisse der Anwendung der Transformationen zu entdecken.

Sie alle kurz zu verfolgen und die Matrix-Mathematik zu kopieren, die es nativ machen muss, wie kann ich die aktuelle Transformation herausfinden?

Answer 1

Sie können hier für die Funktionen, die Transformation beeinflussen:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations

Wenn Sie die setTransform Funktion zu verwenden, dann verwandeln die aktuelle Matrix auf die Einheitsmatrix gesetzt ist, dann verwendet sie, was festgelegt wurde.

An diesem Punkt haben Sie die aktuelle Transformationsmatrix.

Jetzt, wenn Sie es zurücksetzen werden, dann beginnen Sie, die anderen Transformationsmethoden aufzurufen, wenn Sie wissen müssen, was es ist, ist es einfach, die Transformationsmatrix zu berechnen, also tun Sie einfach die Operationen Wenn Sie Ihre eigenen Transformationsfunktionen verwenden, können Sie die Transformation so einstellen, wie Sie sie berechnet haben.

Wenn Sie das nicht können, dann haben Sie derzeit kein Glück, aber dieser Beitrag hat auch das gleiche Problem, so dass Sie eine neue Funktion hinzufügen möchten, getTransform.

http://forums.whatwg.org/viewtopic.php?t=4164

Answer 2

Ich habe einen Wrapper gemacht, die diese Methode Leinwand hinzufügt.

http://proceduralgraphics.blogspot.com/2010/03/canvas-wrapper-with-gettransform.html

Answer 3

Obwohl keine Lösung dafür, wie die aktuelle zu bekommen verwandeln, kann es eine nützliche Tatsache sein, dass Kontexte umfassen eine save() und ein restore() Funktion, die verwendet werden können, schieben und Pop-Kontext-Zustand, einschließlich der aktuellen Transformationsmatrix.

(Wenigstens diejenigen profitieren, die, ähnlich wie bei mir wurden für getTransform suchen, um einen Stapel zu implementieren mit ihm ...)

Answer 4

Firefox Canvas 2D-Kontexten (Nicht-Standard) mozCurrentTransform und mozCurrentTransformInverse Eigenschaften.

Die WhatWG hat jetzt currentTransform- und currentTransformInverse-Eigenschaften definiert (wobei erstere schreibbar ist). Hier ist der relevante Teil der Spezifikation:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations

Allerdings werden diese wahrscheinlich nicht überall in Browsern für einige Zeit noch implementiert werden, so dass, wenn Sie Portabilität wollen Sie die Verfolgung der Matrix zurückgreifen müssen manuell als @Dave und @James sagen.

Jeder Mann und sein Hund scheinen einen solchen Canvas-Transform-Matrix-Tracker geschrieben zu haben. Ich habe mir gerade @ Dave Lawrences angesehen; Ich denke, meiner ist in einigen Punkten besser, obwohl ich mir sicher bin, dass er auch auf andere Weise unterlegen ist.

• -Mine erfordert keine Änderungen an Benutzern JS Code - es ändert die Leinwand und Rahmen Prototypen, so dass Sie nur einen Skript -Tag hinzufügen und Sie sind gut zu gehen.
• Es fängt das Setzen der Eigenschaft currentTransform ab.
• Es versucht nur schwer zu tun, was es tun muss.

Es funktioniert in den neuesten Chrome und Firefox, aber ich habe es noch nicht in IE getestet.

Ich habe Mine in einem jsfiddle, mit einer einfachen Demonstration: http://jsfiddle.net/XmYqL/1/

Hier ist ein Codeblock Stackoverflow zu besänftigen, damit es mir jsfiddle lässt verlinken (??):

code, code, wonderful code 

I endlich um meine polyfill zu GitHub Hochladen:

https://github.com/supermattydomain/canvas.currentTransform.js

ich weiß, es ist nicht perfekt, aber ich würde wirklich gerne sehen, dass wir alle zusammenarbeiten, um One True Solution für dieses Problem zu implementieren. Es ist mir egal, ob es mein oder eines anderen ist. Diese Ecke von JavaScript/HTML5/Canvas ist zu sehr wie der Balkan: ein Meer von Teillösungen. Bitte, jeder, meins, fügen Sie Ihre Änderungen hinzu und senden Sie mir Pull-Anfragen, oder senden Sie mir Ihre URL, damit ich Ihren Code einbinden kann, oder ersetzen Sie meinen Großhandel mit Ihren, oder was auch immer. Das ist ein dummes Problem, das ich nur nageln möchte. Wenn wir zusammenarbeiten, können wir es schaffen.