Syntaxe XAML pour les tracés

Parcourir l’exemple

La syntaxe de balisage de chemin d’accès .NET Multiplateforme App UI (.NET MAUI) vous permet de spécifier compactement des géométries de chemin en XAML.

La syntaxe de balisage de chemin d’accès est spécifiée en tant que valeur de chaîne pour la Path.Data propriété :

<Path Stroke="Black"
      Data="M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z" />

La syntaxe de balisage de chemin d’accès est composée d’une valeur facultative FillRule et d’une ou plusieurs descriptions de figure. Cette syntaxe peut être exprimée comme suit : <Path Data="[fillRule]figureDescription[figureDescription] * " ... />

Dans cette syntaxe :

• fillRule est facultatif FillRule qui spécifie si la géométrie doit utiliser la règle ou Nonzero la EvenOdd règle de remplissage. F0 est utilisé pour spécifier la EvenOdd règle de remplissage, tandis qu’elle F1 est utilisée pour spécifier la règle de Nonzero remplissage. Pour plus d’informations sur les règles de remplissage, consultez règles de remplissage.
• figureDescription représente une figure composée d’une commande de déplacement, de commandes de dessin et d’une commande de fermeture facultative. Une commande de déplacement spécifie le point de départ de la figure. Les commandes De dessin décrivent le contenu de la figure, et la commande de fermeture facultative ferme la figure.

Dans l’exemple ci-dessus, la syntaxe de balisage de chemin spécifie un point de départ à l’aide de la commande move (M), une série de lignes droites à l’aide de la commande de ligne (L) et ferme le chemin d’accès avec la commande close (Z).

Dans la syntaxe de balisage de chemin d’accès, les espaces ne sont pas requis avant ou après les commandes. En outre, deux nombres n’ont pas besoin d’être séparés par une virgule ou un espace blanc, mais cela ne peut être obtenu que lorsque la chaîne est non ambiguë.

Conseil

La syntaxe de balisage de chemin d’accès est compatible avec les définitions de chemin d’accès d’image SVG (Scalable Vector Graphics), ce qui permet de porter des graphiques au format SVG.

Bien que la syntaxe de balisage de chemin d’accès soit destinée à être utilisée en XAML, elle peut être convertie en objet Geometry dans le code en appelant la ConvertFromInvariantString méthode dans la PathGeometryConverter classe :

Geometry pathData = (Geometry)new PathGeometryConverter().ConvertFromInvariantString("M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z");

Commande de déplacement

La commande move spécifie le point de départ d’une nouvelle figure. La syntaxe de cette commande est : MstartPoint ou mstartPoint.

Dans cette syntaxe, startPoint est une Point structure qui spécifie le point de départ d’une nouvelle figure. Si vous répertoriez plusieurs points après la commande de déplacement, une ligne est dessinée à ces points.

M 10,10 est un exemple de commande de déplacement valide.

Commandes de dessin

Une commande draw peut se composer de plusieurs commandes shape. Les commandes de dessin suivantes sont disponibles :

• Ligne (L ou l).
• Ligne horizontale (H ou h).
• Ligne verticale (V ou v).
• Arc elliptique (A ou a).
• Courbe bezier cubique (C ou c).
• Courbe quadratique bezier (Q ou q).
• Courbe bezier cubique lisse (S ou s).
• Courbe de Bézier quadratique lisse (T ou t).

Chaque commande de dessin est spécifiée avec une lettre qui ne respecte pas la casse. 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 , est équivalent à L 100,200 L 300,400.

Commande de ligne

La commande de ligne crée une ligne droite entre le point actuel et le point de terminaison spécifié. La syntaxe de cette commande est : LendPoint ou lendPoint.

Dans cette syntaxe, endPoint est un Point point de terminaison qui représente le point de terminaison de la ligne.

L 20,30 et L 20 30 sont des exemples de commandes de ligne valides.

Pour plus d’informations sur la création d’une PathGeometry ligne droite en tant qu’objet, consultez Créer un LineSegment.

Commande de ligne horizontale

La commande de ligne horizontale crée une ligne horizontale entre le point actuel et la coordonnée x spécifiée. La syntaxe de cette commande est : Hx ou hx.

Dans cette syntaxe, x est une double coordonnée x du point de terminaison de la ligne.

H 90 est un exemple de commande horizontal line valide.

Commande de ligne verticale

La commande de ligne verticale crée une ligne verticale entre le point actuel et la coordonnée y spécifiée. La syntaxe de cette commande est : Vy ou vy.

Dans cette syntaxe, y est un double qui représente la coordonnée y du point de terminaison de la ligne.

V 90 est un exemple de commande vertical line valide.

Commande d’arc elliptique

La commande arc elliptique crée un arc elliptique entre le point actuel et le point de terminaison spécifié. La syntaxe de cette commande est : AsizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint ou asizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint.

Dans cette syntaxe :

• size est un Size qui représente le rayon x et y de l’arc.
• rotationAngle est un double qui représente la rotation de l’ellipse, en degrés.
• isLargeArcFlag doit être défini sur 1 si l’angle de l’arc doit être de 180 degrés ou supérieur; sinon, définissez-le sur 0.
• sweepDirectionFlag doit être défini sur 1 si l’arc est dessiné dans une direction d’angle positif, sinon la définir sur 0.
• endPoint est une Point à laquelle l’arc est dessiné.

A 150,150 0 1,0 150,-150 est un exemple de commande d’arc elliptique valide.

Pour plus d’informations sur la création d’un PathGeometry arc elliptique en tant qu’objet, consultez Créer un ArcSegment.

Commande de courbe de Bézier cubique

La 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. La syntaxe de cette commande est : CcontrolPoint1 controlPoint2endPoint ou ccontrolPoint1controlPoint2 endPoint.

Dans cette syntaxe :

• controlPoint1 est un Point qui représente le premier point de contrôle de la courbe, qui détermine la tangente de départ de la courbe.
• controlPoint2 est un Point qui représente le deuxième point de contrôle de la courbe, qui détermine la tangente de fin de la courbe.
• endPoint est un Point qui représente le point vers lequel la courbe est dessinée.

C 100,200 200,400 300,200 est un exemple de commande de courbe de Bézier cubique valide.

Pour plus d’informations sur la création d’une courbe bezier cubique en tant qu’objet PathGeometry , consultez Créer un BezierSegment.

Commande courbe quadratique bezier

La 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é. La syntaxe de cette commande est : QcontrolPoint endPoint ou qcontrolPoint endPoint.

Dans cette syntaxe :

• controlPoint est un Point qui représente le point de contrôle de la courbe, qui détermine les tangentes de début et de fin de la courbe.
• endPoint est un Point qui représente le point vers lequel la courbe est dessinée.

Q 100,200 300,200 est un exemple de commande quadratic Bezier curve valide.

Pour plus d’informations sur la création d’une courbe de Bézier quadratique en tant qu’objet PathGeometry , voir Create a QuadraticBezierSegment.

Commande de courbe de Bézier cubique lisse

La 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é à l’aide du point de contrôle spécifié. La syntaxe de cette commande est : ScontrolPoint2endPoint ou scontrolPoint2 endPoint.

Dans cette syntaxe :

• controlPoint2 est un Point qui représente le deuxième point de contrôle de la courbe, qui détermine la tangente de fin de la courbe.
• endPoint est un Point qui représente le point vers lequel la courbe est dessinée.

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 cubique ou une commande de courbe de Bézier lisse, le premier point de contrôle est supposé coïncider avec le point actuel.

S 100,200 200,300 est un exemple de commande de courbe de Bézier lisse valide.

Commande courbe de Bézier quadratique lisse

La 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é à l’aide d’un point de contrôle. La syntaxe de cette commande est : TendPoint ou tendPoint.

Dans cette syntaxe, endPoint est un Point qui représente le point auquel la courbe est dessinée.

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 courbe quadratique bezier ou une commande de courbe de Bézier quadratique lisse, le point de contrôle est supposé coïncider avec le point actuel.

T 100,30 est un exemple de commande de courbe quadratique valide.

Bouton de fermeture

La commande close met fin à la figure actuelle et crée une ligne qui connecte le point actuel au point de départ de la figure. Par conséquent, cette commande crée une jointure de ligne entre le dernier segment et le premier segment de la figure.

La syntaxe de la commande close est : Z ou z.

Valeurs supplémentaires

Au lieu d’une valeur numérique standard, vous pouvez également utiliser les valeurs spéciales respectant la casse suivantes :

• Infinity représente double.PositiveInfinity.
• -Infinityreprésente double.NegativeInfinity.
• NaN représente double.NaN.

En outre, vous pouvez également utiliser la notation scientifique ne respectant pas la casse. Par conséquent, +1.e17 est une valeur valide.