Compartilhar via


Sintaxe de comandos de movimentação e desenho

Saiba mais sobre os comandos de movimentação e desenho (uma mini-linguagem) 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 muitas ferramentas de design e gráficos que podem gerar um gráfico ou forma de vetor, como um formato de serialização e intercâmbio.

Propriedades que usam cadeias de caracteres de comando mover e desenhar

A sintaxe de comandos mover e desenhar é suportada por um conversor de tipo interno para XAML, que analisa os comandos e produz uma representação gráfica em tempo de execução. Essa representação é basicamente um conjunto concluído de vetores que está pronto para apresentação. Os próprios vetores não completam os detalhes da apresentação; você ainda precisará definir outros valores nos elementos. Para um objeto Path , você também precisa de valores para Preenchimento, Traço e outras propriedades e, em seguida, esse Caminho deve ser conectado à árvore visual de alguma forma. Para um objeto PathIcon , defina a propriedade Foreground .

Há duas propriedades no Windows Runtime que podem usar uma cadeia de caracteres que representa comandos de movimentação e desenho: Path.Data e PathIcon.Data. Se você definir uma dessas propriedades especificando comandos de movimentação e desenho, normalmente você a definirá como um valor de atributo XAML, juntamente com outros atributos necessários desse elemento. Sem entrar nos detalhes, é assim que isso se apresenta:

<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" />

Usando comandos de movimentação e desenho em comparação com o uso de um PathGeometry

Para o XAML do Windows Runtime, os comandos move e draw produzem um PathGeometry com um único objeto PathFigure, que tem como valor a propriedade Figures. Cada comando de desenho produz uma classe derivada PathSegment na coleção Segments daquele único PathFigure, o comando de movimento altera o StartPoint e a presença de um comando de fechamento define IsClosed como true (verdadeiro). Você pode navegar por essa estrutura como um modelo de objeto se examinar os valores de dados durante a execução.

A sintaxe básica

A sintaxe para comandos de movimentação e desenho pode ser resumida desta forma:

  1. Comece com uma regra de preenchimento opcional. Normalmente, você especifica isso somente se não quiser o padrão EvenOdd . (Mais sobre EvenOdd mais tarde.)
  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 close, mas isso deixaria sua figura aberta (isso é incomum).

As regras gerais dessa sintaxe são:

  • Cada comando é representado por exatamente uma letra.
  • Essa letra pode ser maiúscula ou minúscula. Caso importa, como descreveremos.
  • Cada comando, exceto o comando close, normalmente é seguido por um ou mais números.
  • Se houver mais de um número para um comando, separe com uma vírgula ou espaço.

[fillRule]moveCommanddrawCommand[drawCommand*][closeCommand]

Muitos dos comandos de desenho usam pontos, em que você fornece um valor x,y . Sempre que você vir um marcador de posição *points, pode assumir que está fornecendo dois valores decimais para as coordenadas x,y de um ponto.

O espaço em branco geralmente pode ser omitido quando o resultado não é ambíguo. Na verdade, você pode omitir todo o espaço em branco se usar vírgulas como separador para todos os conjuntos de números (pontos e tamanho). Por exemplo, esse uso é legal: F1M0,58L2,56L6,60L13,51L15,53L6,64z. Mas é mais comum incluir espaço em branco entre comandos para maior clareza.

Não use vírgulas como o ponto decimal para números decimais; a cadeia de caracteres de comando é interpretada por XAML e não conta para convenções de formatação de número específicas da cultura que diferem daquelas usadas na localidade en-us .

Específicos da sintaxe

Regra de preenchimento

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

Comando Mover

Especifica o ponto inicial de uma nova figura.

Sintaxe
M startPoint
- ou -
m startPoint
Prazo Description
startPoint Ponto
O ponto inicial de uma nova figura.

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

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

Comandos de desenho

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

Para todos os comandos de desenho, o caso importa. Letras maiúsculas denotam coordenadas absolutas e letras minúsculas denotam 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 de um objeto LineGeometry .

Sintaxe
L endPoint
- ou -
l endpoint
Prazo Description
endpoint Ponto
O ponto final 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
Prazo Description
x Duplicar
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
Prazo Description
y Duplicar
A coordenada y do ponto final da linha.

Comando de curva Bézier cúbica

Cria uma curva de Bézier cúbica entre o ponto atual e o ponto de extremidade 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 de um objeto PathGeometry com um objeto BezierSegment .

Sintaxe
C controlPoint1controlPoint2endPoint
-ou-
c controlPoint1controlPoint2endPoint
Prazo Description
controlPoint1 Ponto
O primeiro ponto de controle da curva, que determina a tangente inicial da curva.
controlPoint2 Ponto
O segundo ponto de controle da curva, que determina a tangente final da curva.
endpoint Ponto
O ponto para o qual a curva é desenhada.

Comando de curva quadrática de Bézier

Cria uma curva Bézier quadrática entre o ponto atual e o ponto de extremidade 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 de um PathGeometry com um QuadraticBezierSegment.

Sintaxe
Q ponto de extremidade do controlPoint
-ou-
q ponto de extremidade do controlPoint
Prazo Description
controlPoint Ponto
O ponto de controle da curva, que determina as tangentes inicial e final da curva.
Endpoint Ponto
O ponto para o qual a curva é desenhada.

Comando de curva Bézier cúbica suave

Cria uma curva de Bézier cúbica entre o ponto atual e o ponto de extremidade especificado. Supõe-se que o primeiro ponto de controle seja o reflexo do segundo ponto de controle do comando anterior em relação ao ponto atual. Se não houver nenhum comando anterior ou se o comando anterior não fosse um comando de curva Bézier cúbico ou um comando de curva Bézier cúbico suave, suponha que o primeiro ponto de controle seja coincidente com o ponto atual. O segundo ponto de controle, o ponto de controle para o final da curva, é especificado pelo controlPoint2. Por exemplo, S 100,200 200,300 é um comando válido de curva Bézier cúbica suave. Esse comando define o equivalente a um PathGeometry com um BezierSegment em que havia segmento de curva anterior.

Sintaxe
S controlPoint2endPoint
-ou-
s controlPoint2 ponto de extremidade
Prazo Description
controlPoint2 Ponto
O ponto de controle da curva, que determina a tangente final da curva.
Ponto de Extremidade Ponto
O ponto para o qual a curva é desenhada.

Comando de curva Bézier quadrática suave

Cria uma curva Bézier quadrática entre o ponto atual e o ponto de extremidade especificado. Supõe-se que o ponto de controle seja o reflexo do ponto de controle do comando anterior em relação ao ponto atual. Se não houver nenhum comando anterior ou se o comando anterior não fosse um comando de curva Bézier quadrático ou um comando de curva Bézier quadrático suave, o ponto de controle coincidirá com o ponto atual. Esse comando define o equivalente de um PathGeometry com um QuadraticBezierSegment, onde havia um segmento de curva anterior.

Sintaxe
T ponto finalcontrolPoint
-ou-
t ponto de controleponto de extremidade
Prazo Description
controlPoint Ponto
O ponto de controle da curva, que determina a inicialização e a tangente da curva.
endPoint Ponto
O ponto para o qual a curva é desenhada.

Comando arco elíptico

Cria um arco elíptico entre o ponto atual e o ponto de extremidade especificado. Define o equivalente de um PathGeometry com um ArcSegment.

Sintaxe
A sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
- ou -
a sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
Prazo Description
tamanho Tamanho
O raio-x e o raio-y do arco.
rotationAngle Duplicar
A rotação da elipse, em graus.
isLargeArcFlag Defina como 1 se o ângulo do arco deve ser 180 graus ou maior; caso contrário, defina como 0.
sweepDirectionFlag Defina como 1 se o arco for desenhado em uma direção de ângulo positivo; caso contrário, defina como 0.
endpoint Ponto
O ponto onde o arco é desenhado.

Fechar comando

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

Sintaxe
Z
- ou -
z

Sintaxe de ponto

Descreve a coordenada x e a coordenada y de um ponto. Consulte também Point.

Sintaxe
x,y
-ou-
xy
Prazo Description
x Duplo
A coordenada x do ponto.
y Duplicar
A coordenada y do ponto.

Notas adicionais

Em vez de um valor numérico padrão, você também pode usar os valores especiais a seguir. Estes valores são sensíveis a maiúsculas e minúsculas.

  • Infinito: representa PositiveInfinity.
  • -Infinito: 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 design que produzem comandos de movimentação e desenho

Usar a ferramenta Caneta e outras ferramentas de desenho no Blend para Microsoft Visual Studio 2015 geralmente produzirá um objeto Path , com comandos de movimentação e desenho.

Você pode ver dados de comandos de movimentação e desenho existentes em algumas partes de controle definidas nos modelos padrão XAML do Windows Runtime para controles. Por exemplo, alguns controles usam um PathIcon que tem os dados definidos como comandos de movimentação e desenho.

Há exportadores ou plug-ins disponíveis para outras ferramentas de design de vetor-gráficos comumente usadas que podem gerar o vetor no formato XAML. Geralmente, eles 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 para que diferentes pincéis possam ser aplicados. Muitos desses exportadores ou plug-ins foram originalmente escritos para o XAML ou Silverlight do WPF (Windows Presentation Foundation), mas a sintaxe do caminho XAML é idêntica ao XAML do Windows Runtime. Normalmente, você pode usar partes de XAML de um exportador e colá-las diretamente em uma página XAML do Windows Runtime. (No entanto, você não poderá usar um RadialGradientBrush, se isso fez parte do XAML convertido, porque o XAML do Windows Runtime não dá suporte a esse pincel.)