Outils pour utilisateurs

Outils du site


issue153:inkscape

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
issue153:inkscape [2020/02/10 09:35]
auntiee
issue153:inkscape [2020/02/10 10:43]
auntiee
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 rouges le long de l'axe des x se déforment « sur place », entraînant les formes de contour qui sont affichées. Les carrés vert et bleu - colorés pour éviter toute confusion quand ils se superposent - se déplacent à droite et à gauche ​comme résultat ​du processus de déformation. Il n'y a pas besoin de réfléchir longtemps pour réaliser que la quantité du déplacement vers la droite et la gauche est vraiment proportionnelle à la distance à l'axe des x ; ainsi, même un petit angle de déformation peut rapidement déplacer une forme sur une grande distance s'il est situé loin de l'axe des x. Et, bien sûr, ces règles s'​appliquent aussi à la fonction skewY(), mais en tournant de 90°.+Les carrés rouges le long de l'axe des x se déforment « sur place », entraînant les formes de contour qui sont affichées. Les carrés vert et bleu - colorés pour éviter toute confusion quand ils se superposent - se déplacent à droite et à gauche ​par suite du processus de déformation. Il n'y a pas besoin de réfléchir longtemps pour réaliser que la quantité du déplacement vers la droite et la gauche est vraiment proportionnelle à la distance à l'axe des x ; ainsi, même un petit angle de déformation peut rapidement déplacer une forme sur une grande distance s'il est situé loin de l'axe des x. Et, bien sûr, ces règles s'​appliquent aussi à la fonction skewY(), mais en tournant de 90°.
  
-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'​écran (50, 50). Malheureusement,​ tout ce travail signifie qu'une déformation de la forme la pousse aussi quelque part ailleurs. Le problème est que vous avons deux nécessités contradictoires : +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'​écran (50, 50). Malheureusement,​ tout ce travail signifie qu'une déformation de la forme la pousse aussi quelque part ailleurs. Le problème est que nous avons deux nécessités contradictoires : 
 ••Nous voulons que l'​objet soit centré à (50, 50) pour l'​affichage. ••Nous voulons que l'​objet soit centré à (50, 50) pour l'​affichage.
 ••Nous avons besoin que l'​objet soit centré à (0, 0) de façon à le déformer. ••Nous avons besoin que l'​objet soit centré à (0, 0) de façon à le déformer.
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'​objet à (0, 0) ; puis le déformer ; puis utiliser une autre fonction translate() ​pourle ​déplacer à (50, 50).+••Utiliser la fonction translate() pour déplacer l'​objet à (0, 0) ; puis le déformer ; puis utiliser une autre fonction translate() ​pour le déplacer à (50, 50).
 ••Changer les attributs x et y de l'​objet de sorte qu'il commence à la position (0, 0). Après la déformation,​ ajouter une fonction translate() pour le déplacer à (50, 50). ••Changer les attributs x et y de l'​objet de sorte qu'il commence à la position (0, 0). Après la déformation,​ ajouter une fonction translate() pour le déplacer à (50, 50).
 ••Utiliser une fonction matrix() plutôt que les fonctions skewX() et skewY(), car elle combine la  déformation et la translation en un seul appel. ••Utiliser une fonction matrix() plutôt que les fonctions skewX() et skewY(), car elle combine la  déformation et la translation en un seul appel.
  
-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'​objet est calculée trois fois : une fois avec les valeurs initiales de x et y règlées à 50 ; une fois lors de la translation à (0, 0) avant la déformation ; puis, une dernière fois quand une translation inverse est appliquée pour remettre la version déformée en place.+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 skew. La première option est probablement la plus claire sur ce qui se passe, mais, avec ellela position de l'​objet est calculée trois fois : une fois avec les valeurs initiales de x et y règlées à 50 ; une fois lors de la translation à (0, 0) avant la déformation ; puis, une dernière fois quand une translation inverse est appliquée pour remettre la version déformée en place.
  
 **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,​ so if the JavaScript fails to load for some reason the square will be positioned at the top left, rather than in the middle of the screen. A slight modification to this approach – and the one we’ll take here – is to leave the SVG file untouched, but change the x and y values to zero at the start of the JS file. That way, if the script fails to load you still get a stationary fallback image with the square in the right place, but if everything loads correctly, the JS immediately changes the object’s coordinates to make for less work in the rest of the code. The first step is therefore to modify the start of the initialise() function to get a handle to the <​rect>​ inside the group, and reset the attributes ( shown top right). **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,​ so if the JavaScript fails to load for some reason the square will be positioned at the top left, rather than in the middle of the screen. A slight modification to this approach – and the one we’ll take here – is to leave the SVG file untouched, but change the x and y values to zero at the start of the JS file. That way, if the script fails to load you still get a stationary fallback image with the square in the right place, but if everything loads correctly, the JS immediately changes the object’s coordinates to make for less work in the rest of the code. The first step is therefore to modify the start of the initialise() function to get a handle to the <​rect>​ inside the group, and reset the attributes ( shown top right).
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 <​path>​ or an <​image>​ instead of the <​rect>​). Once we’ve got a handle to the element, it’s back to our old friend setAttribute() to set the new values we want.** 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 <​path>​ or an <​image>​ instead of the <​rect>​). Once we’ve got a handle to the element, it’s back to our old friend setAttribute() to set the new values we want.**
  
-Le meilleur compromis pour ce projet est la seconde approche. Cependant, le simple changement des valeurs de x et y dans SVG signifie que le fichier source ne contient plus les « vraies » valeurs des coordonnées ; aussi, si Javascript ​n'​arrive pas à charger pour une raison quelconque, le carré sera positionné en haut à gauche, plutôt qu'au milieu de l'​écran. Une légère modification de cette approche - et c'est ce que nous prendrons ici - est de ne pas toucher au fichier SVG et de changer les valeurs de x et y pour zéro au début du fichier JS. De cette façon, si le script n'​arrive pas à charger, vous obtiendrez ​encore ​une image fixe de secours avec le carré à la bonne place ; mais si tout se charge correctement,​ le JS change immédiatement les coordonnées de l'​objet pour simplifier le travail dans le reste du code. La première étape est, par conséquent,​ de modifier le début de la fonction initialize() pour disposer d'une manette pour le <​rect>​ dans le groupe, et remettre à zéro les attributs (voir en haut à droite).+Le meilleur compromis pour ce projet est la seconde approche. Cependant, le simple changement des valeurs de x et y dans SVG signifie que le fichier source ne contient plus les « vraies » valeurs des coordonnées ; aussi, si JavaScript ​n'​arrive pas à charger pour une raison quelconque, le carré sera positionné en haut à gauche, plutôt qu'au milieu de l'​écran. Une légère modification de cette approche - et c'est ce que nous prendrons ici - est de ne pas toucher au fichier SVG et de changer les valeurs de x et y pour zéro au début du fichier JS. De cette façon, si le script n'​arrive pas à charger, vous obtiendrez ​de toute façon ​une image fixe de secours avec le carré à la bonne place ; mais si tout se charge correctement,​ le JS change immédiatement les coordonnées de l'​objet pour simplifier le travail dans le reste du code. La première étape est, par conséquent,​ de modifier le début de la fonction initialize() pour disposer d'une manette pour le <​rect>​ dans le groupe, et remettre à zéro les attributs (voir en haut à droite).
  
 Nous utilisons group.querySelector() pour trouver le rectangle car il limite ses recherches aux descendants de l'​objet du groupe (à comparer à document.querySelector() qui chercherait sur tout le document) et ça facilite le remplacement de l'​argument par un sélecteur d'ID ou de classe quand on travaille avec un dessin plus complexe, ou avec un autre sélecteur d'​élément si nous changeons le contenu du groupe pour qu'il soit d'un type d'​objet différent (par ex. un <​path>​ ou une <​image>​ à la place du <​rect>​).Une fois que nous disposons d'une manette pour l'​élément,​ nous revenons à notre vieil ami setAttribute() pour mettre les nouvelles valeurs que nous voulons. Nous utilisons group.querySelector() pour trouver le rectangle car il limite ses recherches aux descendants de l'​objet du groupe (à comparer à document.querySelector() qui chercherait sur tout le document) et ça facilite le remplacement de l'​argument par un sélecteur d'ID ou de classe quand on travaille avec un dessin plus complexe, ou avec un autre sélecteur d'​élément si nous changeons le contenu du groupe pour qu'il soit d'un type d'​objet différent (par ex. un <​path>​ ou une <​image>​ à la place du <​rect>​).Une fois que nous disposons d'une manette pour l'​élément,​ nous revenons à notre vieil ami setAttribute() pour mettre les nouvelles valeurs que nous voulons.
Ligne 55: Ligne 55:
 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'​avant,​ passant le plus clair de son temps en dehors des limites. La raison en est simple : souvenez-vous que nous avons utilisé la version à trois paramètres de la fonction de transformation rotate() ; aussi, même si notre objet est centré sur (0, 0), il tourne encore autour de (50, 50). Maintenant, pour y parer, nous pouvons ​utiliser ​la fonction à une seule valeur et la ligne où nous règlons la valeur de l'​attribut transform devient ​ainsi (en bas à droite).+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'​avant,​ passant le plus clair de son temps en dehors des limites. La raison en est simple : souvenez-vous que nous avons utilisé la version à trois paramètres de la fonction de transformation rotate() ; aussi, même si notre objet est centré sur (0, 0), il tourne encore autour de (50, 50). Maintenant, nous pouvons ​le réduire en utilisant ​la fonction à une seule valeur et la ligne où nous règlons la valeur de l'​attribut transform devient ​ceci (en bas à droite).
  
 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'​écran. Notre dernière étape est de le ramener à (50, 50) avec un mouvement translate() inséré au début de la liste, dont les valeurs sont codées en dur (page suivante, en haut à droite). 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'​écran. Notre dernière étape est de le ramener à (50, 50) avec un mouvement translate() inséré au début de la liste, dont les valeurs sont codées en dur (page suivante, en haut à droite).
Ligne 63: Ligne 63:
 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,​ then you have to provide two parameters.** 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,​ then you have to provide two parameters.**
  
-Notez que les transformations sont réellement appliquées dans l'​ordre inverse : d'​abord skewY(), puis skewX(), puis rotate() et, enfin, translate(). Quand nous n'​avions que des fonctions de rotation et de déformation,​ l'​ordre n'​avait que peu d'​importance,​ mais l'​ajout de translate() fait une énorme différence. Mettez-la à la fin de liste et vous reviendrez au même problème avec le carré qui va et vient pendant qu'il se déforme. Cependant, placée au début de la liste, nous avons un carré bien piloté qui tourne et se déforme sans jamais quitter le milieu de l'​écran.+Notez que les transformations sont réellement appliquées dans l'​ordre inverse : d'​abord skewY(), puis skewX(), puis rotate() et, enfin, translate(). Quand nous n'​avions que des fonctions de rotation et de déformation,​ l'​ordre n'​avait que peu d'​importance,​ mais l'​ajout de translate() fait une énorme différence. Mettez-la à la fin de la liste et vous reviendrez au même problème avec le carré qui va et vient pendant qu'il se déforme. Cependant, placée au début de la liste, nous avons un carré bien piloté qui tourne et se déforme sans jamais quitter le milieu de l'​écran.
  
-Pour compléter notre ensemble de fonctions de transformation,​ ajoutons scale(), de sorte que notre carré grandit et rapetisse. Cette fonction peut prendre un ou deux paramètes ​pour indiquer le facteur d'​échelle : si un seul paramètre est fourni, alors l'​objet change de taille à égalité dans les directions x et y ; si vous souhaitéz des mises à l'​échelle différentes dans les deux directions, vous devez alors fournir deux paramètres.+Pour compléter notre ensemble de fonctions de transformation,​ ajoutons scale(), de sorte que notre carré grandit et rapetisse. Cette fonction peut prendre un ou deux paramètres ​pour indiquer le facteur d'​échelle : si un seul paramètre est fourni, alors l'​objet change de taille à égalité dans les directions x et y ; si vous souhaitéz des mises à l'​échelle différentes dans les deux directions, vous devez alors fournir deux paramètres.
  
 **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 ensure that the scale operation is performed before the translation. **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 ensure that the scale operation is performed before the translation.
Ligne 94: Ligne 94:
 • 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 <​rect>​ with an <​image>​ element makes for an interesting effect, reminiscent of the kind of thing that required a Hollywood budget back in the 1980s.** • 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 <​rect>​ with an <​image>​ element makes for an interesting effect, reminiscent of the kind of thing that required a Hollywood budget back in the 1980s.**
  
-••Notre attribut transform final a une fonction translate() fixe pour positionner le carré au milieu de l'​écran. Pourquoi ne pas ajouter aussi un autre ensemble de paramètres pour animer la position en x et en y, entraînant un peu un mouvement du carré dans la fenêtre. Le paramétrage de valeurs min et max de part et d'​autre des 50 vous permet de remplacer les coordonnées codées en dur dans l'​actuelle translate(). Ou, vous pouvez avoir une valeur min négative et un max positif, puis utiliser les valeurs dans une seconde fonction translate() - mais attention à l'​ordre ! +••Notre attribut transform final a une fonction translate() fixe pour positionner le carré au milieu de l'​écran. Pourquoi ne pas ajouter aussi un autre ensemble de paramètres pour animer la position en x et en y, entraînant un peu de mouvement du carré dans la fenêtre. Le paramétrage de valeurs min et max de part et d'​autre des 50 vous permet de remplacer les coordonnées codées en dur dans l'​actuelle translate(). Ou, vous pouvez avoir une valeur min négative et un max positif, puis utiliser les valeurs dans une seconde fonction translate() - mais attention à l'​ordre ! 
-••Essayez de remplacer le contenu du groupe par quelque chose d'​autre. Ce peut être une forme unique plus intéressante,​ telle qu'​étoile ou un polygone à plus de faces, mais ce peut être aussi par n'​importe quel dessin d'​Inkscape - avec de nombreuses formes et couleurs. Le simple remplacement du <​rect>​ par un élément <​image>​ donne un effet intéressant,​ rappelant le genre de chose qui nécessitait un budget ​hollywwodien ​dans les années 80.+••Essayez de remplacer le contenu du groupe par quelque chose d'​autre. Ce peut être une forme unique plus intéressante,​ telle qu'une étoile ou un polygone à plus de faces, mais ce peut être aussi par n'​importe quel dessin d'​Inkscape - avec de nombreuses formes et couleurs. Le simple remplacement du <​rect>​ par un élément <​image>​ donne un effet intéressant,​ rappelant le genre de chose qui nécessitait un budget ​hollywoodien ​dans les années 80.
  
 **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 <​path>​ in order to change the shape being drawn. With an understanding of how to change attributes and properties from JS you can create interactive or animated SVG images that go way beyond the frame-based limitations of an animated GIF. It’s a bit of a cliché, but the only real limit is your own imagination.** **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 <​path>​ in order to change the shape being drawn. With an understanding of how to change attributes and properties from JS you can create interactive or animated SVG images that go way beyond the frame-based limitations of an animated GIF. It’s a bit of a cliché, but the only real limit is your own imagination.**
  
-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'​attribut transform, tout en ayant dans le même temps une modification du remplissage et du contour, ou en manipulant l'​attribut « d » d'un <​path>​ de façon à changer la forme qui se dessine. En comprenant comment modifier les attributs et les propriétés dans le JS, vous pouvez créer des images SVG interactives ou animées qui dépassent les limitations des animations GIF, basées sur des trames. C'est un peu un cliché, mais la seule vraie limite, c'est celle de votre imagination.+La chose la plus importante à se rappeler ​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 vous aider à démarrer rapidement. Il n'y a aucune raison ​pour que vous ne puissiez pas créer une animation qui bricole ​avec l'​attribut transform, tout en ayant dans le même temps une modification du remplissage et du contour, ou en manipulant l'​attribut « d » d'un <​path>​ de façon à changer la forme qui se dessine. En comprenant comment modifier les attributs et les propriétés dans le JS, vous pouvez créer des images SVG interactives ou animées qui dépassent les limitations des animations GIF, basées sur des trames. C'est un peu un cliché, mais la seule vraie limite, c'est celle de votre imagination.
  
  
issue153/inkscape.txt · Dernière modification: 2020/02/10 10:43 par auntiee