| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue92:inkscape [2015/03/07 23:13] – andre_domenech | issue92:inkscape [2015/03/09 09:38] (Version actuelle) – [7] auntiee |
|---|
| Let's start with a familiar image to which we'll apply a clipping path. Remember, all the parts inside the bright green clipping line will remain visible once the clip is applied, whereas those outside it will be hidden.** | Let's start with a familiar image to which we'll apply a clipping path. Remember, all the parts inside the bright green clipping line will remain visible once the clip is applied, whereas those outside it will be hidden.** |
| |
| Erratum : Pendant la mise en pages du magazine, il est courant que les images soient recadrées ou supprimées entièrement. Malheureusement, c'est arrivé à quelques images dans l'article du mois dernier, ce qui pourrait avoir causé la confusion, certaines des parties manquantes étant directement référencées dans le texte. J'ai mis les images complètes en ligne sur : http://www.peppertop.com/fc/ | Erratum : Pendant la mise en pages du magazine, il est courant que les images soient recadrées ou supprimées entièrement. Malheureusement, c'est arrivé à quelques images dans l'article du mois dernier, ce qui pourrait avoir semé la confusion, certaines des parties manquantes étant directement référencées dans le texte. J'ai mis les images complètes en ligne sur : http://www.peppertop.com/fc/ |
| |
| | Dans la partie 29, j'ai montré une raison de créer un groupe avec un seul objet : débuter un procédé pour produire des dessins en miroir ou kaléidoscopiques en utilisant des clones. Cette fois-ci, je vais utiliser un seul objet dans un groupe et un peu de clonage, pour effectuer quelques trucs un peu rusés avec la découpe et les masques. |
| |
| Dans la partie 29, j'ai montré une raison de mettre un seul objet dans un groupe : débuter un procédé pour produire des dessins en miroir ou kaléidoscopiques en utilisant des clones. Cette fois, je vais utiliser un seul objet dans un groupe et un peu de clonage, pour effectuer quelques astuces amusantes avec la découpe et les masques. | Commençons avec une image familière à laquelle nous allons appliquer un chemin de découpe. Rappelez-vous, toutes les parties à l'intérieur de la ligne de découpe vert vif resteront visibles une fois la découpe appliquée, alors que celles à l'extérieur seront cachées. |
| | |
| Commençons avec une image familière à laquelle nous allons appliquer un chemin de découpe. Rappelez-vous, toutes les parties à l'intérieur de la ligne de découpe vert vif resteront visibles une fois la découpe appliquée, alors que celles de l'extérieur seront cachées. | |
| |
| ====== 2 ====== | ====== 2 ====== |
| From the introduction, you've probably already deduced that the answer is to group our image before clipping it. Here I've denoted the group with a dotted box for illustrative purposes – it doesn't appear in a real drawing.** | From the introduction, you've probably already deduced that the answer is to group our image before clipping it. Here I've denoted the group with a dotted box for illustrative purposes – it doesn't appear in a real drawing.** |
| |
| Après avoir découpé notre image pour garder seulement sa tête, que faire si nous décidons alors que nous voulons aussi les mains ? Nous pourrions retirer la découpe et construire un chemin plus complexe qui comprend aussi les mains, avant de redécouper. Mais cela nous laisse toujours avec un seul objet, avec la tête et les mains à une distance fixe. Si nous voulons déplacer les mains indépendamment de la tête - ou peut-être mettre à l'échelle ou faire pivoter - nous sommes à court d'options. | Après avoir découpé notre image pour garder seulement sa tête, que faire si nous décidons alors que nous voulons aussi les mains ? Nous pourrions retirer la découpe et construire un chemin plus complexe qui comprend aussi les mains, avant de redécouper. Mais cela nous laisse toujours avec un seul objet, avec la tête et les mains à une distance fixe. Si nous voulons déplacer les mains indépendamment de la tête - ou peut-être les mettre à l'échelle ou les faire pivoter - nous sommes à court d'options. |
| |
| Une deuxième approche évidente serait d'importer l'image une deuxième fois et de découper pour montrer les mains. Maintenant, nous avons deux images, chacune découpée différemment, résultant en deux objets distincts qui peuvent être modifiés de façon indépendante. Avec une image liée, cela pourrait être une approche raisonnable, mais si nos images sont intégrées de façon que le SVG résultant puisse être partagé plus facilement, nous avons maintenant deux grandes images bitmap gonflant notre dossier. Ce que nous voulons vraiment, c'est un moyen d'inclure l'image une seule fois, mais de créer deux découpes complètement séparées d'elle. | Une deuxième approche évidente serait d'importer l'image une deuxième fois et de la découper pour montrer les mains. Maintenant, nous avons deux images, chacune découpée différemment, résultant en deux objets distincts qui peuvent être modifiés de façon indépendante. Avec une image liée, cela pourrait être une approche raisonnable, mais si nos images sont intégrées de façon que le SVG résultant puisse être partagé plus facilement, nous avons maintenant deux grandes images bitmap gonflant notre dossier. Ce que nous voulons vraiment, c'est un moyen d'inclure l'image une seule fois, mais d'en créer deux découpes complètement séparées. |
| |
| Vu l'introduction, vous avez probablement déjà compris que la réponse est de grouper notre image avant la découpe. Ici, j'ai indiqué le groupe par une boîte en pointillés à des fins d'illustration - il n'apparaît pas dans un vrai dessin. | Vu l'introduction, vous avez probablement déjà compris que la réponse est de grouper notre image avant la découpe. Ici, j'ai indiqué le groupe par une boîte en pointillés à des fins d'illustration - il n'apparaît pas dans un vrai dessin. |
| The difference is subtle, but useful. By clipping the group, we've effectively created a window through which we're viewing just a part of the image at any time, but the image itself is still the full size. We can demonstrate this by double-clicking to enter the group, then dragging the image around. We're moving the un-clipped image inside the clipped group, not moving the group itself, and the effect is quite different. You could also scale, rotate or skew the image if you want, all without the size or shape of the “window” being affected.** | The difference is subtle, but useful. By clipping the group, we've effectively created a window through which we're viewing just a part of the image at any time, but the image itself is still the full size. We can demonstrate this by double-clicking to enter the group, then dragging the image around. We're moving the un-clipped image inside the clipped group, not moving the group itself, and the effect is quite different. You could also scale, rotate or skew the image if you want, all without the size or shape of the “window” being affected.** |
| |
| Le résultat (en bas à droite) n'a pas l'air tout à fait différent de notre première tentative, mais c'est parce que l'effet n'est pas un visuel, mais plutôt une structure. Auparavant, notre chemin de découpe a été appliqué directement sur l'image. Si vous alliez regarder dans l'éditeur XML vous verriez que l'image a un attribut « clip-path » dont la valeur est l'ID d'un chemin mémorisé dans la section <defs> du fichier XML. Avec l'image groupée puis découpée, l'attribut clip-path est maintenant sur le groupe lui-même et soit l'image n'a pas d'attribut clip-path du tout, soit sa valeur est réglé sur « none ». | Le résultat (en bas à droite) n'a pas l'air tout à fait différent de notre première tentative, mais c'est parce que l'effet n'est pas visuel, mais plutôt un effet de structure. Auparavant, notre chemin de découpe a été appliqué directement sur l'image. Si vous regardiez dans l'éditeur XML vous verriez que l'image a un attribut « clip-path » dont la valeur est l'ID d'un chemin mémorisé dans la section <defs> du fichier XML. Avec l'image groupée puis découpée, toutefois, l'attribut clip-path est maintenant sur le groupe lui-même et soit l'image n'a pas d'attribut clip-path du tout, soit sa valeur est réglé sur « none ». |
| |
| La différence est subtile, mais utile. En découpant le groupe, nous avons effectivement créé une fenêtre par laquelle nous regardons juste une partie de l'image à tout moment, mais l'image elle-même a encore sa taille complète. Nous pouvons le démontrer en double-cliquant pour entrer dans le groupe, puis en faisant glisser l'image. Nous déplaçons l'image non découpée à l'intérieur du groupe de découpe, le groupe lui-même ne bouge pas, et l'effet est tout à fait différent. Vous pouvez également redimensionner, faire pivoter ou incliner l'image si vous voulez, le tout sans que la taille ou la forme de la « fenêtre » ne soit affectée. | La différence est subtile, mais utile. En découpant le groupe, nous avons effectivement créé une fenêtre par laquelle nous regardons juste une partie de l'image à un moment donné, mais l'image elle-même a encore sa taille complète. Nous pouvons le démontrer en double-cliquant pour entrer dans le groupe, puis en faisant glisser l'image. Nous déplaçons l'image non découpée à l'intérieur du groupe découpé, le groupe lui-même ne bouge pas, et l'effet est tout à fait différent. Vous pouvez également redimensionner, faire pivoter ou incliner l'image si vous voulez, le tout sans que la taille ou la forme de la « fenêtre » ne soit affectée. |
| |
| ====== 4 ====== | ====== 4 ====== |
| Step 7: Currently you have an image, and a clone of that image, both inside a single group. Let's put the clone somewhere more useful. With the clone selected, use Edit > Cut or CTRL-X to remove it from the document (watch it vanish from the XML Editor before your very eyes), and put it on the clipboard. Remember, what we've actually put on the clipboard is just a small <svg:use> element, not the heavyweight binary data of the original image.** | Step 7: Currently you have an image, and a clone of that image, both inside a single group. Let's put the clone somewhere more useful. With the clone selected, use Edit > Cut or CTRL-X to remove it from the document (watch it vanish from the XML Editor before your very eyes), and put it on the clipboard. Remember, what we've actually put on the clipboard is just a small <svg:use> element, not the heavyweight binary data of the original image.** |
| |
| Étape 5 : Double-cliquez pour entrer dans le groupe, et sélectionnez l'image. Gardez un œil sur la barre d'état pour confirmer ce qui se passe, et l'éditeur XML devrait également mettre en évidence l'entrée de l'image. | Étape 5 : Double-cliquez pour entrer dans le groupe et sélectionnez l'image. Gardez un œil sur la barre d'état pour confirmer ce qui se passe, et l'éditeur XML devrait également mettre en évidence l'entrée de l'image. |
| |
| Étape 6 : Clone l'image en utilisant Editer > Cloner > Créer un clone, ou en appuyant sur Alt+D. Remarquez dans l'éditeur XML qu'un élément <svg:use> est créé avec un attribut « xlink:href » qui référence l'image par son ID. C'est votre clone ! Peu importe la complexité de l'objet parent, un clone est en fait toujours juste un simple petit <svg:use> qui contient une référence à l'original. | Étape 6 : Clonez l'image en utilisant Editer > Cloner > Créer un clone, ou en appuyant sur Alt+D. Remarquez dans l'éditeur XML qu'un élément <svg:use> est créé avec un attribut « xlink:href » qui référence l'image par son ID. C'est votre clone ! Peu importe la complexité de l'objet parent, un clone est en fait toujours juste un simple petit <svg:use> qui contient une référence à l'original. |
| |
| Étape 7 : Maintenant, vous avez une image, et un clone de cette image, tous deux dans un même groupe. Mettons le clone à un endroit plus utile. Avec le clone sélectionné, utilisez Editer > Couper ou Ctrl+X pour le supprimer du document (regardez-le disparaître de l'éditeur XML devant vos yeux), et le mettre dans le presse-papiers. Rappelez-vous, ce que nous avons effectivement mis dans le presse-papiers est juste un petit élément <svg:use>, pas les données binaires lourdes de l'image originale. | Étape 7 : Maintenant, vous avez une image et un clone de cette image, tous deux dans un même groupe. Mettons le clone à un endroit plus utile. Avec le clone sélectionné, utilisez Édition > Couper ou Ctrl+X pour le supprimer du document (regardez-le disparaître de l'éditeur XML devant vos yeux) et le mettre dans le presse-papiers. Rappelez-vous, ce que nous avons effectivement mis dans le presse-papiers est juste un petit élément <svg:use>, pas les données binaires lourdes de l'image originale. |
| |
| ====== 7 ====== | ====== 7 ====== |
| Step 10: There's nothing special about this clone – you can treat it as you would any other. That means you can clip, mask, group, rotate, skew or blur it, and much more besides. So let's complete our original task, and clip it to show just the hands.** | Step 10: There's nothing special about this clone – you can treat it as you would any other. That means you can clip, mask, group, rotate, skew or blur it, and much more besides. So let's complete our original task, and clip it to show just the hands.** |
| |
| Étape 8 : Inkscape ne se soucie pas vraiment où nous collons le clone, tant que l'ID qu'il référence existe toujours dans le document. Donc, double-cliquez sur le fond jusqu'à ce que la barre d'état indique que vous êtes hors du groupe, puis utilisez Editer > Coller ou Ctrl+V pour coller le clone dans le document. | Étape 8 : Inkscape ne se soucie pas vraiment de l'endroit où nous collons le clone, tant que l'ID qu'il référence existe toujours dans le document. Donc, double-cliquez sur le fond jusqu'à ce que la barre d'état indique que vous êtes hors du groupe, puis utilisez Édition > Coller ou Ctrl+V pour coller le clone dans le document. |
| | |
| | Étape 9 : Si tout va bien, vous devriez maintenant voir une autre copie, non découpée, de votre image. Rappelez-vous, la découpe a été appliquée au groupe, mais nous avons pris notre clone à un niveau inférieur, avant que la découpe ne soit appliquée, nous donnant accès à l'image d'origine à nouveau, mais sans nécessiter une deuxième copie de toutes les données binaires. |
| |
| Étape 9 : Si tout va bien, vous devriez maintenant voir une autre copie, non découpée de votre image. Rappelez-vous, la découpe a été appliquée au groupe, mais nous avons pris notre clone à un niveau inférieur, avant que la découpe ne soit appliquée, nous donnant accès à l'image d'origine à nouveau, mais sans nécessiter une deuxième copie de toutes les données binaires. | Étape 10 : Il n'y a rien de spécial à propos de ce clone, vous pouvez le traiter comme n'importe quel autre. Cela signifie que vous pouvez appliquer une découpe, un masque, grouper, pivoter, incliner ou flouter, et bien plus encore. Nous allons donc terminer notre tâche d'origine et le découper pour montrer seulement les mains. |
| Étape 10 : Il n'y a rien de spécial à propos de ce clone, vous pouvez le traiter comme n'importe quel autre. Cela signifie que vous pouvez appliquer une découpe, un masque, grouper, pivoter, incliner ou flouter, et bien plus encore. Donc, nous allons terminer notre tâche d'origine et le découper pour montrer seulement les mains. | |
| |
| ====== 8 ====== | ====== 8 ====== |
