Sintaxis de comandos de movimiento y dibujo

  • Artículo

Conoce los comandos de movimiento y dibujo (un minilenguaje) que podrás usar para especificar geometrías de rutas de acceso como un valor de atributo XAML. Los comandos de movimiento y dibujo se usan en muchas herramientas de diseño y de gráficos capaces de producir un gráfico de vector o una forma, como un formato de serialización e intercambio.

Propiedades que usan cadenas de comandos de movimiento y dibujo

La sintaxis de comandos de movimiento y dibujo es compatible con un convertidor de tipos interno para XAML, que analiza los comandos y genera una representación de gráficos en tiempo de ejecución. Esta representación es básicamente un conjunto acabado de vectores que están listos para su presentación. Los propios vectores no definen por completo los detalles de la presentación, sino que es necesario definir otros valores en los elementos. En cuanto al objeto Path, necesitas valores para las propiedades Fill y Stroke entre otras y, a continuación, debes conectar ese objeto Path al árbol visual. En cambio, para el objeto PathIcon, debes establecer la propiedad Foreground.

Hay dos propiedades en Windows Runtime que pueden usar una cadena que represente comandos de movimiento y dibujo: Path.Data y PathIcon.Data. Si especificas comandos de movimiento y dibujo para establecer una de estas propiedades, normalmente la especificarás como un valor de atributo XAML junto con otros atributos obligatorios de ese elemento. Sin entrar en más 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" />

Usar comandos de movimiento y dibujo y usar la clase PathGeometry

Para XAML en Windows Runtime, los comandos de movimiento y dibujo crean una clase PathGeometry que consta de un solo objeto PathFigure con un valor de propiedad Figures. Cada comando de dibujo crea una clase derivada PathSegment en cada colección de segmentos del objeto PathFigure, el comando de movimiento cambia la propiedad StartPoint y la existencia de un comando próximo establece IsClosed en true. Puedes examinar esta estructura como si fuera un modelo de objetos si examinas los valores de Data en tiempo de ejecución.

Sintaxis básica

La sintaxis para mover y dibujar comandos puede resumirse del modo siguiente:

  1. Comienza con una regla de relleno opcional. Esto se suele especificar únicamente si no quieres usar el elemento EvenOdd predeterminado. (Encontrarás más información acerca de EvenOdd un poco más adelante).
  2. Especifica exactamente un comando de movimiento.
  3. Especifica uno o más comandos de dibujo.
  4. Especifica un comando de cierre. Puedes omitir un comando de cierre, pero esto dejaría tu figura abierta (una situación poco habitual).

Estas son las reglas generales de esta sintaxis:

  • Cada comando viene representado exactamente por una letra+.
  • Esta letra puede ser mayúscula o minúscula. La distinción entre mayúsculas y minúsculas es importante, como ya se sabe.
  • Cada comando, excepto el de cierre, suele ir seguido de uno o varios números.
  • Si un comando tiene varios números, sepáralos con comas o espacios.

[fillRule]moveCommanddrawCommand[drawCommand*][closeCommand]

Muchos de los comandos de dibujo usan puntos en los que puedes proporcionar un valor x,y. Cada vez que vea un marcador de posición *puntos , puede suponer que proporciona dos valores decimales para el valor x,y de un punto.

Con frecuencia se pueden omitir los espacios en blanco, siempre que el resultado no sea ambiguo. De hecho, puedes omitir todos los espacios en blanco si usas comas como separador para todos los conjuntos de números (puntos y tamaño). Por ejemplo, este uso es aceptable: F1M0,58L2,56L6,60L13,51L15,53L6,64z. Pero es más habitual incluir espacios en blanco entre los comandos por motivos de claridad.

No uses la coma como separador decimal. Recuerda que la cadena de comandos se interpreta en lenguaje XAML y que no se tienen en cuenta las convenciones de formato numérico específicas de otras culturas que puedan ser distintas de las usadas en la configuración regional en-us.

Peculiaridades de la sintaxis

Regla de relleno

Existen dos posibles valores para la regla de relleno opcional: F0 o F1. (El valor F siempre aparece en mayúsculas). F0 es el valor predeterminado y crea el comportamiento de relleno EvenOdd fill behavior, así que normalmente no se especifica. Usa F1 para obtener el comportamiento de relleno Nonzero. 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
mstartPoint
Término Descripción
startPoint Punto
El punto inicial de una figura nueva.

Una M mayúscula indica que startPoint es una coordenada absoluta; en cambio, una m minúscula indica que startPoint es el desplazamiento de un punto anterior o (0,0) si no había punto anterior.

Nota Es legal especificar varios puntos después del comando move. Se dibuja una línea por esos puntos como si especificaras el comando de línea. Pero no te recomendamos seguir este estilo, mejor usa el comando de línea específico para ello.

Comandos draw

Un comando de dibujo puede contener varios comandos de forma: línea, línea horizontal, línea vertical, curva Bézier cúbica, curva Bézier cuadrática, curva Bézier cúbica suave, curva Bézier cuadrática suave y arco elíptico.

Para todos los comandos de dibujo, se distingue entre mayúsculas y minúsculas. Las letras mayúsculas indican coordenadas absolutas y las minúsculas indican coordenadas relativas al comando anterior.

Los puntos de control para un segmento son relativos al extremo del segmento anterior. 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

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
LendPoint
O bien
lendPoint
Término Descripción
endPoint Punto
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 bien
h x
Término Descripción
x Doble
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 bien
v y
Término Descripción
y Doble
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 extremo 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 controlPoint1controlPoint2endPoint
O bien
c controlPoint1controlPoint2endPoint
Término Descripción
controlPoint1 Punto
El primer punto de control de la curva, que determina la tangente de inicio de la misma.
controlPoint2 Punto
El segundo punto de control de la curva, que determina la tangente final de la misma.
endPoint Punto
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 extremo 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 una clase PathGeometry con una clase QuadraticBezierSegment.

Sintaxis
Q controlPoint endPoint
O bien
q controlPoint endPoint
Término Descripción
controlPoint Punto
El punto de control de la curva, que determina las tangentes de inicio y final de la misma.
endPoint Punto
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 extremo 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, se supone que el primer punto de control coincide con el punto actual. El segundo punto de control (el punto de control del extremo de la curva) viene especificado por 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 una clase PathGeometry con una clase BezierSegment, en la cual había un segmento de curva anterior.

Sintaxis
ScontrolPoint2endPoint
O bien
scontrolPoint2 endPoint
Término Descripción
controlPoint2 Punto
El punto de control de la curva, que determina la tangente final de la misma.
endPoint Punto
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 extremo 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 o un comando de curva Bézier cuadrática suave, entonces el punto de control coincide con el punto actual. Este comando define el equivalente de una clase PathGeometry con una clase QuadraticBezierSegment, donde había un segmento de curva anterior.

Sintaxis
TcontrolPointendPoint
O bien
tcontrolPointendPoint
Término Descripción
controlPoint Punto
El punto de control de la curva, que determina el inicio y la tangente de la curva.
endPoint Punto
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 una clase PathGeometry con una clase ArcSegment.

Sintaxis
A sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
O bien
a sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
Término Descripción
size Tamaño
Es el radio x y el radio y del arco.
rotationAngle Doble
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 Punto
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 bien
z

Sintaxis de punto

Describe las coordenadas x e y de un punto. Consulta también Point.

Sintaxis
x,y
O bien
xy
Término Descripción
x Doble
La coordenada x del punto.
y Doble
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 entre mayúsculas y minúsculas.

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

En lugar de usar valores decimales o enteros, puedes usar la notación científica. Por ejemplo, +1.e17 es un valor válido.

Herramientas de diseño que producen comandos de movimiento y dibujo

Al usar la herramienta Lápiz y otras herramientas de dibujo en Blend para Microsoft Visual Studio 2015, normalmente se produce un objeto Path que consta de comandos de movimiento y dibujo.

Es posible que encuentres datos de comandos de movimiento y dibujo existentes en algunas partes del control definidas en las plantillas XAML predeterminadas para los controles en Windows Runtime. Por ejemplo, algunos controles usan una clase PathIcon que tiene los datos definidos como comandos de movimiento y dibujo.

Asimismo, hay disponibles complementos o exportadores de otras herramientas que normalmente se usan para el diseño con gráficos de vector y que pueden generar el vector en formato XAML. Normalmente crean objetos Path en un contenedor de diseño junto con comandos de movimiento y dibujo de la propiedad Path.Data. Es posible contar con varios elementos Path en el XAML para poder aplicar distintos pinceles. Muchos de estos exportadores o complementos se escribieron originalmente para Windows Presentation Foundation XAML (WPF) o Silverlight, pero la sintaxis de la ruta de acceso XAML es idéntica con Windows Runtime XAML. Normalmente, es posible usar trozos de XAML de un exportador y pegarlos directamente en una página XAML de Windows Runtime. (No obstante, no podrás usar el pincel RadialGradientBrush si este formaba parte del XAML convertido, ya que no es compatible con el lenguaje XAML de Windows Runtime).