Formas de Xamarin.Forms: sintaxis de marcado de ruta de acceso

La sintaxis de marcado de rutas de acceso de Xamarin.Forms le permite especificar de forma compacta las geometrías de las rutas de acceso en XAML. La sintaxis se especifica como un valor de cadena para la propiedad Path.Data:

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

La sintaxis de marcado de trazados se compone de un valor FillRule opcional y una o varias descripciones de figuras. Esta sintaxis puede expresarse como: <Path Data="[fillRule] figureDescription [figureDescription] * " ... />

En esta sintaxis:

• fillRule es opcional Xamarin.Forms.Shapes.FillRule que especifica si la geometría debe usar o EvenOdd Nonzero FillRule. F0 se usa para especificar la regla de relleno EvenOdd, mientras que F1 se usa para especificar la regla de relleno Nonzero. Para más información sobre las reglas de relleno, consulte: Formas de Xamarin.Forms: Reglas de relleno.
• figureDescription representa una fgura compuesta de un comando de movimiento, comandos de dibujo y un comando de cierre opcional. Un comando de movimiento especifica el punto inicial de la figura. Los comandos de dibujo describen el contenido de la figura y el comando de cierre opcional cierra la figura.

En el ejemplo anterior, la sintaxis de marcado de trazados especifica un punto de inicio mediante el comando de movimiento (M) y una serie de líneas rectas mediante el comando de línea (L), y cierra el trazado con el comando de cierre (Z).

En la sintaxis de marcado de trazados, no se necesitan espacios antes o después de los comandos. Además, tampoco es necesario separar dos números con una coma o un espacio en blanco, pero esto solo se puede hacer si la cadena no es ambigua.

Aunque la sintaxis de marcado de trazados está pensada para su consumo en XAML, se puede convertir en un objeto Geometry en el código invocando el método ConvertFromInvariantString en la clase PathGeometryConverter:

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

Comando de movimiento

El comando de movimiento especifica el punto inicial de la figura. La sintaxis de este comando es: M startPoint o m startPoint.

En esta sintaxis, startPoint es una estructura Point que especifica el punto inicial de una nueva figura. Si enumeras varios puntos después del comando de movimiento, se dibuja una línea a esos puntos.

M 10,10 es un ejemplo de un comando de movimiento válido.

Comandos de dibujo

Un comando de dibujo puede constar de varios comandos de forma. Están disponibles los siguientes comandos de dibujo:

• Línea (L o l).
• Línea horizontal (H o h).
• Línea vertical (V o v).
• Arco elíptico (A o a).
• Curva Bézier cúbica (C o c).
• Curva Bézier cuadrática (Q o q).
• Curva Bézier cúbica suavizada (S o s).
• Curva Bézier cuadrática suavizada (T o t).

Cada comando de dibujo se especifica con una letra que no distingue entre mayúsculas y minúsculas. Cuando escribas más de un comando del mismo tipo de forma secuencial, puedes omitir la entrada de comando duplicada. Por ejemplo, L 100,200 300,400 es equivalente a L 100,200 L 300,400.

Comando de línea

El comando de línea crea una línea recta entre el punto actual y el punto final especificado. La sintaxis de este comando es: L endPoint o l endPoint.

En esta sintaxis, endPoint es un Point que representa el punto final de la línea.

L 20,30 y L 20 30 son ejemplos de comandos de línea válidos.

Para obtener información sobre cómo crear una línea recta como un objeto PathGeometry, consulta Crear un lineSegment.

Comando de línea horizontal

El comando de línea horizontal crea una línea horizontal entre el punto actual y la coordenada x especificada. La sintaxis de este comando es: H x o h x.

En esta sintaxis, x es un double que representa la coordenada x del punto final de la línea.

H 90 es un ejemplo de un comando de línea horizontal válido.

Comando de línea vertical

El comando de línea vertical crea una línea vertical entre el punto actual y la coordenada y especificada. La sintaxis de este comando es: V y o v y.

En esta sintaxis, y es un double que representa la coordenada y del punto final de la línea.

V 90 es un ejemplo de comando de línea vertical válido.

Comando de arco elíptico

El comando de arco elíptico crea un arco elíptico entre el punto actual y el punto final especificado. La sintaxis de este comando es: A size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint o a size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint.

En esta sintaxis:

• size es un Size que representa los radios X e Y del arco.
• rotationAngle es un double que representa la rotación de la elipse, en grados.
• isLargeArcFlag debe establecerse en 1 si el ángulo del arco debe ser de 180 grados o más; de lo contrario, establécelo en 0.
• sweepDirectionFlag debe establecerse en 1 si se dibuja en una dirección con ángulo positivo; de lo contrario, establécelo en 0.
• endPoint es un Point en el que se dibuja el arco.

A 150,150 0 1,0 150,-150 es un ejemplo de un comando de arco elíptico válido.

Para obtener información sobre cómo crear un arco elíptico como un objeto PathGeometry, consulta Crear un ArcSegment.

Comando de curva Bézier cúbica

El comando de curva Bézier cúbica crea una curva de Bézier cúbica entre el punto actual y el punto final especificado con los dos puntos de control especificados. La sintaxis de este comando es: C controlPoint1 controlPoint2 endPoint o c controlPoint1 controlPoint2 endPoint.

En esta sintaxis:

• controlPoint1 es un Point que representa el primer punto de control de la curva, que determina la tangente de inicio de la misma.
• controlPoint2 es un Point que representa el segundo punto de control de la curva, que determina la tangente final de la misma.
• endPoint es un Point que representa el punto para el que se dibuja la curva.

C 100,200 200,400 300,200 es un ejemplo de un comando de curva Bézier cúbica válido.

Para obtener información sobre cómo crear una curva Bézier cúbica como un objeto PathGeometry, consulta Crear un BezierSegment.

Comando de curva Bézier cuadrática

El comando de curva Bézier cuadrática crea una curva de Bézier cuadrática entre el punto actual y el punto final especificado con el punto de control especificado. La sintaxis de este comando es: Q controlPoint endPoint o q controlPoint endPoint.

En esta sintaxis:

• controlPoint es un Point que representa el punto de control de la curva, que determina las tangentes de inicio y final de la misma.
• endPoint es un Point que representa el punto para el que se dibuja la curva.

Q 100,200 300,200 es un ejemplo de un comando de curva Bézier cuadrática válido.

Para obtener información sobre cómo crear una curva Bézier cuadrática como un objeto PathGeometry, consulta Crear un QuadraticBezierSegment.

Comando de curva Bézier cúbica suavizada

El comando de curva Bézier cúbica suavizada crea una curva de Bézier cúbica entre el punto actual y el punto final especificado con el punto de control especificado. La sintaxis de este comando es: S controlPoint2 endPoint o s controlPoint2 endPoint.

En esta sintaxis:

• controlPoint2 es un Point que representa el segundo punto de control de la curva, que determina la tangente final de la misma.
• endPoint es un Point que representa el punto para el que se dibuja la curva.

El primer punto de control se supone que es el reflejo del segundo punto de control del comando anterior en relación al punto actual. Si no hay un comando anterior, o si el comando anterior no era un comando de curva Bézier cúbica o un comando de curva Bézier cúbica suavizada, se supone que el primer punto de control es coincidente con el punto actual.

S 100,200 200,300 es un ejemplo de un comando válido de curva de Bézier cúbica suavizada.

Comando de curva Bézier cuadrática suavizada

El comando de curva Bézier cuadrática suavizada crea una curva de Bézier cuadrática entre el punto actual y el punto final especificado con un punto de control. La sintaxis de este comando es: T endPoint o t endPoint.

En esta sintaxis, endPoint es un Point que representa el punto al que se dibuja la curva.

El punto de control se supone que es el reflejo del punto de control del comando anterior en relación al punto actual. Si no hay un comando anterior, o si el comando anterior no era un comando de curva Bézier cuadrática o un comando de curva Bézier cuadrática suavizada, se supone que el punto de control coincide con el punto actual.

T 100,30 es un ejemplo de un comando de curva Bézier cuadrática suavizada válido.

Comando de cierre

El comando de cierre finaliza la figura actual y crea una línea que conecta el punto actual con el punto inicial de la figura. Este comando crea una unión de líneas entre el último y el primer segmento de la figura.

La sintaxis del comando de cierre es: Z o z.

Valores adicionales

En lugar de un valor numérico estándar, también puedes usar los valores especiales que distinguen mayúsculas de minúsuclas siguientes:

• Infinity representa double.PositiveInfinity.
• -Infinity representa double.NegativeInfinity.
• NaN representa double.NaN.

Además, también puedes usar notación científica que no distingue mayúsculas de minúsculas. Por lo tanto, +1.e17 es un valor válido.

Vínculos relacionados

• Formas de Xamarin.Forms: Geometrías
• Formas de Xamarin.Forms: Reglas de relleno