Compartilhar via

Xamarin.Forms Formas: Sintaxe de marcação de caminho

  • Artigo

Xamarin.Forms A sintaxe de marcação de caminho permite que você especifique geometrias de caminho de forma compacta em XAML. A sintaxe é especificada como um valor de cadeia de caracteres para a Path.Data propriedade:

<Path Stroke="Black"
      Data="M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z" />

A sintaxe de marcação de caminho é composta por um valor FillRule opcional e uma ou mais descrições de figura. Essa sintaxe pode ser expressa como: <Path Data="[fillRule] figureDescription [figureDescription] * " ... />

Nesta sintaxe:

  • fillRule é um opcional Xamarin.Forms.Shapes.FillRule que especifica se a geometria deve usar o EvenOdd ou Nonzero FillRule. F0 é usado para especificar a regra de preenchimento EvenOdd, enquanto F1 é usado para especificar a regra de preenchimento Nonzero. Para obter mais informações sobre regras de preenchimento, consulte Xamarin.Forms Formas: regras de preenchimento.
  • figureDescription representa uma figura composta por um comando de movimentação, comandos de desenho e um comando opcional de fechamento. Um comando de movimentação especifica o ponto inicial da figura. Os comandos de desenho descrevem o conteúdo da figura e o comando opcional de fechamento encerra a figura.

No exemplo acima, a sintaxe de marcação de caminho especifica um ponto inicial usando o comando de movimentação (M), uma série de linhas retas usando o comando de linha (L) e encerra o caminho com o comando de fechamento (Z).

Na sintaxe de marcação de caminho, não são necessários espaços antes ou depois dos comandos. Além disso, dois números podem não precisar estar separados por vírgula ou espaço em branco, desde que a cadeia de caracteres não gere ambiguidade.

Dica

A sintaxe de marcação de caminho é compatível com as definições de caminho de imagem SVG (Elementos Gráficos Vetoriais Escaláveis) e, portanto, pode ser útil para portar gráficos do formato SVG.

Embora a sintaxe de marcação de caminho seja destinada ao consumo em XAML, ela pode ser convertida em um objeto Geometry no código invocando o método ConvertFromInvariantString na classe PathGeometryConverter:

Geometry pathData = (Geometry)new PathGeometryConverter().ConvertFromInvariantString("M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z");

Comando de movimentação

O comando de movimentação especifica o ponto inicial de uma nova figura. A sintaxe deste comando é: M startPoint ou m startPoint.

Nessa sintaxe, startPoint é uma estrutura Point que especifica o ponto inicial de uma nova figura. Se você listar vários pontos após o comando de movimentação, uma linha será desenhada para esses pontos.

M 10,10 é um exemplo de um comando de movimentação válido.

Comandos de desenho

Um comando de desenho pode consistir em vários comandos de formas. Os seguintes comandos de desenho estão disponíveis:

  • Linha (L ou l).
  • Linha horizontal (H ou h).
  • Linha vertical (V ou v).
  • Arco elíptico (A ou a).
  • Curva de Bézier cúbica (C ou c).
  • Curva de Bézier quadrática (Q ou q).
  • Curva de Bézier cúbica suave (S ou s).
  • Curva do Bézier quadrática suave (T ou t).

Cada comando de desenho é especificado com uma letra que não diferencia maiúsculas de minúsculas. 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

O comando de linha cria uma linha reta entre o ponto atual e o ponto final especificado. A sintaxe deste comando é: L endPoint ou l endPoint.

Nessa sintaxe, endPoint é um Point que representa o ponto final da linha.

L 20,30 e L 20 30 são exemplos de comandos de linha válidos.

Para obter informações sobre como criar uma linha reta como um objeto PathGeometry, consulte Criar um LineSegment.

Comando de linha horizontal

O comando de linha horizontal cria uma linha horizontal entre o ponto atual e a coordenada x especificada. A sintaxe deste comando é: H x ou h x.

Nessa sintaxe, x é um double que representa a coordenada x do ponto final da linha.

H 90 é um exemplo de um comando de linha horizontal válido.

Comando de linha vertical

O comando de linha vertical cria uma linha vertical entre o ponto atual e a coordenada y especificada. A sintaxe deste comando é: V y ou v y.

Nesta sintaxe, y é um double que representa a coordenada y do ponto final da linha.

V 90 é um exemplo de um comando de linha vertical válido.

Comando de arco elíptico

O comando de arco elíptico cria um arco elíptico entre o ponto atual e o ponto final especificado. A sintaxe desse comando é: A size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint ou a size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint.

Nesta sintaxe:

  • size é um Size que representa o raio x e y do arco.
  • rotationAngle é um double que representa a rotação da elipse, em graus.
  • isLargeArcFlag deve ser definido como 1 se o ângulo do arco for igual ou superior a 180 graus, caso contrário, defina-o como 0.
  • sweepDirectionFlag deve ser definido como 1 se o arco for desenhado em uma direção de ângulo positivo, caso contrário, defina-o como 0.
  • endPoint é um Point para o qual o arco é desenhado.

A 150,150 0 1,0 150,-150 é um exemplo de um comando de arco elíptico válido.

Para obter informações sobre como criar um arco elíptico como um objeto PathGeometry, consulte Criar um ArcSegment.

Comando de curva de Bézier cúbica

O 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. A sintaxe deste comando é: C controlPoint1 controlPoint2 endPoint ou c controlPoint1 controlPoint2 endPoint.

Nesta sintaxe:

  • controlPoint1 é um Point que representa o primeiro ponto de controle da curva, que determina a tangente inicial dela.
  • controlPoint2 é um Point que representa o segundo ponto de controle da curva, que determina a tangente final dela.
  • endPoint é um Point que representa o ponto até o qual a curva é desenhada.

C 100,200 200,400 300,200 é um exemplo de um comando de curva de Bézier cúbica válido.

Para obter informações sobre como criar uma curva de Bézier cúbica como um objeto PathGeometry, consulte Criar um BezierSegment.

Comando de curva de Bézier quadrática

O 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. A sintaxe deste comando é: Q controlPoint endPoint ou q controlPoint endPoint.

Nesta sintaxe:

  • controlPoint é um Point que representa o ponto de controle da curva, que determina suas tangentes inicial e final.
  • endPoint é um Point que representa o ponto até o qual a curva é desenhada.

Q 100,200 300,200 é um exemplo de um comando de curva de Bezier quadrática válido.

Para obter informações sobre como criar uma curva de Bézier quadrática como um objeto PathGeometry, consulte Criar um QuadraticBezierSegment.

Comando de curva de Bézier cúbica suave

O 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 usando o ponto de controle especificado. A sintaxe deste comando é: S controlPoint2 endPoint ou s controlPoint2 endPoint.

Nesta sintaxe:

  • controlPoint2 é um Point que representa o segundo ponto de controle da curva, que determina a tangente final dela.
  • endPoint é um Point que representa o ponto até o qual a curva é desenhada.

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 for um comando de curva de Bézier cúbica ou um comando de curva de Bézier cúbica suave, assume-se que o primeiro ponto de controle coincide com o ponto atual.

S 100,200 200,300 é um exemplo de um comando válido de curva de Bézier cúbica suave.

Comando de curva de Bézier quadrática suave

O comando de curva de Bezier quadrática suave cria uma curva de Bézier quadrática entre o ponto atual e o ponto final especificado usando um ponto de controle. A sintaxe deste comando é: T endPoint ou t endPoint.

Nessa sintaxe, endPoint é um Point que representa o ponto para o qual a curva é desenhada.

O ponto de controle é assumido ser a reflexão do ponto de controle do comando anterior relativo ao ponto atual. Se não houver nenhum comando anterior, ou se o comando anterior não for uma curva de Bézier quadrática ou um comando de curva de Bézier quadrática suave, assume-se que o ponto de controle coincide com o ponto atual.

T 100,30 é um exemplo de um comando válido de curva de Bézier cúbica quadrática suave.

Comando de fechamento

O comando de fechamento encerra a figura atual e cria uma linha que conecta o ponto atual ao ponto inicial da figura. Portanto, esse comando cria uma junção de linha entre o último e o primeiro segmento da figura.

A sintaxe do comando de fechamento é: Z ou z.

Valores adicionais

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

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

Além disso, você também pode usar notação científica que não diferencie maiúsculas de minúsculas. Portanto, +1.e17 é um valor válido.