Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue153:inkscape [2020/02/10 07:43] – d52fr
+++ issue153:inkscape [2020/02/10 09:35] – auntiee
@@ 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.**
-La dernière fois, nous avons commencé à travailler sur un fichier SVG qui utilise Javascript pour animer l'attribut «transform » d'un objet quand il était chargé dans un navigateur Web. Nous étions allé jusqu'à animer les fonctions rotate() et skewX() et je vous avais confié le challenge d’ajouter skewY() à cet ensemble. Avec un peu de chance, vous avez trouvé qu'il s'agit, en gros, de copier le code de skewX() et de remplacer « X » par « Y ». Spécifiquement :
+La dernière fois, nous avons commencé à travailler sur un fichier SVG qui utilise JavaScript pour animer l'attribut « transform » d'un objet chargé dans un navigateur Web. Nous étions allé jusqu'à animer les fonctions rotate() et skewX() et je vous avais confié le challenge d’ajouter skewY() à cet ensemble. Avec un peu de chance, vous avez trouvé qu'il s'agit, en gros, de copier le code de skewX() et de remplacer « X » par « Y ». Spécifiquement :
 ••Créer trois nouvelles propriétés dans l'objet animProperties : skewDuration, skewYMin, skewYMax.
 ••Insérer un autre bloc de code pour calculer la valeur courante de la fonction skewY(), compte-tenu de l'horodatage fourni. C'est littéralement une copie du code de skewX, en remplaçant tout du long la dernière lettre, avec pour résultat final, la variable skewYAmount.
-••Ajouter une autre ligne à l'appel setAttribute() pour inclure la fonction skewY() dans l'attribut transform, en passant la valeur de la variable skewAmount via un chaîne modèle.
+••Ajouter une autre ligne à l'appel setAttribute() pour inclure la fonction skewY() dans l'attribut transform, en passant la valeur de la variable skewAmount via la chaîne modèle.
 **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)**
-Je vous avais aussi laissé avec une sorte de puzzle : avec l'ajout de la fonction skewY(), le carré ne tourne pas, ni ne se déforme, juste au milieu de l'écran comme vous pourriez vous y attendre : à la place, il se déplace dans et largement en dehors de la fenêtre du navigateur pendant qu'il tourne. L'ajout de la fonction skewY() a exacerbé le problème. Pourquoi fait-il ça ? Et comment pouvons-nous obtenir le comportement attendu ?
+Je vous avais aussi laissé avec une sorte de puzzle : avec l'ajout de la fonction skewX(), le carré ne tourne tout simplement pas, ni ne se déforme, au milieu de l'écran comme vous pourriez vous y attendre : à la place, il se déplace dans et largement en dehors de la fenêtre du navigateur pendant qu'il tourne. L'ajout de la fonction skewY() a exacerbé le problème. Pourquoi fait-il ça ? Et comment pouvons-nous obtenir le comportement attendu ?
 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'équivalent. La déformation s'applique par rapport à une ligne de référence, plutôt qu'un point unique ; mais il n' y a pas de fonction générique skew() qui vous permettrait de spécifier cette ligne de base via deux jeux de coordonnées. À la place, seulement deux lignes de référence possibles sont disponibles : l'axe des x (via la fonction skewX()) et l'axe des y (via la fonction skewY()). Le graphique ci-dessous montre l'effet d'une déformation le long de l'axe x pour la même taille d'objet positionné dans différents endroits (en bas à gauche).