Compartilhar via

Sintaxe de comandos de movimentação e desenho

  • Artigo

Saiba mais sobre os comandos de movimentação e desenho (uma minilinguagem) que você pode usar para especificar geometrias de caminho como um valor de atributo XAML. Comandos de movimentação e desenho são usados por várias ferramentas de design e elementos gráficos que podem gerar uma forma ou elemento gráfico de vetor, como um formato de serialização e intercâmbio.

Propriedades que usam cadeias de comandos de movimentação e desenho

A sintaxe de comandos de movimentação e desenho tem suporte em um conversor de tipos internos para XAML, que analisa os comandos e produz uma representação de elementos gráficos de tempo de execução. Essa representação é basicamente um conjunto acabado de vetores que está pronto para apresentação. Os vetores propriamente ditos não completam os detalhes de apresentação; você precisa definir outros valores nos elementos. Para um objeto Path, você também precisa de valores para Fill, Stroke e outras propriedades e, em seguida, esse Path deve ser conectado à árvore visual de alguma maneira. Para um objeto PathIcon, defina a propriedade Foreground.

Há duas propriedades no Windows Runtime que podem usar uma cadeia que representa os comandos de movimentação e desenho: Path.Data e PathIcon.Data. Se você definir uma dessas propriedades especificando os comandos de movimentação e desenho, geralmente a definirá como um valor de atributo XAML junto com outros atributos obrigatórios desse elemento. Sem entrar em especificidades, veja um exemplo a seguir:

<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 movimentação e desenho versus uso de PathGeometry

Para XAML do Windows Runtime, os comandos de movimentação e desenho produzem uma PathGeometry com um único objeto PathFigure com um valor de propriedade Figures. Cada comando de desenho produz uma classe derivada PathSegment na coleção Segments de PathFigure, o comando move altera o StartPoint, e a existência de um comando close define IsClosed como true. Você pode navegar nessa estrutura como um modelo de objeto se examinar os valores de Data no tempo de execução.

A sintaxe básica

A sintaxe dos comandos de movimentação e desenho pode ser resumida desta maneira:

  1. Comece com uma regre de preenchimento opcional. Geralmente isso é especificado somente se você não deseja o padrão EvenOdd. (Mais detalhes sobre EvenOdd posteriormente.)
  2. Especifique exatamente um comando de movimentação.
  3. Especifique um ou mais comandos de desenho.
  4. Especifique um comando de fechamento. Você pode omitir um comando de fechamento, mas isso deixaria a sua imagem aberta (o que é incomum).

As regras gerais dessa sintaxe são:

  • Cada comando é representado por exatamente uma letra.
  • Essa letra pode ser maiúscula ou minúscula. A formatação de maiúsculas e minúsculas, conforme iremos descrever.
  • Cada comando, com exceção do comando de fechamento, é normalmente seguido por um ou mais números.
  • Se houver mais de um número para um comando, separe-os com uma vírgula ou um espaço.

[fillRule]moveCommanddrawCommand[drawCommand*][closeCommand]

Muitos comandos de desenho usam pontos, nos quais você fornece um valor x,y. Sempre que você vir um espaço reservado de *pontos , poderá assumir que está dando dois valores decimais para o valor x,y de um ponto.

Espaços em branco podem ser omitidos quando o resultado não é ambíguo. Na verdade, você poderá omitir todos os espaços em branco se usar vírgulas como separadores para todos os conjuntos de números (pontos e tamanho). Por exemplo, este uso é legal: F1M0,58L2,56L6,60L13,51L15,53L6,64z. Porém, é mais típico incluir espaços em branco entre os comandos para maior clareza.

Não use vírgulas como separador decimal para números decimais; a cadeia do comando é interpretada por XAML e não leva em consideração convenções de formatação numérica específicas de uma cultura que sejam diferentes daquelas usadas na localidade en-us.

Detalhes específicos da sintaxe

Regra de preenchimento

Há dois valores possíveis para a regra de preenchimento opcional: F0 ou F1. (O F está sempre em maiúsculas.) F0 é o valor padrão; ele produz o comportamento de preenchimento EvenOdd, por isso, você normalmente não o especifica. Use F1 para obter o comportamento de preenchimento Nonzero. Esses valores de preenchimento se alinham aos valores da enumeração FillRule.

Comando Mover

Especifica o ponto de início de uma nova figura.

Sintaxe
M Startpoint
- ou -
mStartpoint
Termo Descrição
startPoint Point
O ponto inicial da nova figura.

Um M maiúsculo indica que startPoint é uma coordenada absoluta; um m minúsculo indica que startPoint é um deslocamento do ponto anterior, ou (0,0) se não há ponto anterior.

Nota É legal especificar vários pontos após o comando de movimentação. Uma linha é desenhada até esses pontos, como se você tivesse especificado o comando de linha. No entanto, este não é um estilo recomendado. Em vez disso, use o comando de linha dedicado.

Desenhar comandos

Um comando de desenho pode consistir em vários comandos de forma: linha, linha horizontal, linha vertical, curva de Bézier cúbica, curva de Bézier quadrática, curva de Bézier cúbica suave, curva de Bézier quadrática suave e arco elíptico.

Para todos os comandos de desenho, a formatação de maiúsculas e minúsculas é importante. Letras maiúsculas indicam coordenadas absolutas, enquanto letras minúsculas indicam coordenadas relativas ao comando anterior.

Os pontos de controle de um segmento são relativos ao ponto final do segmento anterior. Ao inserir sequencialmente mais de um comando do mesmo tipo, você pode omitir a entrada de comando duplicada. Por exemplo, L 100,200 300,400 é equivalente a L 100,200 L 300,400.

Comando de linha

Cria uma linha reta entre o ponto atual e o ponto final especificado. l 20 30 e L 20,30 são exemplos de comandos de linha válidos. Define o equivalente a um objeto LineGeometry.

Sintaxe
LExtremidade
- ou -
lExtremidade
Termo Descrição
endPoint Point
O ponto de extremidade da linha.

Comando de linha horizontal

Cria uma linha horizontal entre o ponto atual e a coordenada X especificada. H 90 é um exemplo de um comando de linha horizontal válido.

Sintaxe
H x
- ou -
h x
Termo Descrição
x Double
A coordenada X do ponto final da linha.

Comando de linha vertical

Cria uma linha vertical entre o ponto atual e a coordenada y especificada. v 90 é um exemplo de um comando de linha vertical válido.

Sintaxe
V Y
- ou -
v Y
Termo Descrição
y Double
A coordenada y do ponto final da linha.

Comando de curva de Bézier cúbica

Cria uma curva de Bézier cúbica entre o ponto atual e o ponto final especificado usando os dois pontos de controle especificados (controlPoint1 e controlPoint2). C 100,200 200,400 300,200 é um exemplo de um comando de curva válido. Define o equivalente a um objeto PathGeometry com um objeto BezierSegment.

Sintaxe
C controlPoint1controlPoint2endPoint
- ou -
c controlPoint1controlPoint2endPoint
Termo Descrição
controlPoint1 Point
O primeiro ponto de controle da curva, que determina o início da tangente da curva.
controlPoint2 Point
O segundo ponto de controle da curva, que determina o final da tangente da curva.
Extremidade Point
O ponto em que a curva é desenhada.

Comando de curva de Bézier quadrática

Cria uma curva de Bézier quadrática entre o ponto atual e o ponto final especificado usando o ponto de controle especificado (controlPoint). q 100,200 300,200 é um exemplo de um comando de curva Bézier quadrático válido. Define o equivalente a um objeto PathGeometry com um objeto QuadraticBezierSegment.

Sintaxe
Q controlPoint endPoint
- ou -
q controlPoint endPoint
Termo Descrição
controlPoint Point
O ponto de controle da curva, que determina o início e final da tangente da curva.
Extremidade Point
O ponto em que a curva é desenhada.

Comando de curva de Bézier cúbica suave

Cria uma curva de Bézier cúbica entre o ponto atual e o ponto final especificado. O primeiro ponto de controle é assumido ser a reflexão do segundo ponto de controle do comando anterior relativo ao ponto atual. Caso não haja comando anterior ou caso o comando anterior não seja um comando de curva de Bézier cúbica ou um comando de curva de Bézier cúbica suave, suponha que o primeiro ponto de controle coincide com o ponto atual. O segundo ponto de controle, o ponto de controle do final da curva, é especificado por controlPoint2. Por exemplo, S 100,200 200,300 é um comando de curva de Bézier cúbica suave válido. Esse comando define o equivalente a uma PathGeometry com um BezierSegment em que havia um segmento de curva precedente.

Sintaxe
ScontrolPoint2endPoint
- ou -
scontrolPoint2 endPoint
Termo Descrição
controlPoint2 Point
O ponto de controle da curva, que determina o final da tangente da curva.
Extremidade Point
O ponto em que a curva é desenhada.

Comando de curva de Bézier quadrática suave

Cria uma curva de Bézier quadrática entre o ponto atual e o ponto final especificado. O ponto de controle é assumido ser a reflexão do ponto de controle do comando anterior relativo ao ponto atual. Caso não haja comando anterior ou caso o comando anterior não seja um comando de curva de Bézier quadrática ou um comando de curva de Bézier quadrática suave, suponha que o ponto de controle coincide com o ponto atual. Esse comando define o equivalente a uma PathGeometry com um QuadraticBezierSegment em que havia um segmento de curva precedente.

Sintaxe
TcontrolPointendPoint
- ou -
tcontrolPointendPoint
Termo Descrição
controlPoint Point
O ponto de controle da curva, que determina o início e tangente da curva.
Extremidade Point
O ponto em que a curva é desenhada.

Comando arco elíptico

Cria um arco elíptico entre o ponto atual e o ponto final especificado. Define o equivalente a um objeto PathGeometry com um ArcSegment.

Sintaxe
A sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
- ou -
a sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
Termo Descrição
size Tamanho
O raio de x e o raio de y do arco.
Rotationangle Double
A rotação da elipse, em graus.
isLargeArcFlag Definido como 1 se o ângulo do arco deva ser 180 graus ou maior. Caso contrário, defina como 0.
sweepDirectionFlag Definido como 1 se o arco é desenhado na direção ângulo-positiva. Caso contrário, defina como 0.
Extremidade Point
O ponto em que o arco é desenhado.

Comando Close

Termina a figura atual e cria uma linha que conecta o ponto atual ao ponto de partida da figura. Este comando cria uma linha-junção (canto) entre o último segmento e o primeiro segmento da figura.

Sintaxe
Z
- ou -
z

Sintaxe de ponto

Descreve as coordenadas x e y de um ponto. Consulte também Point.

Sintaxe
x,y
- ou -
xy
Termo Descrição
x Double
A coordenada X do ponto.
y Double
A coordenada Y do ponto.

Observações adicionais

Em vez de um valor numérico padrão, você também pode usar os seguintes valores especiais. Estes valores diferenciam maiúsculas de minúsculas.

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

Em vez de usar decimais ou inteiros, você pode usar notação científica. Por exemplo, +1.e17 é um valor válido.

Ferramentas de desenho que produzem comandos de movimentação e desenho

O uso da ferramenta Caneta e outras ferramentas de desenho no Blend for Microsoft Visual Studio 2015 geralmente produz um objeto Path, com comandos de movimentação e desenho.

É possível que você veja dados de comandos de movimentação e desenho existentes em algumas partes de controle definidas nos modelos padrão de controles do Windows Runtime XAML. Por exemplo, alguns controles usam um PathIcon que tem dados definidos como comandos de movimentação e desenho.

Há exportadores ou plug-ins disponíveis para outras ferramentas de desenho gráfico vetorial comuns que podem produzir o vetor na forma de XAML. Geralmente elas criam objetos Path em um contêiner de layout, com comandos de movimentação e desenho para Path.Data. Pode haver vários elementos Path no XAML, de modo que pincéis diferentes podem ser aplicados. Muitos desses exportadores ou plug-ins foram originalmente escritos para Windows Presentation Foundation (WPF) XAML ou Silverlight, mas a sintaxe do caminho XAML é idêntica a Windows Runtime XAML. Normalmente, você pode usar trechos de XAML de um exportador e colá-los diretamente em uma página XAML do Windows Runtime. (Contudo, você não poderá usar um RadialGradientBrush, se ele fazia parte do XAML convertido, porque o XAML do Windows Runtime não dá suporte ao pincel.)