Vue d’ensemble du dessin

Microsoft Expression Blend propose des fonctions de dessin vectoriel standard permettant de dessiner des formes, des tracés et des masques comme avec n’importe quel programme de graphiques vectoriels. Pour des dessins et des illustrations plus avancés, pensez à utiliser un autre programme graphique vectoriel, tel que Microsoft Expression Design 2. Expression Design 2 permet même aux utilisateurs d’exporter les dessins au format XAML en vue de leur utilisation dans Expression Blend.

Définition des graphiques vectoriels

Les graphiques vectoriels sont définis géométriquement par des points, des lignes, des courbes et des surfaces et non par l’utilisation de pixels comme dans un bitmap. Les moniteurs des ordinateurs sont aujourd’hui équipés d’écrans haute résolution, d’où la nécessité de s’éloigner des bitmaps qui présentent de grands pixels lorsqu’ils sont affichés à des résolutions élevées. Les bitmaps redimensionnés sont parfois maladroits et se traduisent généralement par des graphiques de mauvaise qualité. Les contours des graphiques vectoriels restent lisses même à une résolution élevée, et demeurent nets lorsqu’ils sont agrandis. Pour cette raison, les graphiques vectoriels se prêtent mieux à la personnalisation de contenu car il n’est pas nécessaire de créer plusieurs images à différentes tailles, par exemple les fichiers d’icônes qui apparaissent dans l’interface utilisateur à diverses tailles. Autres avantages des graphiques vectoriels :

• Mise à l’échelle réelle du contenu   Les graphiques vectoriels intégrés à une disposition souple peuvent être redimensionnés de façon élégante en fonction du contenu. Par exemple, lorsque vous ajoutez du texte à un bouton, le bouton est redimensionné en conséquence tout en restant fidèle au graphique.

• Indépendance de la résolution   La résolution des écrans augmente progressivement et ce n’est qu’un début. Sans la possibilité de mettre à l’échelle l’interface utilisateur d’une application, celle-ci diminue en taille à mesure qu’augmente la résolution ; elle peut même devenir inutilisable lorsque le contenu est si petit à l’écran qu’il en est illisible. Si vous appliquez une transformation par mise à l’échelle ou rotation de ces API, seuls les dessins sont affectés. La transformation n’a pas d’incidence sur les dimensions et les positions des contrôles dans la fenêtre. Vous pouvez redimensionner des dessins mais il est plus compliqué de gérer l’espace occupé par les contrôles dans une fenêtre. Comme Windows Presentation Foundation (WPF) organise tous les contrôles de la fenêtre en tant que dessin unique, au lieu d’isoler chaque contrôle dans sa propre zone, il est plus facile d’appliquer à l’interface utilisateur des transformations par mise à l’échelle ou par rotation comme un tout. Ainsi, comme vous pouvez faire évoluer horizontalement ou verticalement n’importe quelle interface utilisateur WPF, les applications WPF sont très clairement indépendantes de la résolution. Les images restent claires et nettes, et non floues comme pourrait le laisser supposer le redimensionnement simple des bitmaps.

Remarque :

Lors de la définition des propriétés liées à la taille dans les applications WPF (telles que celles créées avec Expression Blend), les pixels se réfèrent aux pixels indépendants du périphérique ou aux unités indépendantes du périphérique, qui sont équivalentes à la taille d’un pixel sur un écran défini avec une résolution de 96 PPP. Chaque unité correspond approximativement à 1/96 de pouce, indépendamment de la taille de l’écran ou de sa résolution.

Dans Expression Blend, un objet vectoriel peut être aussi simple qu’une ligne ou qu’une forme ou aussi complexe qu’un tracé ou un contrôle. Vous pouvez modifier les objets de très nombreuses façons en utilisant les poignées de redimensionnement, le déplacement, la rotation, le retournement ou l’inclinaison, ou bien en utilisant le panneau Propriétés qui permet d’indiquer des valeurs précises de taille, de position et de rotation. En principe, chaque objet que vous dessinez sur la planche graphique est au format vectoriel, sauf pour les éléments que vous avez ajoutés à votre projet et qui n’avaient pas ce format au départ, comme des images et des textures 3D. Certains objets vectoriels dans Expression Blend comprennent :

• des objets de dessin tels qu’une ellipse et un rectangle,

• des objets de tracé tels que des lignes et des courbes,

• du texte,

• des objets 3D,

• des contrôles.

Haut de la page

Outils de dessin

La Boîte à outils contient des outils vectoriels courants pour créer des éléments de forme et de tracé et manipuler des objets. Pour des exemples d’utilisation de ces outils, voir Tracer une forme, Tracer une ligne droite, Tracer une courbe, Dessiner un tracé de forme libre, Modifier la forme d’une courbe et Redéfinir les poignées de contrôle pour un point d’un tracé.

Outil		Utilisation
	Rectangle	Tracer des rectangles et des carrés, que vous pouvez également modifier pour obtenir des coins arrondis.
	Ellipse	Tracer des ellipses et des cercles.
	Ligne	Tracer une ligne droite entre deux points.
	Plume	Dessiner et modifier des tracés lorsque vous définissez chaque nœud. L’outil Plume vous permet d’ajouter, de supprimer et de modifier des nœuds dans le tracé.
	Plume	Dessiner des tracés à main levée.
	Sélection	Sélectionner des formes, des tracés et des objets sur la planche graphique que vous souhaitez modifier. Pour plus d’informations sur l’utilisation de l’outil Sélection, voir Sélectionner des objets ou annuler leur sélection.
	Sélection directe	Sélectionner des nœuds individuels d’un tracé après leur dessin. L’outil Sélection directe vous permet également de sélectionner des objets enfants imbriqués dans un objet parent sur la planche graphique, tel qu’un panneau de disposition. Pour plus d’informations sur l’utilisation de l’outil Sélection directe, voir Sélectionner des objets ou annuler leur sélection.

Haut de la page

Forme ou tracé ?

Les formes telles qu’un rectangle ou une ellipse sont des objets vectoriels. Vous dessinez des formes avec les outils Rectangle ou Ellipse.

Les tracés sont également des objets vectoriels, probablement les objets vectoriels les plus souples dans Expression Blend. Les tracés sont une série de lignes et de courbes connectées. Après avoir dessiné des tracés sur la planche graphique, vous pouvez en changer la forme, les combiner, voire les modifier pour créer n’importe quelle forme vectorielle. Vous pouvez dessiner des polygones, formes fermées constituées de lignes droites et connectées, outre des polylignes, tracés non fermés constitués de lignes droites et connectées. Vous dessinez les tracés à l’aide des outils Plume, Crayon et Ligne. Vous pouvez ensuite utiliser les outils Sélection et Sélection directe pour les modifier. Pour plus d’informations sur la modification des tracés, voir Supprimer une partie d’un tracé, Ajouter ou supprimer un point dans un tracé, Modifier la forme d’une courbe, Redéfinir les poignées de contrôle pour un point d’un tracé et Utilisation des Outils Plume et Sélection directe.

Haut de la page

Conversion de formes en tracés

Les formes ne peuvent pas être modifiées de la même manière que les éléments de tracé sauf si vous convertissez l’élément de forme en un élément de tracé avec la commande Convertir en tracé (dans le menu Objet, choisissez l’option Tracé, puis sélectionnez Convertir en tracé). Pour obtenir un exemple, voir Convertir une forme en tracé.

Remarque :
Vous ne pourrez pas modifier les propriétés spécifiques d’une forme (telles que le rayon de l’angle d’un rectangle) après la conversion d’une forme en un tracé. En outre, si un style a été appliqué à la forme avant la conversion, les propriétés du tracé converti reprennent les valeurs par défaut d’un tracé (pas de pinceau de remplissage et un trait noir).

Haut de la page

Modification du rayon de l’angle

Vous pouvez modifier le rayon de l’angle d’un rectangle en sélectionnant le rectangle et en faisant glisser les poignées correspondantes dans le coin supérieur gauche du rectangle. La poignée de rayon d’angle apparaît lorsque le pointeur de la souris passe au-dessus de l’une des extrémités des lignes pointillées qui sortent du coin supérieur gauche du rectangle.

Si vous maintenez la touche Maj enfoncée tout en faisant glisser l’une des poignées de rayon d’angle, vous pouvez modifier les rayons X et Y individuellement.

Pour obtenir un exemple, voir Arrondir les angles d’un rectangle.

Haut de la page

Combinaison de tracés

La combinaison de tracés (ou de formes) peut donner les résultats suivants :

Vous pouvez combiner plusieurs objets (tracés ou formes) en un objet de tracé. L’objet de tracé résultant remplace le dernier objet qui a été sélectionné avant la combinaison, adoptant les propriétés de cet objet. Souvent, le résultat est un compound path. Pour obtenir un exemple, voir Combiner des formes ou des tracés. Pour plus d’informations sur la modification des tracés, voir Utilisation des Outils Plume et Sélection directe.

Remarque :
Vous ne pourrez pas modifier les propriétés spécifiques d’une forme (telles que le rayon de l’angle d’un rectangle) après une combinaison. En outre, si un style a été appliqué au dernier objet sélectionné avant la conversion, les propriétés du tracé combiné reprennent les valeurs par défaut d’un tracé (pas de pinceau de remplissage et un trait noir).

Haut de la page

Tracés composites

Lorsque vous créez un tracé composite, toutes les parties situées à l’intersection des tracés sont soustraites du résultat ; par ailleurs, le tracé résultant prend les propriétés visuelles du tracé situé tout en bas.

Deux tracés convertis en un tracé composite

Vous devez convertir les formes en tracés avant de les inclure dans un tracé composite (sélectionnez Convertir en tracé sous Tracé dans le menu Objet). Vous pouvez constituer un tracé composite à partir de plusieurs tracés. Le tracé résultant remplace le tracé le plus bas (dans l’ordre de plan) qui a été sélectionné avant la composition, adoptant les propriétés de ce tracé. Vous pouvez dissocier un tracé composite à tout moment après sa création, mais les propriétés d’origine ne seront pas restaurées. Pour obtenir un exemple, voir Créer ou annuler un tracé composite.

Haut de la page

Tracés de détourage

Un tracé de détourage est un tracé ou une forme appliqué à un autre objet et masquant les parties de l’objet masqué qui sont hors du tracé de détourage.

Objet Image auquel un tracé de détourage est appliqué

Dans Expression Blend 2, vous pouvez maintenant modifier les tracés de détourage sur la planche graphique après les avoir créés et vous pouvez libérer un tracé de détourage sans perdre l’objet de tracé d’origine. Pour obtenir un exemple, voir Appliquer, modifier ou supprimer un tracé de détourage. Vous pouvez également animer les différents sommets des tracés de détourage, par exemple pour exposer progressivement l’objet masqué. Pour obtenir un exemple, voir Animer les points sur un tracé ou un tracé de détourage.

Haut de la page

Masques d’opacité

Un masque d’opacité peut être un tracé ou une forme appliqué(e) à un autre objet. Les parties transparentes du tracé représentent des zones où l’objet masqué est estompé, alors que les parties opaques du masque indiquent l’emplacement où l’objet masqué est autorisé à transparaître. Tout objet peut avoir un masque d’opacité défini pour lui seul dans la section Apparence du panneau Propriétés.

Un masque d’opacité peut également être un simple pinceau dégradé qui affiche ou masque des parties d’un objet en fonction de la transparence. Dans l’exemple suivant, aucun masque d’opacité n’est appliqué sur l’image à gauche, et l’image à droite pourrait être produite de l’une des deux manières suivantes :

• La propriété OpacityMask de l’objet Image peut être réglée à un pinceau de dégradé radial avec l’alpha du point de dégradé droit réglé à une valeur de 0.

• Un objet Rectangle pourrait être créé devant l’objet Image, et la propriété OpacityMask du Rectangle pourrait être réglée à un pinceau de dégradé radial avec l’alpha du point de dégradé gauche réglé à une valeur de 0.

Image sans masque (à gauche) comparée à une image à laquelle un masque d’opacité est appliqué (à droite)

Pour obtenir un exemple, voir Créer un masque d’opacité.

Haut de la page