Sintassi dei comandi di spostamento e disegno

  • Articolo

Informazioni sui comandi di spostamento e disegno (un mini-linguaggio) che è possibile usare per specificare geometrie di percorso come valore di attributo XAML. I comandi di spostamento e disegno vengono usati da molti strumenti di progettazione e grafica che possono restituire un elemento grafico vettoriale o una forma, come formato di serializzazione e interscambio.

Proprietà che usano stringhe di comando di spostamento e disegno

La sintassi dei comandi di spostamento e disegno è supportata da un convertitore di tipi interno per XAML, che analizza i comandi e produce una rappresentazione grafica in fase di esecuzione. Questa rappresentazione è fondamentalmente un set finito di vettori pronti per la presentazione. I vettori stessi non completano i dettagli della presentazione e sarà comunque necessario impostare altri valori sugli elementi. Per un oggetto Path sono anche necessari valori per Fill, Stroke e altre proprietà, quindi Path deve essere connesso in qualche modo alla struttura ad albero visuale. Per un oggetto PathIcon, impostare la proprietà Foreground.

In Windows Runtime sono disponibili due proprietà che possono usare una stringa che rappresenta comandi di spostamento e disegno: Path.Data e PathIcon.Data. Se si imposta una di queste proprietà specificando comandi di spostamento e disegno, in genere la si imposta come valore di attributo XAML insieme ad altri attributi obbligatori di quell'elemento. Senza entrare nei dettagli, dovrebbe essere simile a quanto riportato di seguito:

<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" />

Uso dei comandi di spostamento e disegno e uso di PathGeometry

Per XAML di Windows Runtime, i comandi di spostamento e disegno producono un elemento PathGeometry con un singolo oggetto PathFigure con un valore di proprietà Figures. Ogni comando di disegno produce una classe derivata PathSegment nella raccolta Segments di PathFigure, il comando di spostamento cambia StartPoint e la presenza di un comando di chiusura imposta IsClosed su true. È possibile esplorare questa struttura come modello a oggetti se si esaminano i valori Data in fase di esecuzione.

La sintassi di base

La sintassi dei comandi di spostamento e disegno può essere riepilogata nel modo seguente:

  1. Iniziare con una regola di riempimento facoltativa. In genere si specifica questa opzione solo se non si vuole usare il valore predefinito EvenOdd. (Altre informazioni su EvenOdd più avanti.)
  2. Specificare esattamente un comando di spostamento.
  3. Specificare uno o più comandi di disegno.
  4. Specificare un comando di chiusura. È possibile omettere un comando di chiusura, ma così facendo si lascerebbe aperta la figura (non comune).

Le regole generali di questa sintassi sono:

  • Ogni comando è rappresentato esattamente da una sola lettera.
  • Questa lettera può essere maiuscola o minuscola. La distinzione tra maiuscole e minuscole conta, come si specificherà.
  • Ogni comando, ad eccezione del comando di chiusura, è in genere seguito da uno o più numeri.
  • Se esiste più di un numero per un comando, separare con una virgola o uno spazio.

[fillRule]moveCommanddrawCommand[drawCommand*][closeCommand]

Molti dei comandi di disegno usano punti, dove si fornisce un valore x,y. Ogni volta che si vede un segnaposto *points, si può presumere di fornire due valori decimali per il valore x,y di un punto.

Lo spazio vuoto può essere spesso omesso quando il risultato non è ambiguo. È possibile di fatto omettere tutti gli spazi vuoti se si usano virgole come separatore per tutti i set di numeri (punti e dimensioni). Ad esempio, questo utilizzo è legittimo: F1M0,58L2,56L6,60L13,51L15,53L6,64z. Tuttavia, per maggiore chiarezza è più tipico includere spazi vuoti tra i comandi.

Non usare virgole come separatore decimale per i numeri decimali; la stringa di comando viene interpretata da XAML e non tiene conto delle convenzioni di formattazione dei numeri specifiche delle impostazioni cultura che si differenziano da quelle usante nelle impostazioni locali en-us.

Specifiche della sintassi

Regola di riempimento

Esistono due valori possibili per la regola di riempimento facoltativa: F0 o F1. (L'oggetto F è sempre maiuscolo.) F0 è il valore predefinito; produce il comportamento di riempimento EvenOdd, pertanto in genere non lo si specifica. Usare F1 per ottenere il comportamento di riempimento Nonzero. Questi valori di riempimento sono allineati ai valori dell'enumerazione FillRule.

Comando di spostamento

Specifica il punto iniziale di una nuova figura.

Sintassi
M startPoint
- oppure -
mstartPoint
Termine Descrizione
startPoint Point
Punto iniziale di una nuova figura.

Un valore M (Maiuscolo) indica che startPoint è una coordinata assoluta; un valore m (minuscolo) indica che startPoint è un offset rispetto al punto precedente oppure (0,0) in assenza di punti precedenti.

Nota È consentito specificare più punti dopo il comando di spostamento. Viene disegnata una riga a questi punti come se si fosse specificato il comando linea. Questo, tuttavia, non è uno stile consigliato, usare invece il comando linea dedicato.

Comandi di disegno

Un comando di disegno può includere diversi comandi forma: linea, linea orizzontale, linea verticale, curva di Bézier cubica, curva di Bézier quadratica, curva di Bézier cubica continua, curva di Bézier quadratica continua e arco ellittico.

Per tutti i comandi di disegno, la distinzione tra maiuscole e minuscole conta. Le lettere maiuscole indicano coordinate assolute, mentre le lettere minuscole indicano le coordinate relative al comando precedente.

I punti di controllo per un segmento sono relativi al punto finale del segmento precedente. 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

Crea una linea retta tra il punto corrente e il punto finale specificato. l 20 30 e L 20,30 sono esempi di comandi linea validi. Definisce l'equivalente di un oggetto LineGeometry.

Sintassi
LendPoint
- oppure -
lendPoint
Termine Descrizione
endPoint Point
Punto finale della linea.

Comando linea orizzontale

Crea una linea orizzontale tra il punto corrente e la coordinata x specificata. H 90 è un esempio di comando di linea orizzontale valido.

Sintassi
H x
- oppure -
h x
Termine Descrizione
x Double
Coordinata x del punto finale della linea.

Comando linea verticale

Crea una linea verticale tra il punto corrente e la coordinata y specificata. v 90 è un esempio di comando di linea verticale valido.

Sintassi
V y
- oppure -
v y
Termine Descrizione
y Double
Coordinata y del punto finale della linea.

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 (controlPoint1 e controlPoint2). C 100,200 200,400 300,200 è un esempio di comando di curva valido. Definisce l'equivalente di un oggetto PathGeometry con un oggetto BezierSegment.

Sintassi
C controlPoint1controlPoint2endPoint
- oppure -
c controlPoint1controlPoint2endPoint
Termine Descrizione
controlPoint1 Point
Primo punto di controllo della curva, che determina la tangente iniziale della curva.
controlPoint2 Point
Secondo punto di controllo della curva, che determina la tangente finale della curva.
endPoint Point
Punto verso il quale viene disegnata la curva.

Comando curva di Bézier quadratrica

Crea una curva di Bézier quadratica tra il punto corrente e il punto finale specificato usando il punto di controllo specificato (controlPoint). q 100,200 300,200 è un esempio di comando di curva di Bézier quadratica valido. Definisce l'equivalente di PathGeometry con QuadraticBezierSegment.

Sintassi
Q controlPoint endPoint
- oppure -
q controlPoint endPoint
Termine Descrizione
controlPoint Point
Punto di controllo della curva, che determina le tangenti iniziale e finale della curva.
endPoint Point
Punto verso il quale viene disegnata la curva.

Comando curva di Bézier cubica continua

Crea una curva di Bézier cubica tra il punto corrente e il punto finale specificato. Il primo punto di controllo viene considerato come reflection del secondo punto di controllo del comando precedente relativo al punto corrente. Se non vi è stato un comando precedente o se il comando precedente non era un comando curva di Bézier cubica o curva di Bézier cubica continua, si presume che il primo punto di controllo coincida con il punto corrente. Il secondo punto di controllo, il punto di controllo della fine della curva, è specificato da controlPoint2. Ad esempio, S 100,200 200,300 è un comando curva di Bézier cubica continua valido. Questo comando definisce l'equivalente di PathGeometry con BezierSegment dove si trovava il segmento di curva precedente.

Sintassi
ScontrolPoint2endPoint
- oppure -
scontrolPoint2 endPoint
Termine Descrizione
controlPoint2 Point
Punto di controllo della curva, che determina la tangente finale della curva.
endPoint Point
Punto verso il quale viene disegnata la curva.

Comando curva di Bézier quadratica continua

Crea una curva di Bézier quadratica tra il punto corrente e il punto finale specificato. Il punto di controllo viene considerato come reflection del punto di controllo del comando precedente relativo al punto corrente. Se non vi è stato un comando precedente o se il comando precedente non era un comando curva di Bézier quadratrica o curva di Bézier quadratica continua, il punto di controllo coincide con il punto corrente. Questo comando definisce l'equivalente di PathGeometry con QuadraticBezierSegment dove si trovava il segmento di curva precedente.

Sintassi
TcontrolPointendPoint
- oppure -
tcontrolPointendPoint
Termine Descrizione
controlPoint Point
Punto di controllo della curva, che determina l'inizio e la tangente della curva.
endPoint Point
Punto verso il quale viene disegnata la curva.

Comando arco ellittico

Crea un arco ellittico tra il punto corrente e il punto finale specificato. Definisce l'equivalente di PathGeometry con ArcSegment.

Sintassi
A sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
- oppure -
a sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
Termine Descrizione
size Dimensione
Raggio x e raggio y dell'arco.
rotationAngle Double
Rotazione dell'ellisse in gradi.
isLargeArcFlag Impostato su 1 se la misura dell'angolo dell'arco deve essere di 180 gradi o superiore. In caso contrario, impostato su 0.
sweepDirectionFlag Impostato su 1 se l'arco viene tracciato nella direzione di un angolo positivo. In caso contrario, impostato su 0.
endPoint Point
Punto verso cui viene disegnata l'arco.

Comando di chiusura

Termina la figura corrente e crea una linea che collega il punto corrente e il punto iniziale della figura. Questo comando crea una giunzione di linee (angolo) tra l'ultimo segmento e il primo segmento della figura.

Sintassi
Z
- oppure -
z

Sintassi del punto

Descrive le coordinate x e y di un punto. Vedere anche Point.

Sintassi
x,y
- oppure -
xy
Termine Descrizione
x Double
Coordinata x del punto.
y Double
Coordinata y del punto.

Note aggiuntive

Anziché un valore numerico standard, è anche possibile usare i valori speciali seguenti. Per questi valori si fa distinzione tra maiuscole e minuscole.

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

Anziché usare decimali o numeri interi, è possibile usare la notazione scientifica. Ad esempio, +1.e17 è un valore valido.

Strumenti di progettazione che producono comandi di spostamento e disegno

L'uso dello strumento Pen e di altri strumenti di disegno in Blend per Microsoft Visual Studio 2015 produce in genere un oggetto Path, con comandi di spostamento e disegno.

Potrebbero essere visualizzati dati di comandi di spostamento e disegno esistenti in alcune delle parti di controllo definite nei modelli predefiniti XAML di Windows Runtime per i controlli. Ad esempio, alcuni controlli usano un oggetto PathIcon con dati definiti come comandi di spostamento e disegno.

Sono disponibili utilità di esportazione o plug-in per altri strumenti di progettazione di grafica vettoriale di uso comune che possono restituire il vettore in formato XAML. Questi creano in genere oggetti Path in un contenitore di layout, con comandi di spostamento e disegno per Path.Data. Potrebbero esistere più elementi Path in XAML in modo che sia possibile applicare pennelli diversi. Molti di queste utilità di esportazione o plug-in sono stati scritti originariamente per XAML di Windows Presentation Foundation (WPF) o Silverlight, ma la sintassi del percorso XAML è identica a XAML di Windows Runtime. In genere, è possibile usare blocchi di codice XAML da un'utilità di esportazione e incollarli direttamente in una pagina XAML di Windows Runtime. (Tuttavia, non sarà possibile usare RadialGradientBrush, se fa parte del codice XAML convertito, perché XAML di Windows Runtime non supporta quel pennello.)