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 draw produit une classe dérivée PathSegment dans cette collection Segments pathFigure unique, la commande move modifie le StartPoint et l’existence d’un ensemble de commandes close définit IsClosed sur true. 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 :
- 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 . (En savoir plus sur EvenOdd ultérieurement.)
- Spécifiez exactement une commande de déplacement.
- Spécifiez une ou plusieurs commandes de dessin.
- Spécifiez une commande close. 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 plusieurs nombres pour une commande sont séparés par une virgule ou un espace.
[fillRule] moveCommand drawCommand [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 virgule 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 de nombre propres à 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. (Le F est toujours majuscule.) F0 est la valeur par défaut ; elle 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 Move
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 un décalage vers le point précédent, ou (0,0) s’il n’y avait pas de point précédent.
Notez qu’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 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 |
|---|
Lextrémité - ou - lextrémité |
| Terme | Description |
|---|---|
| endPoint | Point Extrémité 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 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 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 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 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 controlPoint1 controlPoint2 endPoint -ou- c controlPoint1 controlPoint2 endPoint |
| 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. |
| endPoint | 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 | 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. |
| endPoint | Point Point vers lequel la courbe est dessinée. |
Commande 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 |
|---|
ScontrolPoint2 extrémité -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. |
| endPoint | Point Point vers lequel la courbe est dessinée. |
Commande 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 |
|---|
TcontrolPoint extrémité -ou- tcontrolPoint extrémité |
| 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. |
| endPoint | Point Point vers lequel la courbe est dessinée. |
Commande arc Elliptical
Crée un arc elliptique entre le point actuel et le point de fin spécifié. Définit l’équivalent d’un PathGeometry avec un ArcSegment.
| Syntaxe |
|---|
A taille rotationAngle isLargeArcFlag sweepDirectionFlag endPoint -ou- a taille rotationAngle isLargeArcFlag sweepDirectionFlag endPoint |
| 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. |
| endPoint | 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.
- 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 Stylet 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 déplacement et de dessin existantes dans certaines des parties de contrôle définies dans les modèles XAML Windows Runtime pour 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 serez pas en mesure d’utiliser un RadialGradientBrush, si cela faisait partie du XAML converti, car le code XAML Windows Runtime ne prend pas en charge ce pinceau.)