Xamarin.Forms Formas: sintaxe de marcação de caminho
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 oEvenOdd
ouNonzero
FillRule
.F0
é usado para especificar aEvenOdd
regra de preenchimento, enquantoF1
é usado para especificar a regra deNonzero
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 ConvertFromInvariantString
PathGeometryConverter
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 é: M
startPoint ou m
startPoint.
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
oul
). - Linha horizontal (
H
ouh
). - Linha vertical (
V
ouv
). - Arco elíptico (
A
oua
). - Curva cúbica de Bezier (
C
ouc
). - Curva de Bezier quadrática (
Q
ouq
). - Curva cúbica de Bezier lisa (
S
ous
). - Curva de Bezier quadrática suave (
T
out
).
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 é: 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 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 é: 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 desse comando é: V
y ou v
y.
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 é: A
sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint ou a
sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint.
Nesta sintaxe:
size
é umSize
que representa os raios x e y do arco.rotationAngle
é umdouble
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
é umPoint
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 é: C
controlPoint1controlPoint2endPoint 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 é: Q
controlPointendPoint 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 é: S
controlPoint2endPoint 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 é: 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 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
representadouble.PositiveInfinity
.-Infinity
representadouble.NegativeInfinity
.NaN
representadouble.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.