Sintaxis de comandos de movimiento y dibujo
Obtenga información sobre los comandos de movimiento y dibujo (un mini-lenguaje) que puedes usar para especificar geometrías de ruta de acceso como un valor de atributo XAML. Muchas herramientas de diseño y gráficos usan comandos de movimiento y dibujo que pueden generar un gráfico vectorial o una forma, como formato de serialización e intercambio.
Propiedades que usan cadenas de comandos move y draw
La sintaxis del comando move y draw es compatible con un convertidor de tipos interno para XAML, que analiza los comandos y genera una representación gráfica en tiempo de ejecución. Esta representación es básicamente un conjunto terminado de vectores que está listo para la presentación. Los propios vectores no completan los detalles de la presentación; Todavía tendrá que establecer otros valores en los elementos. Para un objeto Path , también necesita valores para Fill, Stroke y otras propiedades y, a continuación, esa ruta de acceso debe estar conectada al árbol visual de alguna manera. Para un objeto PathIcon, establezca la propiedad Foreground.
Hay dos propiedades en Windows Runtime que pueden usar una cadena que representa comandos de movimiento y dibujo: Path.Data y PathIcon.Data. Si estableces una de estas propiedades especificando comandos move y draw, normalmente lo estableces como un valor de atributo XAML junto con otros atributos necesarios de ese elemento. Sin entrar en los detalles, este es el aspecto que tiene:
<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" />
Uso de comandos de movimiento y dibujo en lugar de usar pathGeometry
Para XAML de Windows Runtime, los comandos move and draw generan un PathGeometry con un único objeto PathFigure con un valor de propiedad Figures. Cada comando draw genera una clase derivada PathSegment en esa colección Segments de pathFigure única, el comando move cambia StartPoint y la existencia de un comando close establece IsClosed en true. Puede navegar por esta estructura como modelo de objetos si examina los valores de datos en tiempo de ejecución.
Sintaxis básica
La sintaxis de los comandos de movimiento y dibujo se puede resumir de la siguiente manera:
- Comience con una regla de relleno opcional. Normalmente, esto solo se especifica si no quiere el valor predeterminado EvenOdd . (Más información EvenOdd más tarde).
- Especifique exactamente un comando de movimiento.
- Especifique uno o varios comandos de dibujo.
- Especifique un comando close. Puede omitir un comando close, pero eso dejaría abierta la figura (es poco frecuente).
Las reglas generales de esta sintaxis son:
- Cada comando se representa exactamente mediante una letra.
- Esa letra puede ser mayúscula o minúscula. El caso es importante, como describiremos.
- Cada comando excepto el comando close suele ir seguido de uno o varios números.
- Si hay más de un número para un comando, separe con una coma o un espacio.
[fillRule] moveCommand drawCommand [drawCommand*] [closeCommand]
Muchos de los comandos draw usan puntos, donde se proporciona un valor x,y . Cada vez que vea un marcador de posición *points , puede suponer que va a proporcionar dos valores decimales para el valor x,y de un punto.
A menudo, se puede omitir el espacio en blanco cuando el resultado no es ambiguo. De hecho, puede omitir todos los espacios en blanco si usa comas como separador para todos los conjuntos de números (puntos y tamaño). Por ejemplo, este uso es legal: F1M0,58L2,56L6,60L13,51L15,53L6,64z. Pero es más habitual incluir espacios en blanco entre comandos para mayor claridad.
No use comas como separador decimal para números decimales; XAML interpreta la cadena de comandos y no tiene en cuenta las convenciones de formato de números específicas de la referencia cultural que difieren de las usadas en la configuración regional en-us .
Detalles de la sintaxis
Regla de relleno
Hay dos valores posibles para la regla de relleno opcional: F0 o F1. (El F siempre está en mayúsculas). F0 es el valor predeterminado; genera el comportamiento de relleno EvenOdd , por lo que normalmente no se especifica. Use F1 para obtener el comportamiento de relleno distinto de cero . Estos valores de relleno se alinean con los valores de la enumeración FillRule.
Comando Move
Especificar el punto inicial de una figura nueva.
| Sintaxis |
|---|
M startPoint O bien m startPoint |
| Término | Descripción |
|---|---|
| startPoint | Point El punto inicial de una figura nueva. |
Una M mayúscula indica que startPoint es una coordenada absoluta; un m en minúsculas indica que startPoint es un desplazamiento al punto anterior o (0,0) si no había ningún punto anterior.
Nota Es legal especificar varios puntos después del comando move. Una línea se dibuja en esos puntos como si especificase el comando de línea. Sin embargo, no es un estilo recomendado; Use el comando de línea dedicada en su lugar.
Comandos draw
Un comando draw puede constar de varios comandos de forma: línea, línea horizontal, línea vertical, curva bezier cúbica, curva bezier cuadrática, curva bezier cúbica suave, curva bezier cuadrática suave y arco elíptico.
Para todos los comandos draw, el caso es importante. Las letras mayúsculas indican coordenadas absolutas y letras minúsculas indican coordenadas relativas al comando anterior.
Los puntos de control de un segmento son relativos al punto final del segmento anterior. 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
Crea una línea recta entre el punto actual y el punto final especificado. l 20 30 y L 20,30 son ejemplos de comandos de línea válidos. Define el equivalente de un objeto LineGeometry.
| Sintaxis |
|---|
L endPoint O bien l endPoint |
| Término | Descripción |
|---|---|
| endPoint | Point Punto de conexión de la línea. |
Comando de línea horizontal
Crea una línea horizontal entre el punto actual y la coordenada x especificada. H 90 es un ejemplo de un comando de línea horizontal válido.
| Sintaxis |
|---|
H x -o- h x |
| Término | Descripción |
|---|---|
| x | Double Coordenada x del punto final de la línea. |
Comando de línea vertical
Crea una línea vertical entre el punto actual y la coordenada y especificada. v 90 es un ejemplo de comando de línea vertical válido.
| Sintaxis |
|---|
V y -o- v y |
| Término | Descripción |
|---|---|
| y | Double Coordenada y del punto final de la línea. |
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 (controlPoint1 y controlPoint2). C 100,200 200,400 300,200 es un ejemplo de un comando de curva válido. Define el equivalente de un objeto PathGeometry con un objeto BezierSegment.
| Sintaxis |
|---|
C controlPoint1 controlPoint2 endPoint -o- c controlPoint1 controlPoint2 endPoint |
| Término | Descripción |
|---|---|
| controlPoint1 | Point El primer punto de control de la curva, que determina la tangente de inicio de la misma. |
| controlPoint2 | Point El segundo punto de control de la curva, que determina la tangente final de la misma. |
| endPoint | Point Punto en el que se dibuja la curva. |
Comando de curva Bézier cuadrática
Crea una curva Bézier cuadrática entre el punto actual y el punto final especificado mediante el punto de control especificado (controlPoint). q 100,200 300,200 es un ejemplo de un comando válido de curva Bézier cuadrática. Define el equivalente de un PathGeometry con un QuadraticBezierSegment.
| Sintaxis |
|---|
Q controlPoint endPoint -o- q controlPoint endPoint |
| Término | Descripción |
|---|---|
| controlPoint | Point El punto de control de la curva, que determina las tangentes de inicio y final de la misma. |
| endPoint | Point Punto en el que se dibuja la curva. |
Comando de curva Bézier cúbica suave
Crea una curva Bézier cúbica entre el punto actual y el punto final especificado. 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 ningún 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 suave, suponga que el primer punto de control coincide con el punto actual. El segundo punto de control (el punto de control para el final de la curva) se especifica mediante controlPoint2. Por ejemplo, S 100,200 200,300 es un comando válido de curva Bézier cúbica suave. Este comando define el equivalente de pathGeometry con un bezierSegment donde había un segmento de curva anterior.
| Sintaxis |
|---|
ScontrolPoint2 Extremo -o- scontrolPoint2 endPoint |
| Término | Descripción |
|---|---|
| controlPoint2 | Point El punto de control de la curva, que determina la tangente final de la misma. |
| endPoint | Point Punto en el que se dibuja la curva. |
Comando de curva Bézier cuadrática suave
Crea una curva Bézier cuadrática entre el punto actual y el punto final especificado. 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 un comando de curva Bézier cuadrática cuadrática o un comando de curva Bézier cuadrática suave, el punto de control coincide con el punto actual. Este comando define el equivalente de pathGeometry con un quadraticBezierSegment donde había un segmento de curva anterior.
| Sintaxis |
|---|
TcontrolPoint Extremo -o- tcontrolPoint Extremo |
| Término | Descripción |
|---|---|
| controlPoint | Point El punto de control de la curva, que determina el inicio y la tangente de la curva. |
| endPoint | Point Punto en el que se dibuja la curva. |
Comando de arco elíptico
Crea un arco elíptico entre el punto actual y el punto final especificado. Define el equivalente de pathGeometry con ArcSegment.
| Sintaxis |
|---|
A tamaño rotationAngle isLargeArcFlag sweepDirectionFlag endPoint -o- a tamaño rotationAngle isLargeArcFlag sweepDirectionFlag endPoint |
| Término | Descripción |
|---|---|
| size | Tamaño Radio x y radio y del arco. |
| rotationAngle | Double La rotación de la elipse, en grados. |
| isLargeArcFlag | Establezca el valor en 1 si el ángulo del arco debe ser de 180 grados o más; de lo contrario, establézcalo en 0. |
| sweepDirectionFlag | Establezca el valor en 1 si se dibuja en una dirección con ángulo positivo; de lo contrario, establézcalo en 0. |
| endPoint | Point Punto en el que está dibujado el arco. |
Comando Close
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 (esquina) entre el último y el primer segmento de la figura.
| Sintaxis |
|---|
Z -o- z |
Sintaxis de punto
Describe la coordenada x y de un punto. Consulte también Point.
| Sintaxis |
|---|
| x,y -o- xy |
| Término | Descripción |
|---|---|
| x | Double La coordenada x del punto. |
| y | Double La coordenada y del punto. |
Notas adicionales
En lugar de un valor numérico estándar, también puede usar los valores especiales siguientes. Estos valores distinguen mayúsculas de minúsculas.
- Infinito: representa PositiveInfinity.
- -Infinity: representa NegativeInfinity.
- NaN: representa NaN.
En lugar de usar decimales o enteros, puede usar notación científica. Por ejemplo, +1.e17 es un valor válido.
Herramientas de diseño que generan comandos de movimiento y dibujo
El uso de la herramienta Pen y otras herramientas de dibujo en Blend para Microsoft Visual Studio 2015 normalmente generará un objeto Path, con comandos de movimiento y dibujo.
Es posible que veas los datos de comandos de movimiento y dibujo existentes en algunas de las partes de control definidas en las plantillas predeterminadas xaml de Windows Runtime para los controles. Por ejemplo, algunos controles usan un PathIcon que tiene los datos definidos como comandos de movimiento y dibujo.
Hay exportadores o complementos disponibles para otras herramientas de diseño de gráficos vectoriales que se usan habitualmente que pueden generar el vector en formato XAML. Normalmente crean objetos Path en un contenedor de diseño, con comandos de movimiento y dibujo para Path.Data. Puede haber varios elementos Path en el XAML para que se puedan aplicar pinceles diferentes. Muchos de estos exportadores o complementos se escribieron originalmente para XAML de Windows Presentation Foundation (WPF) o Silverlight, pero la sintaxis de la ruta de acceso XAML es idéntica con XAML de Windows Runtime. Normalmente, puedes usar fragmentos de XAML de un exportador y pegarlos directamente en una página XAML de Windows Runtime. (Sin embargo, no podrá usar un RadialGradientBrush, si formaba parte del XAML convertido, porque XAML de Windows Runtime no admite ese pincel).