Condividi tramite

Xamarin.Forms Forme: sintassi di markup del percorso

  • Articolo

Xamarin.Forms La sintassi di markup del percorso consente di specificare in modo compatto le geometrie del percorso in XAML. La sintassi viene specificata come valore stringa per la Path.Data proprietà :

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

La sintassi di markup del percorso è costituita da un valore facoltativo FillRule e da una o più descrizioni di figura. Questa sintassi può essere espressa come: <Path Data="[fillRule]figureDescription[figureDescription] * " ... />

In questa sintassi:

  • fillRule è un elemento facoltativo Xamarin.Forms.Shapes.FillRule che specifica se la geometria deve utilizzare o NonzeroEvenOddFillRule. F0 viene utilizzato per specificare la EvenOdd regola di riempimento, mentre F1 viene usata per specificare la Nonzero regola di riempimento. Per altre informazioni sulle regole di riempimento, vedere Xamarin.Forms Forme: Regole di riempimento.
  • figureDescription rappresenta una figura composta da un comando di spostamento, da comandi di disegno e da un comando di chiusura facoltativo. Un comando di spostamento specifica il punto iniziale della figura. I comandi di disegno descrivono il contenuto della figura e il comando di chiusura facoltativo chiude la figura.

Nell'esempio precedente, la sintassi di markup del percorso specifica un punto iniziale usando il comando move (M), una serie di linee retta usando il comando della riga (L) e chiude il percorso con il comando close (Z).

Nella sintassi di markup del percorso gli spazi non sono necessari prima o dopo i comandi. Inoltre, due numeri non devono essere separati da una virgola o da uno spazio vuoto, ma questo può essere ottenuto solo quando la stringa non è ambigua.

Suggerimento

La sintassi di markup path è compatibile con le definizioni di percorso di immagine SVG (Scalable Vector Graphics) e quindi può essere utile per la conversione della grafica dal formato SVG.

Mentre la sintassi di markup del percorso è destinata all'utilizzo in XAML, può essere convertita in un Geometry oggetto nel codice richiamando il ConvertFromInvariantString metodo nella PathGeometryConverter classe :

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

Comando di spostamento

Il comando di spostamento specifica il punto iniziale di una nuova figura. La sintassi per questo comando è: MstartPoint o mstartPoint.

In questa sintassi startPoint è una Point struttura che specifica il punto iniziale di una nuova figura. Se si elencano più punti dopo il comando di spostamento, viene disegnata una riga in tali punti.

M 10,10 è un esempio di un comando di spostamento valido.

Comandi di disegno

Un comando di disegno può essere costituito da diversi comandi di forma. Sono disponibili i comandi di disegno seguenti:

  • Riga (L o l).
  • Linea orizzontale (H o h).
  • Linea verticale (V o v).
  • Arco ellittico (A o a).
  • Curva di Bézier cubica (C o c).
  • Curva quadratica di Bézier (Q o q).
  • Curva di Bézier cubica liscia (S o s).
  • Curva quadratica uniforme di Bézier (T o t).

Ogni comando di disegno viene specificato con una lettera senza distinzione tra maiuscole e minuscole. Quando si inseriscono più comandi dello stesso tipo in sequenza, è possibile evitare di ripetere l'immissione del comando. Ad esempio L 100,200 300,400 , equivale a L 100,200 L 300,400.

Comando linea

Il comando della riga crea una linea retta tra il punto corrente e il punto finale specificato. La sintassi per questo comando è: LendPoint o lendPoint.

In questa sintassi endPoint è un Point oggetto che rappresenta il punto finale della riga.

L 20,30 e L 20 30 sono esempi di comandi linea validi.

Per informazioni sulla creazione di una linea retta come PathGeometry oggetto, vedere Creare un oggetto LineSegment.

Comando linea orizzontale

Il comando della riga orizzontale crea una linea orizzontale tra il punto corrente e la coordinata x specificata. La sintassi per questo comando è: Hx o hx.

In questa sintassi, x è un double oggetto che rappresenta la coordinata x del punto finale della linea.

H 90 è un esempio di comando di linea orizzontale valido.

Comando linea verticale

Il comando della riga verticale crea una riga verticale tra il punto corrente e la coordinata y specificata. La sintassi per questo comando è: Vy o vy.

In questa sintassi , y è un oggetto double che rappresenta la coordinata y del punto finale della linea.

V 90 è un esempio di comando di linea verticale valido.

Comando arco ellittico

Il comando arco ellittico crea un arco ellittico tra il punto corrente e il punto finale specificato. La sintassi per questo comando è: ArotationAngleisLargeArcFlagsweepDirectionFlagendPoint or asizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint.

In questa sintassi:

  • size è un Size oggetto che rappresenta il raggio x e y dell'arco.
  • rotationAngle è un double oggetto che rappresenta la rotazione dell'ellisse, espressa in gradi.
  • isLargeArcFlag deve essere impostato su 1 se l'angolo dell'arco deve essere di 180 gradi o superiore, altrimenti impostarlo su 0.
  • sweepDirectionFlag deve essere impostato su 1 se l'arco viene disegnato in direzione dell'angolo positivo; in caso contrario, impostarlo su 0.
  • endPoint è un Point oggetto al quale viene disegnato l'arco.

A 150,150 0 1,0 150,-150 è un esempio di un comando di arco ellittico valido.

Per informazioni sulla creazione di un arco ellittico come PathGeometry oggetto , vedere Creare un arco arcSegment.

Comando curva di Bézier cubico

Il comando curva di Bézier cubica crea una curva di Bézier cubica tra il punto corrente e il punto finale specificato usando i due punti di controllo specificati. La sintassi per questo comando è: CcontrolPoint1controlPoint2endPoint o ccontrolPoint1controlPoint2 endPoint2.

In questa sintassi:

  • controlPoint1 è un oggetto Point che rappresenta il primo punto di controllo della curva, che determina la tangente iniziale della curva.
  • controlPoint2 è un oggetto Point che rappresenta il secondo punto di controllo della curva, che determina la tangente finale della curva.
  • endPoint è un oggetto Point che rappresenta il punto a cui viene disegnata la curva.

C 100,200 200,400 300,200 è un esempio di comando di curva di Bézier cubica valido.

Per informazioni sulla creazione di una curva di Bézier cubica come PathGeometry oggetto, vedere Creare un bezierSegment.

Comando curva di Bézier quadratico

Il comando curva quadratica di Bézier crea una curva quadratica di Bézier tra il punto corrente e il punto finale specificato usando il punto di controllo specificato. La sintassi per questo comando è: QendPoint controlPoint oq controlPoint endPoint.

In questa sintassi:

  • controlPoint è un oggetto Point che rappresenta il punto di controllo della curva, che determina le tangenti iniziali e finali della curva.
  • endPoint è un oggetto Point che rappresenta il punto a cui viene disegnata la curva.

Q 100,200 300,200 è un esempio di comando di curva di Bézier quadratica valido.

Per informazioni sulla creazione di una curva di Bézier quadratica come PathGeometry oggetto, vedere Creare un quadraticoBezierSegment.

Comando curva di Bézier cubica uniforme

Il comando curva di Bézier cubica uniforme crea una curva di Bézier cubica tra il punto corrente e il punto finale specificato usando il punto di controllo specificato. La sintassi per questo comando è: ScontrolPoint2endPoint os controlPoint2 endPoint.

In questa sintassi:

  • controlPoint2 è un oggetto Point che rappresenta il secondo punto di controllo della curva, che determina la tangente finale della curva.
  • endPoint è un oggetto Point che rappresenta il punto a cui viene disegnata la curva.

Si presuppone che il primo punto di controllo sia la reflection del secondo punto di controllo del comando precedente, rispetto al punto corrente. Se non è presente alcun comando precedente o il comando precedente non era un comando di curva di Bézier cubica o un comando di curva di Bézier cubica uniforme, si presuppone che il primo punto di controllo sia coincidente con il punto corrente.

S 100,200 200,300 è un esempio di comando di curva di Bézier cubica uniforme valido.

Comando Curvo quadratico quadratico uniforme

Il comando curva quadratica quadratica di Bézier crea una curva di Bézier quadratica tra il punto corrente e il punto finale specificato usando un punto di controllo. La sintassi per questo comando è: TendPoint o tendPoint.

In questa sintassi endPoint è un oggetto Point che rappresenta il punto a cui viene disegnata la curva.

Il punto di controllo viene considerato come reflection del punto di controllo del comando precedente relativo al punto corrente. Se non è presente alcun comando precedente o se il comando precedente non era una curva quadratica di Bézier o un comando di curva di Bézier quadratico uniforme, si presuppone che il punto di controllo sia coincidente con il punto corrente.

T 100,30 è un esempio di un comando di curva di Bézier quadratico quadratico valido.

Comando di chiusura

Il comando close termina la figura corrente e crea una riga che collega il punto corrente al punto iniziale della figura. Di conseguenza, questo comando crea un join di riga tra l'ultimo segmento e il primo segmento della figura.

La sintassi per il comando close è: Z o z.

Valori aggiuntivi

Anziché un valore numerico standard, è anche possibile usare i valori speciali con distinzione tra maiuscole e minuscole seguenti:

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

Inoltre, è anche possibile usare notazione scientifica senza distinzione tra maiuscole e minuscole. Pertanto, +1.e17 è un valore valido.