transformación actual aplicada por lienzo

Question

¿Cómo puedo determinar la transformación actual que está aplicando un lienzo html5?

Parece que solo admite dos métodos para tratar con las transformaciones "transformar", "establecerTransformar", pero parece que no puedo descubrir los resultados de aplicar las transformaciones.

Si no los sigo todos y duplicando las matemáticas matriciales que debe estar haciendo de forma nativa, ¿cómo puedo descubrir la transformación actual?

Answer 1

Usted puede mirar aquí para las funciones que afectan la transformación:

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

Si se utiliza la función setTransform, entonces la transformación actual de la matriz se establece en la matriz de identidad, entonces se utiliza lo que se estableció.

En ese momento, tiene la matriz de transformación actual.

Ahora, si va a restablecerlo, entonces comience a llamar a los otros métodos de transformación, si necesita saber de qué se trata, es fácil hacer los cálculos para calcular la matriz de transformación, así que solo haga las operaciones usando tus propias funciones de transformación, puedes establecer la transformación, tal como la has calculado.

Si no puede hacer eso, entonces actualmente no tiene suerte, pero esta publicación también tiene el mismo problema, por lo que es posible que desee solicitar que se agregue una nueva función, getTransform.

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

Answer 2

He hecho una envoltura que añade este método a la lona.

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

Answer 3

Aunque no es una solución para cómo conseguir la transformación actual, puede ser un hecho útil que los contextos incluyen un save() y una restauración() función que puede ser utilizado para empujar y pop context state, incluida la matriz de transformación actual.

(Por lo menos, puede beneficiar a aquellos, que, al igual que yo, estaban buscando getTransform con el fin de implementar una pila de usarlo ...)

Answer 4

contextos lienzo 2D de Firefox tienen (no estándar) y mozCurrentTransform mozCurrentTransformInvertir propiedades.

WhatWG ahora ha definido las propiedades currentTransform y currentTransformInverse (las primeras incluso son editables). Aquí está la parte correspondiente de la especificación:

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

Sin embargo, estos probablemente no va a ser aplicada universalmente en los navegadores por algún tiempo, así que si quieres portabilidad tendrá que recurrir al seguimiento de la matriz manualmente @Dave y @James dicen.

Todos los hombres y su perro parecen haber escrito un trazador de matriz de transformación de lona. Acabo de echar un vistazo a @Dave Lawrence; Creo que el mío es mejor en algunos aspectos, aunque estoy seguro de que también es inferior en otros aspectos.

• mina no requiere ningún cambio en el código de usuario JS - modifica los prototipos de la lona y de contexto, por lo que acaba de añadir una etiqueta guión y ya está bueno para ir.
• Se intercepta la configuración de la propiedad currentTransform.
• Se esfuerza solo por hacer lo que tiene que hacer.

Funciona en los últimos Chrome y Firefox, pero aún no lo he probado en IE.

puse la mía en un jsFiddle, con una simple demostración: http://jsfiddle.net/XmYqL/1/

Aquí es un bloque de código para aplacar stackoverflow por lo que me permite enlazar a jsFiddle (??):

code, code, wonderful code 

I finalmente encontrado el momento de subir a mi polyfill GitHub:

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

sé que es no es perfecto, pero realmente me gustaría que todos trabajemos juntos en la implementación de One True Solution para este problema. No me importa si es mío o de otra persona. Esta esquina de JavaScript/HTML5/Canvas se parece mucho a los Balcanes: un mar de soluciones parciales. Por favor, todos, tenedor mío, agrega tus cambios y envíame solicitudes de extracción, o envíame tu URL para que pueda fusionar tu código, o reemplazar el mío al por mayor con el tuyo, o lo que sea. Este es un problema estúpido que solo quiero recordar. Si trabajamos juntos, podemos hacerlo.