Partager via


Syntaxe des commandes de déplacement et de dessin

Découvrez les commandes de déplacement et de dessin (mini-langage) que vous pouvez utiliser pour spécifier des géométries de chemin d’accès en tant que valeur d’attribut XAML. Les commandes de déplacement et de dessin sont utilisées par de nombreux outils de conception et graphiques qui peuvent générer un graphique vectoriel ou une forme, 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 de commande move et draw 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 est essentiellement un ensemble fini de vecteurs prêts à être présentés. Les vecteurs eux-mêmes ne terminent pas les détails de la présentation ; Vous devez toujours définir d’autres valeurs sur les éléments. Pour un objet Path , vous avez également besoin de valeurs pour Fill, Stroke et d’autres propriétés, puis ce Chemin doit être connecté à l’arborescence visuelle. Pour un objet PathIcon , définissez la propriété Foreground .

Il existe deux propriétés dans Windows Runtime qui peuvent utiliser une chaîne représentant les commandes move et draw : 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 la définissez généralement en tant que valeur d’attribut XAML, ainsi que d’autres attributs requis de cet élément. Sans entrer dans les spécificités, voici ce qui ressemble à ceci :

<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" />

Utilisation de commandes de déplacement et de dessin par rapport à l’utilisation d’un PathGeometry

Pour le code XAML Windows Runtime, 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 PathSegment dans la collection Segments du PathFigure unique, la commande de déplacement modifie le StartPoint, et l’existence d’une commande de fermeture définit IsClosed sur vrai. Vous pouvez naviguer dans cette structure en tant que modèle objet si vous examinez les valeurs de données au moment de l’exécution.

Syntaxe de base

La syntaxe des commandes de déplacement et de dessin peut être résumée comme suit :

  1. Commencez par une règle de remplissage facultative. En règle générale, vous ne spécifiez ce paramètre que si vous ne souhaitez pas utiliser la valeur Par défaut EvenOdd . (Plus d’informations sur EvenOdd plus tard.)
  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 cela laisserait votre figure ouverte (c’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. Le cas est important, comme nous allons le décrire.
  • Chaque commande à l’exception de la commande close est généralement suivie d’un ou plusieurs nombres.
  • Si plus d'un nombre est utilisé pour une commande, séparez-les par une virgule ou un espace.

[fillRule]moveCommanddrawCommand[drawCommand*][closeCommand]

La plupart des commandes de dessin utilisent des points, où vous fournissez 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. En fait, vous pouvez omettre tous les espaces blancs si vous utilisez des virgules comme séparateur pour tous les jeux de nombres (points et taille). Par exemple, cette utilisation est légale : F1M0,58L2,56L6,60L13,51L15,53L6,64z. Mais il est plus courant d’inclure des espaces blancs entre les commandes pour plus de clarté.

N’utilisez pas de virgules comme séparateur pour les nombres décimaux ; la chaîne de commande est interprétée par XAML et ne prend pas en compte les conventions de mise en forme de nombres propres à une culture qui diffèrent de celles utilisées dans les conventions du format régional 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. (Le F est toujours majuscule.) F0 est la valeur par défaut ; il produit le comportement de remplissage EvenOdd , de sorte que vous ne le spécifiez généralement pas. Utilisez F1 pour obtenir le comportement de remplissage différent de zéro . Ces valeurs de remplissage correspondent aux valeurs de l’énumération FillRule .

Commande Déplacer

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

Syntaxe
M startPoint
- ou -
m startPoint
Terme Descriptif
startPoint Point
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 un décalage vers le point précédent, ou (0,0) s’il n’y avait pas de point précédent.

Note Il est légal de spécifier plusieurs points après la commande move. Une ligne est dessinée à ces points comme si vous avez spécifié la commande de ligne. Toutefois, ce n’est pas un style recommandé ; utilisez plutôt la commande de ligne dédiée.

Commandes De dessin

Une commande de dessin peut se composer de plusieurs commandes de forme : ligne, ligne horizontale, courbe verticale, courbe de Bezier cubique, courbe quadratique Bezier lisse, courbe lisse de Bezier quadratique et arc elliptique.

Pour toutes les commandes de dessin, la casse est importante. Les lettres majuscules indiquent les coordonnées absolues et les lettres minuscules indiquent les coordonnées par rapport à la commande précédente.

Les points de contrôle d’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.

Commande de ligne

Crée une ligne droite entre le point actuel et le point de terminaison 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
L point de terminaison
- ou -
l point de terminaison
Terme Descriptif
point de terminaison Point
Point de fin de la ligne.

Commande de 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 de ligne horizontale valide.

Syntaxe
H x
-ou-
h x
Terme Descriptif
x Double
Coordonnée x du point de terminaison de la ligne.

Commande de 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 de ligne verticale valide.

Syntaxe
V y
-ou-
v y
Terme Descriptif
y Double
Coordonnée y du point de terminaison de la ligne.

Commande 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 de courbe valide. Définit l’équivalent d’un objet PathGeometry avec un objet BezierSegment .

Syntaxe
C controlPoint1controlPoint2endPoint
-ou-
c controlPoint1controlPoint2endPoint
Terme Descriptif
controlPoint1 Point
Premier point de contrôle de la courbe, qui détermine la tangente de départ de la courbe.
controlPoint2 Point
Deuxième point de contrôle de la courbe, qui détermine la tangente de fin de la courbe.
point de terminaison Point
Point vers lequel la courbe est dessinée.

Commande 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 valide de courbe de Bézier quadratique. Définit l’équivalent d’un PathGeometry avec un QuadraticBezierSegment.

Syntaxe
Q controlPoint endPoint
-ou-
q controlPoint endPoint
Terme Descriptif
controlPoint Point
Point de contrôle de la courbe, qui détermine les tangentes de début et de fin de la courbe.
point de 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’était pas une commande de courbe de Bézier cube ou une commande lisse de courbe de Bézier cube, supposons que le premier point de contrôle coïncide avec le point actuel. Le deuxième point de contrôle ( le point de contrôle de la fin de la courbe) est spécifié par controlPoint2. Par exemple, S 100,200 200,300 il s’agit d’une commande de courbe de Bézier lisse valide. Cette commande définit l’équivalent d’un PathGeometry avec un BezierSegment où il y avait un segment de courbe précédent.

Syntaxe
S controlPoint2endPoint
-ou-
s point de contrôle 2 point final
Terme Descriptif
controlPoint2 Point
Point de contrôle de la courbe, qui détermine la tangente de fin de la courbe.
point de 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’était pas une commande de courbe quadratique de Bézier ou une commande de courbe 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
T controlPointendPoint
-ou-
t controlPointendPoint
Terme Descriptif
controlPoint Point
Point de contrôle de la courbe, qui détermine le début et la tangente de la courbe.
point de 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 terminaison spécifié. Définit l’équivalent d’un PathGeometry avec un ArcSegment.

Syntaxe
A sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
- ou -
a sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
Terme Descriptif
taille Taille
Rayon x et rayon y de l’arc.
rotationAngle Double
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 supérieur ; sinon, affectez la valeur 0.
sweepDirectionFlag Défini sur 1 si l’arc est dessiné dans une direction d’angle positif ; sinon, affectez la valeur 0.
point de terminaison Point
Point vers lequel l’arc est dessiné.

Fermer la commande

Termine la figure actuelle et crée une ligne qui connecte le point actuel au point de départ de la figure. Cette commande crée une jointure 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 Descriptif
x Double
Coordonnée x du point.
y Double
Coordonnée y du point.

Notes supplémentaires

Au lieu d’une valeur numérique standard, vous pouvez également utiliser les valeurs spéciales suivantes. Ces valeurs sont sensibles à la casse.

  • Infini : représente positiveInfinity.
  • -Infini : représente negativeInfinity.
  • NaN : représente NaN.

Au lieu d’utiliser des décimales ou des 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’utilisation de l’outil Plume et d’autres outils de dessin dans Blend pour Microsoft Visual Studio 2015 produit généralement un objet Path, avec des commandes de déplacement et de dessin.

Vous pouvez voir les données de commande de mouvement et de dessin existantes dans certaines parties des contrôles, telles que définies dans les modèles par défaut XAML pour Windows Runtime qui définissent les contrôles. Par exemple, certains contrôles utilisent un PathIcon qui a les données définies comme des commandes de déplacement et de dessin.

Il existe des exportateurs ou des plug-ins disponibles pour d’autres outils de conception de graphiques vectoriels couramment utilisés qui peuvent générer le vecteur sous forme XAML. Ces objets 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. Il peut y avoir plusieurs éléments Path dans le code XAML afin que différents pinceaux puissent être appliqués. La plupart de ces exportateurs ou plug-ins ont été écrits à l’origine pour XAML ou Silverlight (Windows Presentation Foundation), mais la syntaxe du chemin XAML est identique à Windows Runtime XAML. En règle générale, vous pouvez utiliser des blocs de CODE XAML à partir d’un exportateur et les coller directement dans une page XAML Windows Runtime. (Toutefois, vous ne pourrez pas utiliser un RadialGradientBrush, si cela faisait partie du code XAML converti, car le code XAML Windows Runtime ne prend pas en charge ce pinceau.)