Sintaxis de comandos de movimiento y dibujo

Obtenga información sobre los comandos de movimiento y dibujo (un mini-lenguaje) que puede usar para especificar geometrías de trazado 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 de dibujo genera una clase derivada PathSegment en la colección de Segments de esa PathFigure única, el comando de movimiento cambia StartPoint, y la existencia de un comando de cierre establece IsClosed en verdadero. 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:

1. Comience con una regla de relleno opcional. Normalmente, esto solo se especifica si no quiere el valor predeterminado EvenOdd . (Más sobre EvenOdd más adelante).
2. Especifique exactamente un comando de movimiento.
3. Especifique uno o varios comandos de dibujo.
4. Especifique un comando de cierre. Puede omitir un comando close, pero eso dejaría abierta la figura, lo cual es poco común.

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]moveCommanddrawCommand[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 uses comas como separador decimal para números decimales; la cadena de comandos es interpretada por XAML y no tiene en cuenta las convenciones de formato de número específicas de la referencia cultural que difieren de las usadas en la configuración regional de en-us.

Detalles de la sintaxis

Regla de relleno

Hay dos valores posibles para la regla de relleno opcional: F0 o F1. (La F siempre está en mayúsculas). F0 es el valor predeterminado; genera el comportamiento de relleno EvenOdd , por lo que normalmente no se especifica. Utilice F1 para obtener el comportamiento de relleno no cero. Estos valores de relleno se alinean con los valores de la enumeración FillRule .

Comando Move

Especifica el punto de inicio de una nueva figura.

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 de dibujo

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 de dibujo, 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. Al escribir secuencialmente más de un comando del mismo tipo, puede omitir la entrada de comando duplicado. 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 .

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.

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 un comando de línea vertical válido.

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 .

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.

Comando de curva Bézier cúbica suave

Crea una curva Bézier cúbica entre el punto actual y el punto final especificado. Se supone que el primer punto de control es la reflexión del segundo punto de control del comando anterior con respecto 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 un PathGeometry con un BezierSegment donde había un segmento de curva anterior.

Comando de curva Bézier cuadrática suave

Crea una curva Bézier cuadrática entre el punto actual y el punto final especificado. Se supone que el punto de control es la reflexión del punto de control del comando anterior con respecto 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 cuando hay un segmento de curva anterior.

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.

Comando Cerrar

Finaliza la ilustración actual y crea una línea que conecta el punto actual al punto inicial de la ilustración. Este comando crea una unión de línea entre el último segmento y el primer segmento de la figura.

Sintaxis de punto

Describe la coordenada x y de un punto. Consulte también Point.

Notas adicionales

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

• Infinito: representa PositiveInfinity.
• -Infinity: Representa InfinitoNegativo.
• 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 datos de comandos de movimiento y dibujo existentes en algunas partes de control definidas en las plantillas predeterminadas de XAML de Windows Runtime para 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ás usar radialGradientBrush, si formaba parte del XAML convertido, porque XAML de Windows Runtime no es compatible con ese pincel).

Temas relacionados

• Dibujar formas
• Usar pinceles
• Path.Data
• PathIcon