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

  • Artículo

Descargar ejemploDescargar el ejemplo

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

<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 ruta de acceso se compone de un valor opcional FillRule y una o varias descripciones de figura. Esta sintaxis se puede expresar 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 EvenOddNonzeroFillRule. F0 se usa para especificar la regla de EvenOdd relleno, mientras F1 que se usa para especificar la regla de Nonzero relleno. Para obtener más información sobre las reglas de relleno, vea Xamarin.Forms Formas: Reglas de relleno.
  • figureDescription representa una figura compuesta por un comando de movimiento, comandos draw y un comando close opcional. Un comando move especifica el punto inicial de la figura. Los comandos Draw describen el contenido de la ilustración y el comando close opcional cierra la figura.

En el ejemplo anterior, la sintaxis de marcado de ruta de acceso especifica un punto de inicio mediante el comando move (M), una serie de líneas rectas mediante el comando de línea (L) y cierra la ruta de acceso con el comando close (Z).

En la sintaxis de marcado de ruta de acceso, los espacios no son necesarios antes o después de los comandos. Además, no es necesario separar dos números por comas o espacios en blanco, pero esto solo se puede lograr cuando la cadena es inequívoca.

Sugerencia

La sintaxis de marcado de ruta de acceso es compatible con las definiciones de ruta de acceso de imagen de gráficos vectoriales escalables (SVG), por lo que puede ser útil para migrar gráficos desde formato SVG.

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

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 move especifica el punto inicial de una nueva figura. La sintaxis de este comando es: MstartPoint o mstartPoint.

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

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

Comandos de dibujo

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

  • 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 Bezier cuadrática (Q o q).
  • Curva bezier cúbica lisa (S o s).
  • Curva bezier cuadrática suave (T o t).

Cada comando draw se especifica con una letra que no distingue mayúsculas de minúsculas. Cuando accedes a 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: LendPoint o lendPoint.

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 PathGeometry objeto, vea Crear una 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: Hx o hx.

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: Vy o vy.

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: AsizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint o asizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint.

En esta sintaxis:

  • size es un Size que representa el radio 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 superior; de lo contrario, establézcalo en 0.
  • sweepDirectionFlag debe establecerse en 1 si el arco se dibuja en una dirección de ángulo positivo; de lo contrario, establézcalo en 0.
  • endPoint es un Point elemento al 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 PathGeometry objeto, consulte Creación de un arcSegment.

Comando de curva Bézier cúbica

El comando de curva Bézier cúbica crea una curva Bézier cúbica entre el punto actual y el punto final especificado mediante los dos puntos de control especificados. La sintaxis de este comando es: CcontrolPoint1controlPoint2endPoint o ccontrolPoint1 controlPoint2endPoint.

En esta sintaxis:

  • controlPoint1 es un Point que representa el primer punto de control de la curva, que determina la tangente inicial de la curva.
  • controlPoint2 es un Point que representa el segundo punto de control de la curva, que determina la tangente final de la curva.
  • endPoint es un Point objeto que representa el punto al 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 PathGeometry objeto, vea Crear un bezierSegment.

Comando de curva Bezier cuadrática

El comando de curva Bezier cuadrática crea una curva Bezier cuadrática entre el punto actual y el punto final especificado mediante el punto de control especificado. La sintaxis de este comando es: QcontrolPointendPoint o qcontrolPointendPoint.

En esta sintaxis:

  • controlPoint es un Point objeto que representa el punto de control de la curva, que determina las tangentes iniciales y finales de la curva.
  • endPoint es un Point objeto que representa el punto al 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 Bezier cuadrática como un PathGeometry objeto, vea Crear un quadraticBezierSegment.

Comando de curva Bezier cúbica suave

El comando de curva Bezier cúbica suave crea una curva Bézier cúbica entre el punto actual y el punto final especificado mediante el punto de control especificado. La sintaxis de este comando es: SendPoint2 controlPoint o scontrolPoint2 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 curva.
  • endPoint es un Point objeto que representa el punto al que se dibuja la curva.

Se supone que el primer punto de control es la reflexión del segundo punto de control del comando anterior, en relación con el punto actual. Si no hay ningún comando anterior, o el comando anterior no era un comando de curva Bezier cúbica cúbica o un comando de curva Bezier cúbica suave, 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 de curva Bezier cúbica suave válida.

Comando de curva Bezier cuadrática suave

El comando smooth quadratic Bezier curve crea una curva Bezier cuadrática entre el punto actual y el punto final especificado mediante un punto de control. La sintaxis de este comando es: TendPoint o tendPoint.

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 ningún comando anterior o si el comando anterior no era una curva Bezier cuadrática o un comando de curva Bezier cuadrática suave, se supone que el punto de control es coincidente con el punto actual.

T 100,30 es un ejemplo de un comando de curva Bezier cúbica cuadrática válida.

Comando de cierre

El comando close finaliza la figura actual y crea una línea que conecta el punto actual al punto inicial de la ilustración. Por lo tanto, este comando crea una combinación de línea entre el último segmento y el primer segmento de la figura.

La sintaxis del comando close es: Z o z.

Valores adicionales

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

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

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