Compartilhar via

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

  • Artigo

Xamarin.Forms A sintaxe de marcação de caminho permite especificar compactamente geometrias de caminho 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 opcional FillRule e uma ou mais descrições de figuras. 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 NonzeroFillRule. F0 é usado para especificar a EvenOdd regra de preenchimento, enquanto F1 é usado para especificar a regra de Nonzero preenchimento. Para obter mais informações sobre regras de preenchimento, consulte Xamarin.Forms Formas: regras de preenchimento.
  • figureDescription representa uma figura composta por um comando mover, comandos draw e um comando close opcional. Um comando move especifica o ponto inicial da figura. Os comandos Desenhar descrevem o conteúdo da figura e o comando opcional close fecha a figura.

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

Na sintaxe de marcação de caminho, os espaços não são necessários antes ou depois dos comandos. Além disso, dois números não precisam ser separados por uma vírgula ou espaço em branco, mas isso só pode ser alcançado quando a cadeia de caracteres é inequívoca.

Dica

A sintaxe de marcação de caminho é compatível com definições de caminho de imagem SVG (Scalable Vector Graphics) 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 Geometry objeto no código invocando o ConvertFromInvariantStringPathGeometryConverter método na classe:

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

Comando Mover

O comando move especifica o ponto inicial de uma nova figura. A sintaxe desse comando é: MstartPoint ou mstartPoint.

Nessa sintaxe, startPoint é uma Point estrutura que especifica o ponto inicial de uma nova figura. Se você listar vários pontos após o comando mover, 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 cúbica de Bezier (C ou c).
  • Curva de Bezier quadrática (Q ou q).
  • Curva cúbica de Bezier lisa (S ou s).
  • Curva de Bezier quadrática suave (T ou t).

Cada comando de desenho é especificado com uma letra que 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 line cria uma linha reta entre o ponto atual e o ponto final especificado. A sintaxe desse comando é: LendPoint ou lendPoint.

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 PathGeometry objeto, 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 desse comando é: Hx ou hx.

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 desse comando é: Vy ou vy.

Nessa 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 elliptical arc cria um arco elíptico entre o ponto atual e o ponto final especificado. A sintaxe desse comando é: AsizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint ou asizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint.

Nesta sintaxe:

  • size é um Size que representa os raios 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 deve ser 180 graus ou maior, 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 PathGeometry objeto, consulte Criar um ArcSegment.

Comando da curva de Bezier cúbica

O comando cúbico da curva de Bezier cria uma curva cúbica de Bezier entre o ponto atual e o ponto final especificado usando os dois pontos de controle especificados. A sintaxe desse comando é: CcontrolPoint1controlPoint2endPoint ouc controlPoint1controlPoint2 endPoint.

Nesta sintaxe:

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

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

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

Comando da curva de Bezier quadrática

O comando de curva de Bezier quadrática cria uma curva de Bezier quadrática entre o ponto atual e o ponto final especificado usando o ponto de controle especificado. A sintaxe desse comando é: QcontrolPointendPoint ouq controlPointendPoint.

Nesta sintaxe:

  • controlPoint é um Point que representa o ponto de controle da curva, que determina as tangentes de início e fim da curva.
  • endPoint é um Point que representa o ponto para 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 Bezier quadrática como um PathGeometry objeto, consulte Criar um QuadraticBezierSegment.

Comando da curva cúbica de Bezier suave

O comando smooth cubic Bezier curve cria uma curva cúbica de Bezier entre o ponto atual e o ponto final especificado usando o ponto de controle especificado. A sintaxe desse comando é: ScontrolPoint2endPoint ous controlPoint2 endPoint.

Nesta sintaxe:

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

O primeiro ponto de controle é assumido como sendo 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 cúbico de curva de Bezier ou um comando de curva de Bezier cúbico suave, o primeiro ponto de controle será assumido como coincidente com o ponto atual.

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

Comando de curva de Bezier quadrática suave

O comando de curva de Bezier quadrática suave cria uma curva de Bezier quadrática entre o ponto atual e o ponto final especificado usando um ponto de controle. A sintaxe desse comando é: TendPoint ou tendPoint.

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 Bezier quadrática ou um comando de curva de Bezier quadrática suave, o ponto de controle será assumido como coincidente com o ponto atual.

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

Comando Fechar

O comando close termina 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 segmento e o primeiro segmento da figura.

A sintaxe do comando close é: 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 a notação científica que não diferencia maiúsculas de minúsculas. Portanto, +1.e17 é um valor válido.