Share via

Syntaxe des commandes de déplacement et de dessin

  • Article

Découvrez les commandes de déplacement et de dessin (ou « mini langage ») que vous pouvez utiliser pour spécifier des géométries de chemin sous forme d’une valeur d’attribut XAML. Les commandes de déplacement et de dessin sont utilisées par de nombreux outils de conception et de création de graphiques capables de générer un graphique ou une forme de type vectoriel comme format de sérialisation et d’échange.

Propriétés qui utilisent des chaînes de commande de déplacement et de dessin

La syntaxe des commandes de déplacement et de dessin est prise en charge par un convertisseur de type interne pour XAML qui analyse les commandes et produit une représentation graphique au moment de l’exécution. Cette représentation consiste essentiellement en un ensemble fini de vecteurs prêts pour la présentation. Les vecteurs ne représentent pas en eux-mêmes la totalité des détails de la présentation, et vous devez définir d’autres valeurs sur les éléments. Pour un objet Path, vous avez aussi besoin de valeurs pour Fill, Stroke et d’autres propriétés. Ensuite, cet objet Path doit être connecté d’une façon ou d’une autre à l’arborescence visuelle. Pour un objet PathIcon, définissez la propriété Foreground.

Il existe deux propriétés dans le Windows Runtime qui peuvent utiliser une chaîne représentant des commandes de déplacement et de dessin : Path.Data et PathIcon.Data. Si vous définissez l’une de ces propriétés en spécifiant des commandes de déplacement et de dessin, vous définissez généralement cette propriété comme une valeur d’attribut XAML avec d’autres attributs requis de cet élément. Sans entrer dans les détails, voici à quoi cela ressemble :

<Path x:Name="Arrow" Fill="White" Height="11" Width="9.67"
  Data="M4.12,0 L9.67,5.47 L4.12,10.94 L0,10.88 L5.56,5.47 L0,0.06" />

Comparaison entre l’utilisation des commandes de déplacement et de dessin et l’utilisation de PathGeometry

Pour Windows Runtime XAML, les commandes de déplacement et de dessin produisent un PathGeometry avec un seul objet PathFigure avec une valeur de propriété Figures. Chaque commande de dessin produit une classe dérivée de PathSegment dans la collection Segments de ce PathFigure unique, la commande de déplacement modifie la propriété StartPoint et l’existence d’une commande de fermeture affecte à IsClosed la valeur true. Vous pouvez naviguer dans cette structure en tant que modèle d’objet si vous examinez les valeurs Data au moment de l’exécution.

Syntaxe de base

La syntaxe des commandes de déplacement et de dessin peut se résumer comme suit :

  1. Commencez par une règle de remplissage facultative. En général, spécifiez-la si vous ne voulez pas la valeur par défaut EvenOdd. (EvenOdd est abordé plus en détail plus loin.)
  2. Spécifiez exactement une commande de déplacement.
  3. Spécifiez une ou plusieurs commandes de dessin.
  4. Spécifiez une commande de fermeture. Vous pouvez omettre une commande de fermeture, mais votre figure serait alors ouverte (ce qui est rare).

Les règles générales de cette syntaxe sont les suivantes :

  • Chaque commande est représentée par exactement une lettre.
  • Cette lettre peut être majuscule ou minuscule. La casse a de l’importance, comme vous allez le voir.
  • Chaque commande, sauf la commande de fermeture, est généralement suivie d’un ou plusieurs nombres.
  • Si vous avez plusieurs nombres par commande, séparez-les par une virgule ou un espace.

[fillRule]moveCommanddrawCommand[drawCommand*][closeCommand]

De nombreuses commandes de dessin utilisent des points qui nécessitent la définition d’une valeur x,y. Chaque fois que vous voyez un espace réservé *points , vous pouvez supposer que vous donnez deux valeurs décimales pour la valeur x,y d’un point.

L’espace blanc peut souvent être omis lorsque le résultat n’est pas ambigu. Vous pouvez en effet omettre les espaces blancs si vous utilisez des virgules comme séparateurs pour tous vos ensembles de nombres (points et taille). Par exemple, cette utilisation est légale :F1M0,58L2,56L6,60L13,51L15,53L6,64z Il est toutefois plus courant d’inclure un espace blanc entre les commandes pour plus de clarté.

N’utilisez pas la virgule comme séparateur décimal pour les nombres décimaux ; la chaîne de commande est interprétée par XAML et ne tient pas compte des conventions de mise en forme des nombres spécifiques à la culture qui diffèrent de celles utilisées dans les paramètres régionaux en-us.

Spécificités de la syntaxe

Règle de remplissage

Il existe deux valeurs possibles pour la règle de remplissage facultative : F0 ou F1. (F est toujours en majuscule.) F0 est la valeur par défaut qui produit le comportement de remplissage EvenOdd (donc, vous ne la spécifiez généralement pas). Utilisez F1 pour obtenir le comportement de remplissage Nonzero. Ces valeurs de remplissage sont alignées avec les valeurs de l’énumération FillRule.

Commande Déplacer

Spécifie le point de départ d’une nouvelle figure.

Syntaxe
M startPoint
- ou -
mstartPoint
Terme Description
startPoint Point
Le point de départ d’une nouvelle figure.

Un M majuscule indique que startPoint est une coordonnée absolue ; un m minuscule indique que startPoint est décalé par rapport au point précédent ou (0,0) s’il n’y avait pas de point précédent.

Remarque Vous pouvez spécifier plusieurs points après la commande de déplacement. Une ligne est tracée jusqu’à ces points comme si vous aviez spécifié une commande de ligne. Toutefois, ce style n’est pas recommandé ; utilisez plutôt une commande de ligne dédiée.

Commandes de dessin

Une commande de dessin peut être constituée de plusieurs commandes de forme : ligne, ligne horizontale, verticale, courbe de Bézier cubique, courbe de Bézier quadratique, courbe de Bézier cubique lisse, courbe de Bézier quadratique lisse et arc elliptique.

Pour toutes les commandes de dessin, la casse a de l’importance. Les lettres majuscules dénotent des coordonnées absolues et les lettres minuscules dénotent des coordonnées relatives à la commande précédente.

Les points de contrôle pour un segment sont relatifs au point de terminaison du segment précédent. Lorsque vous entrez séquentiellement plusieurs commandes du même type, vous pouvez omettre l’entrée de commande en double. Par exemple, L 100,200 300,400 équivaut à L 100,200 L 300,400.

Ligne, commande

Crée une ligne droite entre le point actuel et le point de fin spécifié. l 20 30 et L 20,30 sont des exemples de commandes de ligne valides. Définit l’équivalent d’un objet LineGeometry .

Syntaxe
LTerminaison
- ou -
lTerminaison
Terme Description
endPoint Point
Extrémité de la ligne.

Commande ligne horizontale

Crée une ligne horizontale entre le point actuel et la coordonnée x spécifiée. H 90 est un exemple de commande horizontal line valide.

Syntaxe
H x
- ou -
h x
Terme Description
x Double
La coordonnée x du point de fin de la ligne.

Commande ligne verticale

Crée une ligne verticale entre le point actuel et la coordonnée y spécifiée. v 90 est un exemple de commande vertical line valide.

Syntaxe
V y
- ou -
v y
Terme Description
y Double
La coordonnée y du point de fin de la ligne.

Commande de courbe de Bézier cubique

Crée une courbe de Bézier cubique entre le point actuel et le point de terminaison spécifié à l’aide des deux points de contrôle spécifiés (controlPoint1 et controlPoint2). C 100,200 200,400 300,200 est un exemple de commande curve valide. Définit l’équivalent d’un objet PathGeometry avec un objet BezierSegment .

Syntaxe
C controlPoint1controlPoint2endPoint
- ou -
c controlPoint1controlPoint2endPoint
Terme Description
controlPoint1 Point
Le premier point de contrôle de la courbe, qui détermine la tangente de départ de la courbe.
controlPoint2 Point
Le deuxième point de contrôle de la courbe, qui détermine la tangente de fin de la courbe.
Terminaison Point
Point vers lequel la courbe est dessinée.

Commande de courbe de Bézier quadratique

Crée une courbe de Bézier quadratique entre le point actuel et le point de terminaison spécifié à l’aide du point de contrôle spécifié (controlPoint). q 100,200 300,200 est un exemple de commande de courbe de Bézier quadratique valide. Définit l’équivalent d’un objet PathGeometry avec un objet QuadraticBezierSegment.

Syntaxe
Q controlPoint endPoint
- ou -
q controlPoint endPoint
Terme Description
controlPoint Point
Le point de contrôle de la courbe, qui détermine la tangente de départ et la tangente de fin de la courbe.
Terminaison Point
Point vers lequel la courbe est dessinée.

Commande de courbe de Bézier cubique lisse

Crée une courbe de Bézier cubique entre le point actuel et le point de terminaison spécifié. Le premier point de contrôle est supposé être la réflexion du deuxième point de contrôle de la commande précédente par rapport au point actuel. S’il n’y a pas de commande précédente ou si la commande précédente n’est ni une commande de courbe de Bézier cubique ni une commande de courbe de Bézier cubique lisse, vous pouvez supposer que le premier point de contrôle coïncide avec le point actuel. Le deuxième point de contrôle (point de contrôle pour la fin de la courbe) est spécifié par controlPoint2. Par exemple, S 100,200 200,300 est une commande de courbe de Bézier cubique lisse valide. Cette commande définit l’équivalent d’un PathGeometry avec un BezierSegment à l’endroit d’un segment de courbe précédent.

Syntaxe
ScontrolPoint2endPoint
- ou -
scontrolPoint2 endPoint
Terme Description
controlPoint2 Point
Le point de contrôle de la courbe, qui détermine la tangente de fin de la courbe.
Terminaison Point
Point vers lequel la courbe est dessinée.

Commande de courbe de Bézier quadratique lisse

Crée une courbe de Bézier quadratique entre le point actuel et le point de terminaison spécifié. Le point de contrôle est supposé être la réflexion du point de contrôle de la commande précédente par rapport au point actuel. S’il n’y a pas de commande précédente ou si la commande précédente n’est ni une commande de courbe de Bézier quadratique ni une commande de courbe de Bézier quadratique lisse, le point de contrôle coïncide avec le point actuel. Cette commande définit l’équivalent d’un PathGeometry avec un QuadraticBezierSegment où il y avait un segment de courbe précédent.

Syntaxe
TcontrolPointendPoint
- ou -
tcontrolPointendPoint
Terme Description
controlPoint Point
Le point de contrôle de la courbe, qui détermine la tangente de départ et de fin de la courbe.
Terminaison Point
Point vers lequel la courbe est dessinée.

Commande d’arc elliptique

Crée un arc elliptique entre le point actuel et le point de fin spécifié. Définit l’équivalent d’un objet PathGeometry avec un objet ArcSegment.

Syntaxe
A sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
- ou -
a sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
Terme Description
size Taille
Rayon x et rayon y de l’arc.
rotationAngle Double
La rotation de l’ellipse, en degrés.
isLargeArcFlag Défini sur 1 si l’angle de l’arc doit être de 180 degrés ou plus ; dans le cas contraire, défini sur 0.
sweepDirectionFlag Défini sur 1 si l’arc est dessiné dans une direction d’angle positif ; dans le cas contraire, défini sur 0.
Terminaison Point
Point où l’arc est dessiné.

Commande Fermer

Termine la figure actuelle et crée une ligne qui relie le point actuel au point de départ de la figure. Cette commande crée une jonction de ligne (angle) entre le dernier segment et le premier segment de la figure.

Syntaxe
Z
- ou -
z

Syntaxe de point

Décrit la coordonnée x et la coordonnée y d’un point. Voir aussi Point.

Syntaxe
x,y
- ou -
xy
Terme Description
x Double
Coordonnée X du point.
y Double
Coordonnée Y du point.

Remarques supplémentaires

Plutôt que d’utiliser une valeur numérique standard, vous pouvez opter pour les valeurs spéciales suivantes. Ces valeurs respectent la casse.

  • Infinity : représente PositiveInfinity.
  • -Infinity : représente NegativeInfinity.
  • NaN : représente NaN.

Au lieu d’utiliser des nombres décimaux ou entiers, vous pouvez utiliser la notation scientifique. Par exemple, +1.e17 est une valeur valide.

Outils de conception qui produisent des commandes de déplacement et de dessin

L’outil Stylet et d’autres outils de dessin dans Blend pour Microsoft Visual Studio 2015 produisent généralement un objet Path avec des commandes de déplacement et de dessin.

Il est possible que vous constatiez la présence de données de commandes de déplacement et de dessin dans certaines parties de contrôle définies dans les modèles par défaut XAML Windows Runtime de contrôles. Par exemple, certains contrôles utilisent un PathIcon dont les données sont définies en tant que commandes de déplacement et de dessin.

Des exportateurs ou des plug-ins sont disponibles pour d’autres outils de conception de graphiques vectoriels couramment utilisés pour générer le vecteur au format XAML. Ceux-ci créent généralement des objets Path dans un conteneur de disposition, avec des commandes de déplacement et de dessin pour Path.Data. Plusieurs éléments Path peuvent être présents dans le code XAML, ce qui permet d’appliquer différents types de pinceaux. Plusieurs de ces exportateurs ou plug-ins ont été écrits à l’origine pour le langage XAML dans Windows Presentation Foundation (WPF) ou Silverlight, mais la syntaxe XAML est identique dans le langage XAML Windows Runtime. Vous pouvez généralement utiliser des blocs de code XAML d’un exportateur et les coller directement dans une page XAML Windows Runtime. (Toutefois, si RadialGradientBrush faisait partie du code XAML converti, vous ne pourrez pas l’utiliser étant donné que le langage XAML Windows Runtime ne prend pas en charge ce pinceau.)