La transformation en cours est appliquée par le canevas

Question

Comment puis-je déterminer la transformation en cours appliquée par un canevas html5.

Il semble qu'il ne supporte que deux méthodes pour traiter les transformations "transformer", "setTransform" mais je ne peux pas sembler découvrir les résultats de l'application des transformations. À moins de les suivre moi-même et de dupliquer les matrices mathématiques qu'il doit faire nativement, comment puis-je comprendre la transformation actuelle?

Answer 1

Vous pouvez regarder ici pour les fonctions qui affectent la transformation:

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

Si vous utilisez la fonction setTransform, puis la transformation actuelle matrice est définie sur la matrice d'identité, alors il utilise ce qui a été défini.

A ce stade, vous avez la matrice de transformation actuelle. Maintenant, si vous allez le réinitialiser, puis commencer à appeler les autres méthodes de transformation, si vous avez besoin de savoir ce que c'est, il est facile de faire le calcul pour calculer la matrice de transformation, alors faites simplement les opérations , en utilisant vos propres fonctions de transformation, vous pouvez définir la transformation, comme vous l'avez calculé.

Si vous ne pouvez pas faire cela, alors vous êtes actuellement hors de la chance, mais ce post a également le même problème, donc vous pouvez demander une nouvelle fonction ajoutée, getTransform.

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

Answer 2

J'ai fait un emballage qui ajoute que cette méthode Canvas.

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

Answer 3

Bien que pas une solution pour savoir comment obtenir la transformation de courant, il peut être un fait utile que les contextes comprennent un save() et restore() fonction qui peut être utilisé pour pousser et l'état du contexte pop, y compris la matrice de transformation en cours.

(au moins il peut bénéficier à ceux qui, comme pour moi, cherchaient getTransform afin de mettre en œuvre une pile utilisant ...)

Answer 4

des contextes Canvas 2D de Firefox ont (non standard) mozCurrentTransform et Propriétés mozCurrentTransformInverse

Le WhatWG a maintenant défini les propriétés currentTransform et currentTransformInverse (même si elles sont en écriture). Voici la partie pertinente de la spécification:

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

Cependant, ces ne sera probablement pas mis en œuvre universellement encore dans les navigateurs pour un certain temps, donc si vous voulez la portabilité, vous devrez revenir à suivre la matrice manuellement @Dave et @James disent. Chaque homme et son chien semble avoir écrit un tel Canvas-transform-matrix-tracker. Je viens de jeter un coup d'œil à celui deDave Lawrence; Je pense que le mien est meilleur à certains égards, même si je suis sûr que c'est aussi inférieur d'autres façons.

• mine ne nécessite aucune modification du code JS utilisateur - il modifie les prototypes de toile et de contexte, de sorte que vous venez d'ajouter une balise de script et vous êtes bon pour aller.
• Il intercepte le paramètre de la propriété currentTransform.
• Il s'efforce seulement de faire ce qu'il doit faire.

Cela fonctionne dans les derniers Chrome et Firefox, mais je ne l'ai pas encore testé dans IE.

Je mets le mien dans un jsFiddle, avec une démonstration simple: http://jsfiddle.net/XmYqL/1/

Voici un bloc de code pour amadouer stackoverflow il me permet de créer un lien vers jsFiddle (??):

code, code, wonderful code 

I enfin eu le temps de télécharger mon polyfill à GitHub:

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

Je sais qu'il est pas parfait, mais j'aimerais vraiment nous voir tous travailler ensemble pour implémenter One True Solution à ce problème. Je me fiche que ce soit le mien ou celui de quelqu'un d'autre. Ce coin de JavaScript/HTML5/Canvas ressemble trop aux Balkans: une mer de solutions partielles. S'il vous plaît, tout le monde, fourche mine, ajouter vos modifications et m'envoyer des demandes de pull, ou envoyez-moi votre URL afin que je puisse fusionner votre code, ou remplacer le mien en gros avec le vôtre, ou autre. C'est un problème stupide que je veux juste clouer. Si nous travaillons ensemble, nous pouvons le faire.