issue153:inkscape
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteProchaine révisionLes deux révisions suivantes | ||
issue153:inkscape [2020/02/07 08:07] – tran d52fr | issue153:inkscape [2020/02/10 07:43] – d52fr | ||
---|---|---|---|
Ligne 4: | Ligne 4: | ||
• Add another line to the setAttribute() call to include the skewY() function in the transform attribute, passing the value of the skewYAmount variable via the template string.** | • Add another line to the setAttribute() call to include the skewY() function in the transform attribute, passing the value of the skewYAmount variable via the template string.** | ||
- | La dernière fois, nous avons commencé à travailler sur un fichier SVG qui utilise Javascript pour animer l' | + | La dernière fois, nous avons commencé à travailler sur un fichier SVG qui utilise Javascript pour animer l' |
••Créer trois nouvelles propriétés dans l' | ••Créer trois nouvelles propriétés dans l' | ||
- | ••Insérer un autre bloc de code pour calculer la valur courante de la fonction skewY(), | + | ••Insérer un autre bloc de code pour calculer la valeur |
- | ••Ajouter une autre ligne à l' | + | ••Ajouter une autre ligne à l' |
**I also left you with something of a puzzle: with the addition of the skewX() function, the square doesn’t just rotate and skew in the middle of the screen as you might expect; instead it moves wildly in and out of the browser window as it rotates. Adding the skewY() function simply exacerbates the problem. Why does it do that? And how can we get the behaviour we expected? | **I also left you with something of a puzzle: with the addition of the skewX() function, the square doesn’t just rotate and skew in the middle of the screen as you might expect; instead it moves wildly in and out of the browser window as it rotates. Adding the skewY() function simply exacerbates the problem. Why does it do that? And how can we get the behaviour we expected? | ||
Ligne 13: | Ligne 13: | ||
The reason is quite simple: whereas the rotate() function has an optional pair of parameters for setting the center of rotation, there’s no equivalent for the skew functions. Skewing takes place relative to a baseline, rather than a single point, but there’s no generic skew() function that lets you specify this baseline via two sets of coordinates. Instead, there are only two possible baselines available: the x-axis (via the skewX() function) and the y-axis (via the skewY() function). The graph below shows the effect of skewing along the x-axis for the same size of object positioned in a variety of places (bottom left)** | The reason is quite simple: whereas the rotate() function has an optional pair of parameters for setting the center of rotation, there’s no equivalent for the skew functions. Skewing takes place relative to a baseline, rather than a single point, but there’s no generic skew() function that lets you specify this baseline via two sets of coordinates. Instead, there are only two possible baselines available: the x-axis (via the skewX() function) and the y-axis (via the skewY() function). The graph below shows the effect of skewing along the x-axis for the same size of object positioned in a variety of places (bottom left)** | ||
- | Je vous avais aussi laissé avec une sorte de puzzle : avec l' | + | Je vous avais aussi laissé avec une sorte de puzzle : avec l' |
- | La raison est assez simple : alors que la fonction rotate() a une paire de paramètres optionnels pour définir le centre de rotation, les fonctions skew n'ont pas d' | + | La raison est assez simple : alors que la fonction rotate() a une paire de paramètres optionnels pour définir le centre de rotation, les fonctions skew n'ont pas d' |
**The red squares along the x-axis all skew “in-place”, | **The red squares along the x-axis all skew “in-place”, | ||
Ligne 23: | Ligne 23: | ||
• We need the object to be centered at (0¸ 0) in order to skew it.** | • We need the object to be centered at (0¸ 0) in order to skew it.** | ||
- | Les carrés | + | Les carrés |
- | Vous devez vous rappeler que nous avons fait quelques modifications délibérées à notre objet de façon à le positionner au milieu de l' | + | Vous devez vous rappeler que nous avons fait quelques modifications délibérées à notre objet de façon à le positionner au milieu de l' |
••Nous voulons que l' | ••Nous voulons que l' | ||
••Nous avons besoin que l' | ••Nous avons besoin que l' | ||
Ligne 37: | Ligne 37: | ||
Il y a quelques manières de résoudre ce casse-tête : | Il y a quelques manières de résoudre ce casse-tête : | ||
- | ••Utiliser la fonction translate() pour déplacer l' | + | ••Utiliser la fonction translate() pour déplacer l' |
••Changer les attributs x et y de l' | ••Changer les attributs x et y de l' | ||
- | ••Utiliser une fonction matrix() plutôt que les focntions | + | ••Utiliser une fonction matrix() plutôt que les fonctions |
- | Je vais abandonner immédiatement la dernière option, car elle demande trop de maths. Mais elle explique bien, peut-être, pourquoi Inkscape utilise toujours matrix() plutôt que les fonctions nommées skew. La première option est probablement la plus claire sur ce qui se passe, mais elle entraîne que la position de l' | + | Je vais abandonner immédiatement la dernière option, car elle demande trop de maths. Mais elle explique bien, peut-être, pourquoi Inkscape utilise toujours matrix() plutôt que les fonctions nommées skew. La première option est probablement la plus claire sur ce qui se passe, mais elle entraîne que la position de l' |
**The best compromise for this project is the second approach. Simply changing the x and y values in the SVG, however, means that the source file no longer holds the “true” values for the coordinates, | **The best compromise for this project is the second approach. Simply changing the x and y values in the SVG, however, means that the source file no longer holds the “true” values for the coordinates, | ||
Ligne 47: | Ligne 47: | ||
We use group.querySelector() to get the rectangle as it limits the search to descendants of the group object (compared with document.querySelector() which would search the whole document), and it makes it easy to replace the argument with an ID or class selector when working with a more complex drawing, or with a different element selector if we change the content of the group to be a different type of object (e.g. a < | We use group.querySelector() to get the rectangle as it limits the search to descendants of the group object (compared with document.querySelector() which would search the whole document), and it makes it easy to replace the argument with an ID or class selector when working with a more complex drawing, or with a different element selector if we change the content of the group to be a different type of object (e.g. a < | ||
- | Le meilleur compromis pour ce projet est la seconde | + | Le meilleur compromis pour ce projet est la seconde |
- | Nous utilisons group.querySelector() pour trouver le rectangle car il limite ses recherches aux descendants de l' | + | Nous utilisons group.querySelector() pour trouver le rectangle car il limite ses recherches aux descendants de l' |
**Reloading the page at this point shows that, if anything, we’ve made the problem worse! Now the square is rotating over an even wider range than before, spending most of its time out of bounds. The reason for this is also a simple one: remember that we used the three parameter version of the rotate() transformation function, so even though our object is centered at (0, 0) it’s still rotating around (50, 50). Now we can pare that function down to the single value version, and the line where we set the value of the transform attribute becomes this (bottom right). | **Reloading the page at this point shows that, if anything, we’ve made the problem worse! Now the square is rotating over an even wider range than before, spending most of its time out of bounds. The reason for this is also a simple one: remember that we used the three parameter version of the rotate() transformation function, so even though our object is centered at (0, 0) it’s still rotating around (50, 50). Now we can pare that function down to the single value version, and the line where we set the value of the transform attribute becomes this (bottom right). | ||
Reload the page and we’ve got what we expected: a square that rotates and skews in-place at the top-left of the screen. Our last step is to move it back to (50, 50) with an extra translate() step inserted to the start of the list, whose values are hard-coded (next page, top right).** | Reload the page and we’ve got what we expected: a square that rotates and skews in-place at the top-left of the screen. Our last step is to move it back to (50, 50) with an extra translate() step inserted to the start of the list, whose values are hard-coded (next page, top right).** | ||
+ | |||
+ | En rechargeant maintenant la page, nous voyons, en fait, que les choses ont empirées ! Maintenant, le carré tourne sur une étendue encore plus grande qu' | ||
+ | |||
+ | Rechargez la page et nous obtenons ce que nous attendions : un carré qui tourne et se déforme sur place en haut à gauche de l' | ||
**Note that the transformations are actually applied in reverse order: first the skewY(), then skewX(), then rotate() then finally translate(). When all we had was rotate and skew functions the order made little difference, but adding the translate() makes a huge difference. Put it at the end of the list, and we’re back to the same problem with the square zooming around as it skews. At the start of the list, however, we’ve got a nicely controlled square, rotating and skewing whilst never leaving the middle of the screen. | **Note that the transformations are actually applied in reverse order: first the skewY(), then skewX(), then rotate() then finally translate(). When all we had was rotate and skew functions the order made little difference, but adding the translate() makes a huge difference. Put it at the end of the list, and we’re back to the same problem with the square zooming around as it skews. At the start of the list, however, we’ve got a nicely controlled square, rotating and skewing whilst never leaving the middle of the screen. | ||
To complete our set of transform functions, let’s add a scale(), so that our square also grows and shrinks. This function can take one or two parameters to indicate the scale factor: if only one is provided then the object is scaled equally in both the x and y directions; if you wish to scale the two directions differently, | To complete our set of transform functions, let’s add a scale(), so that our square also grows and shrinks. This function can take one or two parameters to indicate the scale factor: if only one is provided then the object is scaled equally in both the x and y directions; if you wish to scale the two directions differently, | ||
+ | |||
+ | Notez que les transformations sont réellement appliquées dans l' | ||
+ | |||
+ | Pour compléter notre ensemble de fonctions de transformation, | ||
**Note, however, that there’s no parameter for the center point of the scaling operation. As with the skew functions, your object has to be positioned with its center at (0, 0) if you don’t want it to move as well as change size. Since we’ve already handled this problem for skewing, we just need to ensure that our scale() function is put into the transform attribute after the translate(), | **Note, however, that there’s no parameter for the center point of the scaling operation. As with the skew functions, your object has to be positioned with its center at (0, 0) if you don’t want it to move as well as change size. Since we’ve already handled this problem for skewing, we just need to ensure that our scale() function is put into the transform attribute after the translate(), | ||
To make our animation more interesting we’re going to animate the change in x and y scale separately, over different time periods but within the same range of 0.1 (one tenth of the width or height) to 3.0 (treble the width or height). We’ll encompass these parameters as two more sets of properties in the group.animProperties object (middle right).** | To make our animation more interesting we’re going to animate the change in x and y scale separately, over different time periods but within the same range of 0.1 (one tenth of the width or height) to 3.0 (treble the width or height). We’ll encompass these parameters as two more sets of properties in the group.animProperties object (middle right).** | ||
+ | |||
+ | Notez, cependant, qu'il n'y a pas de paramètre pour un point central de l' | ||
+ | |||
+ | Pour rendre notre animation plus intéressante, | ||
**Like the skew functions we also want to animate from the minimum to the maximum, then back again – as opposed to continuously going in one direction as we did with rotate(). We therefore need a couple of blocks of code to calculate the relevant value at any given time point, changing direction after each period. Below is the code for the x-axis scaling – compare it to the equivalent block for skewX() from last month and you should be able to reproduce code for the y-axis scaling yourself. | **Like the skew functions we also want to animate from the minimum to the maximum, then back again – as opposed to continuously going in one direction as we did with rotate(). We therefore need a couple of blocks of code to calculate the relevant value at any given time point, changing direction after each period. Below is the code for the x-axis scaling – compare it to the equivalent block for skewX() from last month and you should be able to reproduce code for the y-axis scaling yourself. | ||
Ligne 68: | Ligne 80: | ||
At last we have our object rotating, skewing and scaling, all while centered in the browser window – though a static screenshot doesn’t really do it justice. | At last we have our object rotating, skewing and scaling, all while centered in the browser window – though a static screenshot doesn’t really do it justice. | ||
+ | |||
I’m going to finish this month with a couple of exercises for you to try, which build on the animation we’ve created over these previous few articles:** | I’m going to finish this month with a couple of exercises for you to try, which build on the animation we’ve created over these previous few articles:** | ||
+ | |||
+ | Comme pour les fonctions skew, nous voulons les animer entre un minimum et un maximum, puis revenir - contrairement au mouvement dans un seul sens que nous avions avec rotate(). Par conséquent, | ||
+ | |||
+ | Et, bien sûr, nous avons besoin d' | ||
+ | |||
+ | Enfin, nous avons un objet qui tourne, se déforme et change d' | ||
+ | |||
+ | Je terminerai ce mois avec quelques exercices que vous essaierez, qui s' | ||
**• Our final transform attribute has a fixed translate() function to position the square in the middle of the screen. Why not add another two sets of parameters to also animate the x and y position, causing the square to move around the window a little as well. Setting min and max values either side of 50 means you can replace the hard-coded coordinates in the existing translate(). Or you could have a negative min and positive max, then use the values in a second translate() function – but be careful of the ordering! | **• Our final transform attribute has a fixed translate() function to position the square in the middle of the screen. Why not add another two sets of parameters to also animate the x and y position, causing the square to move around the window a little as well. Setting min and max values either side of 50 means you can replace the hard-coded coordinates in the existing translate(). Or you could have a negative min and positive max, then use the values in a second translate() function – but be careful of the ordering! | ||
• Try replacing the contents of the group with something else. It could be a more interesting single shape, such as a star or more faceted polygon, but it could also be any other Inkscape drawing – with multiple shapes and colors. Simply replacing the < | • Try replacing the contents of the group with something else. It could be a more interesting single shape, such as a star or more faceted polygon, but it could also be any other Inkscape drawing – with multiple shapes and colors. Simply replacing the < | ||
+ | |||
+ | ••Notre attribut transform final a une fonction translate() fixe pour positionner le carré au milieu de l' | ||
+ | ••Essayez de remplacer le contenu du groupe par quelque chose d' | ||
**The most important thing to remember is that this animation code – and the JS that we used previously in this series – are just examples to get you going. There’s no reason why you can’t create an animation that messes with the transform attribute whilst at the same time altering the fill and stroke, or manipulating the “d” attribute of a < | **The most important thing to remember is that this animation code – and the JS that we used previously in this series – are just examples to get you going. There’s no reason why you can’t create an animation that messes with the transform attribute whilst at the same time altering the fill and stroke, or manipulating the “d” attribute of a < | ||
+ | |||
+ | La chose la plus importante à mémoriser est que le code de cette animation - et le JS que nous avons utilisé précédemment dans cette série - ne sont que des exemples pour que vous alliez plus loin. Il n'y a aucune raison que vous ne puissiez pas créer une animation qui est mixée avec l' | ||
issue153/inkscape.txt · Dernière modification : 2020/02/10 10:43 de auntiee