trasformazione corrente applicata da canvas

Question

Come determinare la trasformazione corrente applicata da un'area di disegno HTML5.

Sembra che supporti solo due metodi per gestire trasformazioni "transform", "setTransform" ma non riesco a scoprire i risultati dell'applicazione delle trasformazioni.

In mancanza di tracciamento di tutti loro stessi e duplicazione della matematica della matrice che deve essere eseguita in modo nativo, come è possibile individuare la trasformazione corrente?

Answer 1

Potete guardare qui per le funzioni che riguardano la trasformazione:

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

Se si utilizza la funzione setTransform, allora la corrente trasformazione della matrice è impostata la matrice identità, allora utilizza ciò che è stato impostato.

A questo punto si ha la matrice di trasformazione corrente.

Ora, se avete intenzione di ripristinarlo, quindi iniziare a chiamare gli altri metodi di trasformazione, se avete bisogno di sapere di cosa si tratta, è facile fare i calcoli per calcolare la matrice di trasformazione, quindi fate semplicemente le operazioni utilizzando le tue funzioni di trasformazione, puoi impostare la trasformazione, come hai calcolato.

Se non riesci a farlo, sei al momento sfortunato, ma anche questo post ha lo stesso problema, quindi potresti chiedere di aggiungere una nuova funzione, getTransform.

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

Answer 2

Ho fatto un wrapper che aggiunge questo metodo per Canvas.

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

Answer 3

Anche se non è una soluzione per come ottenere il corrente trasforma, può essere un fatto utile che contesti includono una save() e un ripristino) funzione (che può essere utilizzata per spingere e pop stato del contesto, inclusa la matrice di trasformazione corrente.

(Almeno può beneficiare coloro che, in modo simile a me, erano in cerca di getTransform al fine di attuare una pila di usarlo ...)

Answer 4

contesti Canvas 2D di Firefox hanno (non standard) e mozCurrentTransform Proprietà mozCurrentTransformInverse.

Il WhatWG ha ora definito le proprietà currentTransform e currentTransformInverse (il primo è anche scrivibile). Ecco la parte rilevante della specifica:

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

Tuttavia questi probabilmente non saranno universalmente implementato nei browser per qualche tempo ancora, quindi se volete la portabilità si dovrà ricadere il monitoraggio manualmente la matrice come @Dave e @James dicono.

Ogni uomo e il suo cane sembra aver scritto un tracciatore di matrici con trasformatore Canvas. Ho appena dato un'occhiata a quello di @Dave Lawrence; Penso che il mio sia migliore in alcuni modi, anche se sono sicuro che è anche inferiore in altri modi.

• La mia non richiede alcuna modifica al codice utente JS - esso modifica i prototipi di tela e di contesto, quindi basta aggiungere una sceneggiatura tag e sei a posto.
• Intercetta l'impostazione della proprietà currentTransform.
• Cerca solo di fare quello che deve fare.

Funziona negli ultimi Chrome e Firefox, ma non l'ho ancora testato in IE.

ho messo la mia in un jsfiddle, con una semplice dimostrazione: http://jsfiddle.net/XmYqL/1/

Qui è un blocco di codice per placare StackOverflow quindi mi permette di link a jsfiddle (??):

code, code, wonderful code 

I finalmente trovato il tempo di caricamento di mia polyfill a GitHub:

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

so che è non perfetto, ma mi piacerebbe davvero vederci lavorare tutti insieme per implementare One True Solution a questo problema. Non mi interessa se è mio o di qualcun altro. Questo angolo di JavaScript/HTML5/Canvas è troppo simile ai Balcani: un mare di soluzioni parziali. Per favore, tutti, forchetta il mio, aggiungi le tue modifiche e inviami richieste pull, o inviami il tuo URL in modo da poter unire il tuo codice, o sostituire il mio all'ingrosso con il tuo, o qualsiasi altra cosa. Questo è uno stupido problema che voglio solo inchiodare. Se lavoriamo insieme, possiamo farlo.