Sintaxe dos comandos Mover e Desenhar

Saiba mais sobre os comandos mover e desenhar (uma minilinguagem) que você pode usar para especificar geometrias de caminho como um valor de atributo XAML. Os comandos Mover e desenhar são usados por muitas ferramentas de design e gráficos que podem produzir um gráfico vetorial ou forma, como um formato de serialização e intercâmbio.

Propriedades que usam cadeias de comandos de mover e desenhar

A sintaxe do comando move and draw é 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. Esta representação é basicamente um conjunto acabado de vetores que está pronto para apresentação. Os vetores em si 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 Fill, Stroke e outras propriedades e, em seguida, esse Path deve ser conectado à árvore visual de alguma forma. Para um objeto PathIcon , defina a propriedade Foreground .

Há duas propriedades no Tempo de Execução do Windows que podem usar uma cadeia de caracteres que representa os comandos mover e desenhar: Path.Data e PathIcon.Data. Se você definir uma dessas propriedades especificando comandos move e draw, normalmente a define como um valor de atributo XAML junto com outros atributos necessários desse elemento. Sem entrar em detalhes, aqui está o que parece:

<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 mover e desenhar versus usando um PathGeometry

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

A sintaxe básica

A sintaxe dos comandos mover e desenhar pode ser resumida assim:

1. Comece com uma regra de preenchimento opcional. Normalmente, você especifica isso apenas se não quiser o padrão EvenOdd . (Mais sobre EvenOdd mais tarde.)
2. Especifique exatamente um comando move.
3. Especifique um ou mais comandos de desenho.
4. Especifique um comando close. Você pode omitir um comando fechar, mas isso deixaria o seu gráfico aberto (o que é incomum).

As regras gerais desta sintaxe são:

• Cada comando é representado por exatamente uma letra.
• Essa letra pode ser maiúscula ou minúscula. O 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, onde você fornece um valor x,y . Sempre que vir um marcador de posição *points, pode assumir que está a dar dois valores decimais para o valor x,y de um ponto.

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

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

Especificidades 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 , então você normalmente não o especifica. Use F1 para obter o comportamento de preenchimento Nonzero. Esses valores de preenchimento se alinham com os valores da enumeração FillRule .

Comando Mover

Especifica 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 houve nenhum ponto anterior.

Observação É legal especificar vários pontos após o comando move. Uma linha é desenhada nesses pontos como se você tivesse especificado o comando line. No entanto, esse não é um estilo recomendado; em vez disso, use o comando de linha dedicada.

Comandos de Desenho

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

Para todos os comandos de desenho, as maiúsculas e minúsculas são importantes. Letras maiúsculas denotam coordenadas absolutas e letras minúsculas denotam coordenadas relativas ao comando anterior.

Os pontos de controle para 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 LineGemetry .

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.

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.

Comando da curva cúbica de Bézier

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

Comando da curva quadrática de Bézier

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 de Bézier quadrático válido. Define o equivalente a um PathGeometry com um QuadraticBezierSegment.

Comando de curva de Bézier cúbica suave

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

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. Assume-se que o ponto de controlo é o reflexo do ponto de controlo do comando anterior em relação ao ponto atual. Se não houver nenhum comando anterior ou se o comando anterior não foi um comando de curva de Bézier quadrático ou um comando de curva de Bézier quadrático suave, o ponto de controle é coincidente com o ponto atual. Este comando define o equivalente a um PathGeometry com um QuadraticBezierSegment onde havia um segmento de curva precedente.

Comando de arco elíptico

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

Comando Fechar

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

Sintaxe de ponto

Descreve as coordenadas x e y de um ponto. Ver também Ponto.

Notas adicionais

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

• Infinito: Representa PositiveInfinity.
• -Infinito: Representa Infinito Negativo.
• 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 mover e desenhar

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

Você pode ver dados de comando de mover e desenhar existentes em alguns dos componentes de controlo definidos nos modelos padrão do XAML do Windows Runtime para controlos. Por exemplo, alguns controlos usam um PathIcon que tem os dados definidos como comandos de mover e desenhar.

Há exportadores ou plug-ins disponíveis para outras ferramentas de design de gráficos vetoriais comumente usadas que podem gerar o vetor no formato XAML. Eles geralmente criam objetos Path em um contêiner de layout, com comandos move e draw para Path.Data. Pode haver vários elementos Path no XAML para que pincéis diferentes possam ser aplicados. Muitos desses exportadores ou plug-ins foram originalmente escritos para XAML ou Silverlight do Windows Presentation Foundation (WPF), 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 Tempo de Execução do Windows. (No entanto, você não poderá usar um RadialGradientBrush, se isso fizer parte do XAML convertido, porque o XAML do Tempo de Execução do Windows não oferece suporte a esse pincel.)

Tópicos relacionados

• Desenhar formas
• Use escovas
• Path.Data
• Ícone de caminho