HTML5 Canvas Matrice de Transformation

Je ne comprends pas ce que la Matrice de Transformation est et comment travailler avec elle.

La suivante permet de dessiner un cercle à 0, 0 de ma toile: (généré à partir d'une svg converti avec svg2canvas.jar)

drawPoints: function(ctx, max_points)
        {
            ctx.save();

            ctx.setTransform(1, 0, 0, 1, -551.23701, -368.42499);

            ctx.fillStyle="#0066ab";
            ctx.globalAlpha="0.7";
            ctx.beginPath();
            ctx.moveTo(584.50,387.96);
            ctx.bezierCurveTo(584.50,397.14,577.05,404.59,567.87,404.59);
            ctx.bezierCurveTo(558.68,404.59,551.24,397.14,551.24,387.96);
            ctx.bezierCurveTo(551.24,378.77,558.68,371.33,567.87,371.33);
            ctx.bezierCurveTo(577.05,371.33,584.50,378.77,584.50,387.96);
            ctx.closePath();
            ctx.fill();

            ctx.restore();
        }

Je voudrais passer en arguments pour setTransform() pour dessiner sur n'importe quelle partie de ma toile, mais je ne comprends pas comment l'utiliser du tout.

Dans mon cas, le ctx.setTransform(1, 0, 0, 1, x, y); le truc, cependant, il serait bon de comprendre ce qui se passe avec la matrice.

InformationsquelleAutor Russell | 2010-09-02

13

La matrice de transformation dont il est question est la commune de la matrice de transformation trouvé en algèbre linéaire. Ces arguments forme la matrice de transformation que vous souhaitez appliquer à vos coordonnées pour l'formes ou des chemins. Cette page décrit la méthode de transformation. S'il vous plaît regarder spécifiquement à la matrice qu'ils définissent en vertu de la signature de la méthode de transformation. Elle affiche les paramètres, allez où dans la matrice de transformation. Maintenant veuillez également vous reporter à la lien. Si vous faites défiler vers le bas vous allez voir ce que chaque élément de la matrice de transformation moyens. Par exemple, le [0,0] élément (un paramètre à partir de l'HTML5 méthode de transformation de la signature) de la matrice de transformation représente la façon dont la coordonnée à l'échelle dans la direction X. Espérons que cela aide,

InformationsquelleAutor Eric LaForce
26

La matrice de transformation est multiplié par chaque point avant qu'il est dessiné sur la toile. Comme @Eric a dit, c'est un transformation affine de la matrice de l'algèbre linéaire. Dans votre exemple, il pourrait fonctionner comme ceci:
```
[ x']   [ 1 0 -551.23701 ] [ x ]   [ x - 551.23701 ]
[ y'] = [ 0 1 -368.42499 ] [ y ] = [ y - 368.42499 ]
[ 1 ]   [ 0 0    1       ] [ 1 ]   [       1       ]
```
Donc, il déplace les coordonnées x et y par -551.23... et -368.42... respectivement.

D'autres types de transformations impliquent différents "trous" dans la matrice. Par exemple, voici la matrice qui effectue le dessin par sx et sy (x et y des facteurs d'échelle):
```
[ sx  0 0 ]
[  0 sy 0 ]
[  0  0 1 ]
```
et la rotation (angle en radians):
```
[ cos(angle) -sin(angle) 0 ]
[ sin(angle)  cos(angle) 0 ]
[     0           0      1 ]
```
L'avantage de l'utilisation d'une matrice de transformation sur l'appel de différentes méthodes, comme translate, scale, et rotate, c'est que vous pouvez effectuer toutes les transformations en une seule étape. Cela devient compliqué, mais quand vous commencez à les combiner en non-trivial moyens parce que vous avez besoin de multiplier les matrices ensemble pour obtenir le résultat final (c'est ce que les fonctions comme scale, etc. sont en train de faire pour vous). Il est presque toujours plus facile d'appeler chaque fonction au lieu de calculer vous-même.

Les liens @Eric mentionné et le matrice de transformation de l'article sur Wikipédia aller dans beaucoup plus de détails sur la façon dont tout cela fonctionne.

InformationsquelleAutor Matthew Crumley
11

J'ai mis en place un très simple La Transformation de la classe de garder une trace de la Toile matrice de transformation. Vous pouvez l'utiliser pour voir juste comment la matrice fonctionne et ce qu'il fait. La classe vous permettra également de garder une trace de la matrice puisque la Toile ne vous permettra pas de récupérer la matrice actuelle.
- Thaks, c'est très simple et cool exemple!
InformationsquelleAutor Simon Sarris
2

J'ai trouvé des exemples sur l'Apple page pour être utile dans la compréhension de la matrice de transformation:

https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/MatrixTransforms/MatrixTransforms.html

InformationsquelleAutor james.garriss

Vous devez vous connecter pour publier un commentaire.