As I write this, the third beta for Inkscape 1.4 has just been released, primarily fixing some Windows issues. I encourage any readers who are so inclined to download the beta versions, try them out, and report any issues they find. If you’re not a programmer, it’s perhaps one of the best ways to contribute back to Open Source software, helping to ensure that the quality of the final release is as high as possible. Despite version 1.4 looming large on the horizon, there are still a couple of features from 1.3 for me to cover. This month, I’m going to look at some new on-canvas controls that have been added. As has often happened with Inkscape, these controls don’t actually provide any new functionality, but they do expose existing features in the UI in a way that might make them more discoverable, or easier to access, when you need them. The first of these is on-canvas editing of corners for paths and other shapes. In other words, the ability to turn sharp corners into fillets (curved corners) and chamfers (angled corners) directly on the canvas. This brings Inkscape somewhat up to parity with other applications which often offer such functionality, but there’s a good reason why it wasn’t present previously: the SVG file format.
Au moment où j'écris ces lignes, la troisième version bêta d'Inkscape 1.4 vient d'être publiée, corrigeant principalement quelques problèmes liés à Windows. J'encourage tous les lecteurs qui le souhaitent à télécharger les versions bêta, à les essayer et à signaler les problèmes qu'ils rencontrent. Si vous n'êtes pas programmeur, c'est peut-être l'une des meilleures façons de contribuer aux logiciels Open Source, en aidant à garantir que la qualité de la version finale soit aussi élevée que possible.
Bien que la version 1.4 se profile à l'horizon, il me reste encore quelques fonctionnalités de la 1.3 à couvrir. Ce mois-ci, je vais examiner quelques nouveaux contrôles sur le canevas qui ont été ajoutés. Comme c'est souvent le cas avec Inkscape, ces contrôles n'apportent pas de nouvelles fonctionnalités, mais ils exposent des fonctionnalités existantes dans l'interface utilisateur d'une manière qui les rend plus faciles à découvrir ou à y accéder lorsque vous en avez besoin.
Le premier de ces contrôles est l'édition sur le canevas des coins des chemins et autres formes. En d'autres termes, la possibilité de transformer les angles vifs en filets (angles courbes) et en chanfreins (angles) directement sur le canevas. Inkscape se rapproche ainsi des autres applications qui proposent souvent ce type de fonctionnalité, mais il y a une bonne raison pour laquelle elle n'existait pas auparavant : le format du fichier SVG.
SVG doesn’t support filleted or chamfered corners, other than through them being drawn as real path segments. Inkscape often gets around such limitations through the use of Live Path Effects (LPEs). These are a means by which Inkscape can store the ‘original’ path or object data in its own custom fields, while also creating a version of the shape using ‘normal’ SVG paths, so that other applications can still render the result. Those applications won’t have the same editing capabilities as Inkscape, but at least the end result can still be displayed and used, even if some of the Inkscape-specific editing options are lost. LPEs have been exposed as on-canvas tools before: if you draw a Spiro path using the Pen tool (aka the Bézier tool) or the Pencil tool, Inkscape automatically adds the Spiro LPE to produce the effect. Creating a BSpline similarly adds the BSpline LPE, while selecting a shape for the path (e.g. Ellipse or Triangle In) adds the Pattern Along Path or Power Stroke LPE. These effects stack, so drawing a Spiro path with the Triangle Out shape adds both the Spiro and Power Stroke LPEs. This approach does a good job of hiding the complexity of the main LPE dialog, while still allowing more advanced users to edit the LPE parameters directly, or flatten the path to remove the overhead of the LPE calculations. In the same manner, the new on-canvas editing of corners exposes the Corners LPE in a more intuitive way, while still allowing access to the LPE parameters if necessary.
SVG ne prend pas en charge les coins arrondis ou chanfreinés, si ce n'est en les dessinant comme de véritables segments de chemin. Inkscape contourne souvent ces limitations en utilisant les LPE (Live Path Effects - Effets de chemin). Il s'agit d'un moyen par lequel Inkscape peut stocker le chemin « original » ou les données de l'objet dans ses propres champs personnalisés, tout en créant une version de la forme en utilisant des chemins SVG « normaux », de sorte que d'autres applications puissent toujours rendre le résultat. Ces applications n'auront pas les mêmes capacités d'édition qu'Inkscape, mais au moins le résultat final pourra être affiché et utilisé, même si certaines des options d'édition spécifiques à Inkscape sont perdues.
Les LPE ont déjà été exposés en tant qu'outils sur le canevas : si vous dessinez un chemin Spiro à l'aide de l'outil Stylo (alias l'outil Bézier) ou de l'outil Crayon, Inkscape ajoute automatiquement le LPE Spiro pour produire l'effet. La création d'une BSpline ajoute également le LPE BSpline, tandis que la sélection d'une forme pour le chemin (par exemple Ellipse ou Triangle décroissant) ajoute le LPE Motif suivant un chemin ou Contour dynamqiue. Ces effets s'empilent, de sorte que dessiner un chemin Spiro avec la forme Triangle croissant ajoute à la fois les LPE Spiro et Contour dynamique.
Cette approche permet de dissimuler la complexité de la boîte de dialogue principale des LPE, tout en permettant aux utilisateurs plus expérimentés de modifier directement les paramètres des LPE ou d'aplatir la trajectoire afin d'éliminer la charge des calculs des LPE. De la même manière, la nouvelle édition des coins sur le canevas expose le LPE des coins de manière plus intuitive, tout en permettant l'accès aux paramètres du LPE si nécessaire.
To begin, let’s use this feature on a simple path drawn using the Bézier tool. Here’s how my semi-random shape looks with the Node tool selected (F2). With the Node tool still selected, we can add the Corners LPE simply by clicking a button in the tool control bar (outlined in red in this image). Note that clicking it a second time removes the LPE, losing any changes you’ve made, though Edit > Undo (Ctrl-Z) should save you if you click it by mistake. Note that the button doesn’t appear as a visible toggle: it doesn’t change state when the LPE is applied. The most obvious way to tell, however, is just to take a look at your path, which will have gained a new handle by each node (the small round circles in this image). Drag any of those handles to set the fillet radius for the corner. As you do so, the single circular handle will be replaced by two triangular handles, allowing further tweaks to the radius to be made from either side of the underlying node. Dragging a few of these handles makes it very easy to turn our sharp, spiky shape into a mixture of spikes and curves.
Pour commencer, utilisons cette fonctionnalité sur un simple chemin dessiné à l'aide de l'outil Bézier. Voici à quoi ressemble ma forme semi-aléatoire avec l'outil Nœud sélectionné (F2).
L'outil Nœud étant toujours sélectionné, nous pouvons ajouter la fonction « Ajouter un effet de chemin pour les coins » (en anglais, Corners LPE) en cliquant simplement sur un bouton de la barre de contrôle de l'outil (en rouge sur cette image). Notez que le fait de cliquer une seconde fois sur ce bouton supprime le LPE, ce qui entraîne la perte de toutes les modifications que vous avez apportées, même si Edition > Annuler (Ctrl-Z) devrait vous sauver si vous cliquez sur ce bouton par erreur.
Notez que le bouton n'apparaît pas comme une bascule visible : il ne change pas d'état lorsque le LPE est appliqué. La façon la plus évidente de le savoir, cependant, est de jeter un coup d'œil à votre chemin, qui aura gagné une nouvelle poignée à chaque nœud (les petits cercles ronds dans cette image).
Faites glisser l'une de ces poignées pour définir le rayon du congé de l'angle. Ce faisant, la poignée circulaire unique sera remplacée par deux poignées triangulaires, ce qui permettra de modifier le rayon de part et d'autre du nœud sous-jacent. En faisant glisser quelques-unes de ces poignées, il est très facile de transformer notre forme pointue en un mélange de pointes et de courbes.
Holding Control while clicking on any of these handles will cycle the corresponding node through the various types of corner that the LPE offers: fillet, inverse fillet, chamfer and inverse chamfer. The latter two appear identical at this point, just cutting off the corner with a straight line, but we’ll do something more interesting with them in a moment. For now, here’s what the same corner looks like in each mode. At this point it’s worth noting a small bug when using anything other than a normal corner or fillet. If you copy and paste, or duplicate your shape, the LPE sometimes loses track of the type of corner you had selected, so inverse fillets, or either type of chamfer, are converted to normal fillets in the new object. The behaviour is a little erratic so this is just something to keep an eye out for, though you may get lucky and never be affected by it.
Maintenir la touche Ctrl enfoncée tout en cliquant sur l'une de ces poignées permet de faire défiler le nœud correspondant à travers les différents types d'angles proposés par le LPE : congé, congé inversé, chanfrein et chanfrein inversé. Les deux derniers semblent identiques à ce stade, puisqu'ils se contentent de couper l'angle avec une ligne droite, mais nous allons les utiliser de manière plus intéressante dans un instant. Pour le moment, voici à quoi ressemble le même coin dans chaque mode.
À ce stade, il convient de noter un petit problème lorsque l'on utilise autre chose qu'un coin ou un congé normal. Si vous copiez et collez ou dupliquez votre forme, le LPE perd parfois la trace du type d'angle que vous aviez sélectionné, de sorte que les congés inversés ou les chanfreins sont convertis en congés normaux dans le nouvel objet. Le comportement est un peu erratique, c'est donc quelque chose qu'il faut surveiller, bien que vous puissiez avoir de la chance et ne jamais être affecté par ce phénomène.
For setting the position of the corner handles there’s a useful trick that can save a lot of time with complex paths. If you have any nodes selected, their handles will also be modified to match the same relative position of the one you’ve dragged (whether the drag handle is on a selected node or not). This makes for a quick way to set all corner handles to the same relative position by pressing Ctrl-A to select all the nodes before dragging. Unfortunately, Ctrl-Clicking to set the corner type still only works on the clicked handle, regardless of any selected nodes. It is possible to set the type for all nodes, or all selected nodes, at once via the main LPE controls. See part 121 of this series (FCM #181) for more details about the controls and parameters available via the LPE dialog. Shift-Clicking on a handle opens a small dialog that allows you to set various parameters for that specific corner: This is an alternative way to set the corner type, or to accurately position the handle (labelled as ‘Knot distance’ in the dialog), but it also offers one other field to set the ‘Chamfer subdivisions’. Increasing this beyond 1 reveals the difference between a chamfer and an inverse chamfer. This image shows each type of corner, with 1, 2 and 3 subdivisions.
Pour définir la position des poignées d'angle, il existe une astuce utile qui peut faire gagner beaucoup de temps avec des chemins complexes. Si des nœuds sont sélectionnés, leurs poignées seront également modifiées pour correspondre à la même position relative que celle du nœud que vous avez déplacé (que la poignée de déplacement soit sur un nœud sélectionné ou non). Cela permet de régler rapidement toutes les poignées d'angle à la même position relative en appuyant sur Ctrl-A pour sélectionner tous les nœuds avant de les faire glisser. Malheureusement, Ctrl-Clic pour définir le type de coin ne fonctionne que sur la poignée cliquée, quels que soient les nœuds sélectionnés. Il est possible de définir le type pour tous les nœuds, ou tous les nœuds sélectionnés, en une seule fois via les commandes principales des LPE. Voir la partie 121 de cette série (FCM n° 181) pour plus de détails sur les contrôles et les paramètres disponibles dans la boîte de dialogue des LPE.
Un Maj-Clic sur une poignée ouvre une petite boîte de dialogue qui vous permet de régler divers paramètres pour ce coin spécifique :
Il s'agit d'une autre façon de définir le type de coin ou de positionner précisément la poignée (étiquetée comme « Distance du nœud » dans la boîte de dialogue), mais elle offre également un autre champ pour définir les « Sous-divisions du chanfrein ». En augmentant ce champ au-delà de 1, vous pouvez faire la différence entre un chanfrein et un chanfrein inversé. Cette image montre chaque type de coin, avec 1, 2 et 3 sous-divisions.
So far we’ve looked at using this feature on paths, but it also works on 2D shapes. Squares, rectangles, and the shapes created with the Star/Polygon tool, seem like obvious candidates, due to their sharp corners, but you might be surprised to find that this feature can also be useful on circles and spirals. This image shows a spiral, rectangle, star and circle, with the corners LPE applied and edited on-canvas to give you an idea of the sort of effects you can now easily achieve. As well as the on-canvas editing of corners, Inkscape 1.3 also introduced some on-canvas handles for editing blurs. You may already be aware that blurs in Inkscape are implemented using SVG’s Gaussian Blur filter primitive and can, of course, be added via the Filter Editor dialog. This is a rather tricky part of the UI for beginners (and many experts) to understand, but because blurring an object is a pretty common requirement, Inkscape has always offered a shortcut in the form of the slider at the bottom of the Fill & Stroke dialog.
Jusqu'ici, nous avons étudié l'utilisation de cette fonction sur les chemins, mais elle fonctionne également sur les formes en 2D. Les carrés, les rectangles et les formes créées avec l'outil Étoile/Polygone semblent être des candidats évidents, en raison de leurs angles aigus, mais vous serez peut-être surpris de constater que cette fonction peut également être utile pour les cercles et les spirales. Cette image montre une spirale, un rectangle, une étoile et un cercle, avec les Corners LPE appliqués et édités sur le canevas pour vous donner une idée du type d'effets que vous pouvez désormais facilement obtenir.
En plus de l'édition des coins dans le canevas, Inkscape 1.3 a également introduit des poignées dans le canevas pour l'édition des flous. Vous savez peut-être déjà que les flous dans Inkscape sont implémentés en utilisant la primitive de filtre flou gaussien de SVG et peuvent, bien sûr, être ajoutés via la boîte de dialogue de l'éditeur de filtres. C'est une partie de l'interface utilisateur assez difficile à comprendre pour les débutants (et pour de nombreux experts), mais comme le flou d'un objet est un besoin assez courant, Inkscape a toujours offert un raccourci sous la forme d'un curseur au bas de la boîte de dialogue Fond et contour.
The slider in this dialog is fine for most cases where you simply want the object to be blurred in all directions. But the UI in the Filter Editor actually splits the blur into separate controls for the amount of blur in the horizontal and vertical directions. Usually the little ‘chain’ button next to the controls links both sliders so that the values remain identical, giving the same effect as the slider in the Fill & Stroke dialog. But toggle that button and you can set each slider separately – ideal for ‘motion blur’ effects which only occur in one direction. The new on-canvas UI provides the best of both options: separate controls for the horizontal and vertical blur, but with the ability to easily set both to the same value. The only tricky bit is getting the controls to appear in the first place!
Le curseur de cette boîte de dialogue convient à la plupart des cas où vous souhaitez simplement que l'objet soit flou dans toutes les directions. Mais l'interface utilisateur de l'éditeur de filtres sépare le flou en deux commandes distinctes pour la quantité de flou dans les directions horizontale et verticale. Habituellement, le petit bouton « chaîne » situé à côté des commandes relie les deux curseurs de sorte que les valeurs restent identiques, ce qui donne le même effet que le curseur de la boîte de dialogue Fond et contour. Mais si vous activez ce bouton, vous pouvez régler chaque curseur séparément, ce qui est idéal pour les effets de « flou de mouvement » qui ne se produisent que dans une seule direction.
La nouvelle interface utilisateur sur le canevas offre le meilleur des deux options : des commandes distinctes pour le flou horizontal et le flou vertical, mais avec la possibilité de régler facilement les deux sur la même valeur. La seule difficulté consiste à faire apparaître les commandes !
This feature appears only when the Node tool (F2) is selected. But unlike the Corners LPE, there’s no button in the toolbar to make the handles appear. Instead they are only visible if the object you’re editing already has the blur effect applied. This does make the handles a little redundant, in my view, as you’ll have already had to interact with the Fill & Stroke slider, the Filter Editor, or one of the predefined blur filters, in order for the on-canvas controls to appear. They’re possibly useful for fine-tuning the blur in the context of the rest of your drawing, but it would be nice if there was a toolbar button to add and remove a simple blur filter in the same way as the Corners LPE can be toggled on and off. Your first step, therefore, is probably to select your object and open the Fill & Stroke dialog. There are various ways to do this, from the Object menu or keyboard shortcut (Ctrl-Shift-F), through to my preferred method, which is just to click on the Fill or Stroke color swatches at the bottom left of the window, below the palette. Or you may be the sort of person who always has it open in a sidebar and just needs to make sure the right tab is active. Whichever approach you take, you then need to nudge the Blur slider up a little. I recommend just a single click on the ‘+’ button at the right,: that’s enough to add the effect, but not so much that it has a significant effect on Inkscape’s redraw speed.
Cette fonction n'apparaît que lorsque l'outil Nœud (F2) est sélectionné. Mais contrairement à l'effet Corners LPE, il n'y a pas de bouton dans la barre d'outils pour faire apparaître les poignées. Au lieu de cela, elles ne sont visibles que si l'objet que vous éditez a déjà l'effet de flou appliqué. Cela rend les poignées un peu redondantes, à mon avis, car vous aurez déjà dû interagir avec le curseur de Fond et contour, l'Éditeur de filtres ou l'un des filtres de flou prédéfinis, pour que les contrôles apparaissent sur le canevas. Elles sont peut-être utiles pour affiner le flou dans le contexte du reste de votre dessin, mais il serait bon de disposer d'un bouton dans la barre d'outils pour ajouter et supprimer un simple filtre de flou, de la même manière que l'on peut activer et désactiver le Corners LPE.
La première étape consiste donc probablement à sélectionner votre objet et à ouvrir la boîte de dialogue Fond et contour. Il existe plusieurs façons de procéder, depuis le menu Objet ou le raccourci clavier (Ctrl-Maj-F), jusqu'à ma méthode préférée, qui consiste à cliquer sur les échantillons de couleur de fond ou de contour en bas à gauche de la fenêtre, en dessous de la palette. Vous pouvez aussi être le genre de personne qui a toujours le logiciel ouvert dans une barre latérale et qui doit simplement s'assurer que le bon onglet est actif. Quelle que soit votre approche, vous devez ensuite augmenter légèrement le curseur de flou. Je recommande de ne cliquer qu'une seule fois sur le bouton « + » à droite : c'est suffisant pour ajouter l'effet, mais pas au point d'avoir un effet significatif sur la vitesse de redessin d'Inkscape.
Now switch to the Node tool, if it’s not already selected, and you should find that the object has an additional pair of circular handles, just outside the bounding box. In this screenshot, I’ve put my object over a black background to make the white handles stand out a little more: The handles will always be perpendicular to each other, with one at the top and the other at the right for newly created objects. If you’ve rotated the object, however, they may not appear in this orientation. The handles give an indication of the direction that the blur will take (if you don’t have a uniform blur in all directions), so can act as a flag that you might not be blurring in the direction you want to! A quick tip in that case is to remove the blur from the object itself (set it to zero in the Fill & Stroke dialog), then group the rotated object – it’s fine for it to be in a group of its own, with nothing else in it. If you add a blur to the group, you’ll now find that the blur is back to the default orientation, while your object remains rotated. Another tip, if you do need to work with rotated blurs, is to remember that Inkscape can now rotate the canvas during editing. See part 98 of this series in FCM #158 for details.
Passez maintenant à l'outil Nœud, s'il n'est pas déjà sélectionné, et vous devriez constater que l'objet possède une paire supplémentaire de poignées circulaires, juste à l'extérieur de la boîte de délimitation. Dans cette capture d'écran, j'ai placé mon objet sur un fond noir pour faire ressortir davantage les poignées blanches :
Les poignées seront toujours perpendiculaires l'une à l'autre, l'une en haut et l'autre à droite pour les objets nouvellement créés. Toutefois, si vous avez fait pivoter l'objet, il se peut qu'elles n'apparaissent pas dans cette orientation. Les poignées donnent une indication de la direction que prendra le flou (si vous n'avez pas un flou uniforme dans toutes les directions), et peuvent donc servir d'indicateur que vous ne floutez peut-être pas dans la direction souhaitée ! Dans ce cas, une astuce rapide consiste à supprimer le flou de l'objet lui-même (en le réglant sur zéro dans la boîte de dialogue Fond et contour), puis à grouper l'objet pivoté - il n'y a pas de problème à ce qu'il se trouve dans un groupe à part, sans rien d'autre. Si vous ajoutez un flou au groupe, vous constaterez que le flou a retrouvé son orientation par défaut, tandis que votre objet reste pivoté. Un autre conseil, si vous avez besoin de travailler avec des flous pivotés, est de vous rappeler qu'Inkscape peut maintenant faire pivoter le canevas pendant l'édition. Voir la partie 98 de cette série dans le FCM n° 158 pour plus de détails.
With the handles visible, it’s rather obvious how you can adjust the blur on-canvas. Dragging either handle will adjust the blur in that direction. Hold the Control key at the same time to adjust both handles to the same value – you’ll usually want to do that unless you specifically require an asymmetric or motion blur effect. You can also hold both Shift and Control to adjust the handles proportionally. That is, if the handles have different values then dragging one will cause the other to move by an amount that is proportional to the difference between them. In other words, use this if you have an asymmetric blur and want to preserve the overall direction while adjusting its strength. There is a big caveat to this feature, however: if the handle has a value of 0 when you start dragging then Inkscape’s maths can sometimes go awry, sending the other handle zooming off towards infinity and blurring the object so much that it might even disappear from view, replaced by a slight smudge on the canvas. The solution is to nudge the handle above zero first with no modifiers held before trying to drag it proportionally with Ctrl-Shift.
Lorsque les poignées sont visibles, la façon dont vous pouvez ajuster le flou sur le canevas est assez évidente. Si vous faites glisser l'une des poignées, le flou sera ajusté dans cette direction. Maintenez la touche Contrôle enfoncée en même temps pour régler les deux poignées sur la même valeur - vous voudrez généralement procéder ainsi, à moins que vous ne souhaitiez obtenir un effet de flou asymétrique ou de flou de mouvement.
Vous pouvez également maintenir les touches Maj et Ctrl enfoncées pour ajuster les poignées de manière proportionnelle. Autrement dit, si les poignées ont des valeurs différentes, le fait de faire glisser l'une d'entre elles entraînera le déplacement de l'autre d'une valeur proportionnelle à la différence entre elles. En d'autres termes, utilisez cette fonction si vous avez un flou asymétrique et que vous souhaitez préserver la direction générale tout en ajustant sa force. Il y a cependant un gros bémol à cette fonctionnalité : si la poignée a une valeur de 0 lorsque vous commencez à la faire glisser, les mathématiques d'Inkscape peuvent parfois se tromper, envoyant l'autre poignée zoomer vers l'infini et rendant l'objet tellement flou qu'il peut même disparaître de la vue, remplacé par une légère tache sur le canevas. La solution consiste à faire glisser la poignée au-dessus de zéro, sans modificateur, avant d'essayer de la faire glisser proportionnellement avec Ctrl-Maj.
These new additions to on-canvas editing definitely improve the usability of Inkscape, especially in the case of the Corners LPE. One concern, however, is that Inkscape is stacking up ever more handles on the canvas, leading to potential confusion about what feature any given handle corresponds to. Just take a look at this image of my random shape from earlier, once I’ve added a pattern fill, changed the type of some of the nodes, and added a little blur. That’s too many handles for me to make sense of – and I know what each of them are for! Could we end up in a situation where each of these additions, intended to make the program more user-friendly, actually combine to scare new users away from the complexity they see on the canvas?
Ces nouveaux ajouts à l'édition sur le canevas améliorent définitivement la convivialité d'Inkscape, en particulier dans le cas du Corners LPE. Un problème, cependant, est qu'Inkscape empile de plus en plus de poignées sur le canevas, ce qui peut entraîner une certaine confusion quant à la fonction à laquelle correspond une poignée donnée. Il suffit de regarder cette image de ma forme aléatoire de tout à l'heure, une fois que j'ai ajouté un motif de remplissage, changé le type de certains nœuds et ajouté un peu de flou. Il y a trop de poignées pour que je puisse m'y retrouver - et je sais à quoi chacune d'entre elles sert ! Pourrions-nous nous retrouver dans une situation où chacun de ces ajouts, destinés à rendre le programme plus convivial, se combinent en fait pour effrayer les nouveaux utilisateurs face à la complexité qu'ils voient sur le canevas ?