Sintassi dei comandi di spostamento e disegno
Scopri i comandi di spostamento e disegno che puoi usare per specificare le geometrie di tracciato come un valore di attributo XAML. Questi comandi vengono usati da molti strumenti di progettazione e grafica che possono produrre come output una forma o un elemento grafico vettoriale come formato di serializzazione e interscambio.
Proprietà che usano stringhe dei comandi di spostamento e disegno
La sintassi dei comandi di spostamento e disegno è supportata da un convertitore di tipi interni per XAML, che analizza i comandi e produce una rappresentazione grafica in fase di runtime. Tale rappresentazione fondamentalmente è un set finito di vettori, pronto per la presentazione. I vettori da soli però non completano i dettagli della presentazione. Dovrai comunque impostare altri valori per gli elementi. Per un oggetto Path hai anche bisogno dei valori per Fill, Stroke e altre proprietà, quindi tale oggetto Path deve essere collegato in qualche modo alla struttura ad albero visuale. Per un oggetto PathIcon, imposta la proprietà Foreground.
Sono disponibili due proprietà nel Windows Runtime che possono usare una stringa che rappresenta i comandi di spostamento e disegno: Path.Data e PathIcon.Data. Se imposti una di queste proprietà specificando comandi di spostamento e disegno, in genere la imposti come valore di attributo XAML con altri attributi obbligatori di tale elemento. Senza entrare troppo nello specifico, l'aspetto è simile al seguente:
<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 rispetto all'uso di PathGeometry
Per XAML di Windows Runtime, i comandi di spostamento e disegno producono un elemento PathGeometry con un solo oggetto PathFigure con un valore per la proprietà Figures. Ogni comando di disegno produce una classe derivata PathSegment nella raccolta Segments di quell'oggetto PathFigure singolo, il comando di spostamento modifica la proprietà StartPoint e l'esistenza di un comando di chiusura fa impostare IsClosed su true. Puoi esplorare questa struttura come un modello a oggetti se esamini i valori Data in fase di runtime.
Sintassi di base
La sintassi per i comandi di spostamento e disegno può essere riassunta come segue:
- Inizia con una regola di riempimento facoltativa. In genere dovrai specificare questa regola solo se non vuoi l'impostazione predefinita EvenOdd. Altre informazioni su EvenOdd le vedremo in seguito.
- Specifica esattamente un solo comando di spostamento.
- Specifica uno o più comandi di disegno.
- Specifica un comando di chiusura. Puoi omettere un comando di chiusura, ma la figura in questo caso rimarrebbe aperta e non è una situazione comune.
Le regole generali di questa sintassi sono le seguenti:
- Ogni comando è rappresentato esattamente da una lettera.
- Tale lettera può essere maiuscola o minuscola. Spiegheremo più avanti quando usare le maiuscole o le minuscole.
- Ogni comando, tranne quello di chiusura, in genere è seguito da uno o più numeri.
- Se specifichi più numeri per un comando, separali con una virgola o uno spazio.
[fillRule]moveCommanddrawCommand[drawCommand*][closeCommand]
In molti comandi di disegno viene usato points, dove specifichi un valore x,y. Ogni volta che viene visualizzato un segnaposto *points , è possibile presupporre di fornire due valori decimali per il valore x,y di un punto.
Lo spazio vuoto spesso può essere omesso se il risultato non è ambiguo. Anzi, puoi omettere tutti gli spazi vuoti se usi le virgole come separatore per tutti i set di numeri (points e size). Questo uso ad esempio è consentito: F1M0,58L2,56L6,60L13,51L15,53L6,64z. Ma in genere è più normale includere degli spazi vuoti tra i comandi per maggiore chiarezza.
Non usare le virgole come separatore decimale per i numeri decimali. La stringa di comando infatti viene interpretata da XAML senza tenere conto di convenzioni di formattazione dei numeri specifiche delle impostazioni cultura diverse da quelle previste dalle impostazioni locali en-us.
Dettagli della sintassi
Regola di riempimento
Per la regola di riempimento facoltativa sono due i valori possibili: F0 o F1. F è sempre maiuscolo. F0 è il valore predefinito e produce il comportamento di riempimento EvenOdd, quindi in genere non devi specificarlo. Usa F1 per ottenere il comportamento di riempimento Nonzero. Questi valori di riempimento si allineano ai valori dell'enumerazione FillRule.
Comando Move
Specifica il punto iniziale di una nuova figura.
| Sintassi |
|---|
M Startpoint - oppure - mStartpoint |
| Termine | Descrizione |
|---|---|
| Startpoint | Point Punto iniziale di una nuova figura. |
Una M maiuscola indica che startPoint è una coordinata assoluta, mentre una m minuscola indica che startPoint è un offset rispetto al punto precedente oppure (0,0) se non esiste un punto precedente.
Nota È consentito specificare più punti dopo il comando di spostamento. Tra questi punti viene disegnata una linea come se avessi specificato il comando di linea. Questa non è tuttavia la procedura consigliata. Usa invece il comando di linea dedicato.
Comandi di disegno
Un comando di disegno può essere costituito da diversi comandi di forma: linea, linea orizzontale, linea verticale, curva di Bézier cubica, curva di Bézier quadratica, curva di Bézier cubica uniforme, curva di Bézier quadratica uniforme e arco ellittico.
Per tutti i comandi di disegno, è importante la distinzione tra maiuscole e minuscole. Le lettere maiuscole infatti indicano coordinate assolute, mentre le lettere minuscole indicano coordinate relative al comando precedente.
I punti di controllo di un segmento sono relativi al punto finale del segmento precedente. Quando immetti in sequenza più di un comando dello stesso tipo, puoi omettere la voce di comando duplicata. Ad esempio, L 100,200 300,400 equivale a L 100,200 L 300,400.
Comando riga
Crea una linea retta tra il punto corrente e il punto finale specificato. l 20 30 e L 20,30 sono esempi di comandi di riga validi. Definisce l'equivalente di un oggetto LineGeometry .
| Sintassi |
|---|
LEndpoint - oppure - lEndpoint |
| Termine | Descrizione |
|---|---|
| endPoint | Point Punto finale della linea. |
Comando con riga 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 | Doppia Coordinata x del punto finale della linea. |
Comando a riga 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 | Doppia Coordinata y del punto finale della linea. |
Comando di 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 di curva di Bézier quadratica
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 un comando di curva di Bézier quadratica valido. Definisce l'equivalente di un oggetto PathGeometry con un oggetto 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 di curva di Bézier cubica uniforme
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 esiste un comando precedente o se il comando precedente non è un comando di curva di Bézier cubica o di curva di Bézier cubica uniforme, si presuppone che il primo punto di controllo coincida con il punto corrente. Il secondo punto di controllo, ovvero il punto di controllo per la fine della curva, è specificato da controlPoint2. Ad esempio, S 100,200 200,300 è un comando di curva di Bézier cubica uniforme valido. Questo comando definisce l'equivalente di un oggetto PathGeometry con bezierSegment in cui era presente un 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 di curva di Bézier quadratica uniforme
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 esiste un comando precedente o se il comando precedente non è un comando di curva di Bézier quadratica o di curva di Bézier quadratica uniforme, il punto di controllo coincide con il punto corrente. Questo comando definisce l'equivalente di un oggetto PathGeometry con quadraticBezierSegment in cui era presente un 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 un oggetto PathGeometry con un oggetto ArcSegment.
| Sintassi |
|---|
A sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint - oppure - a sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint |
| Termine | Descrizione |
|---|---|
| size | Dimensione Raggio x e raggio y dell'arco. |
| rotationAngle | Doppia 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 Chiudi
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 dei punti
Descrive le coordinate x e y di un punto. Vedere anche Point.
| Sintassi |
|---|
| x,y - oppure - xy |
| Termine | Descrizione |
|---|---|
| x | Doppia Coordinata x del punto. |
| y | Doppia Coordinata y del punto. |
Note aggiuntive
Anziché un valore numerico standard, è anche possibile usare i valori speciali seguenti. Per tali valori viene applicata la distinzione tra maiuscole e minuscole.
- Infinity: rappresenta PositiveInfinity.
- -Infinity: rappresenta NegativeInfinity.
- NaN: rappresenta NaN.
Invece di usare decimali o numeri interi, puoi usare la notazione scientifica. Ad esempio, +1.e17 è un valore valido.
Strumenti di progettazione che producono comandi di spostamento e disegno
Usando lo strumento Penna e altri strumenti di disegno disponibili in Blend per Microsoft Visual Studio 2015, in genere viene prodotto un oggetto Path con comandi di spostamento e disegno.
Potresti vedere i dati dei comandi di spostamento e disegno esistenti in alcune parti di controllo definite nei modelli predefiniti di XAML di Windows Runtime per i controlli. Ad esempio, alcuni controlli usano un oggetto PathIcon con i dati definiti come comandi di spostamento e disegno.
Sono disponibili programmi di esportazione o plug-in per altri strumenti di progettazione di grafica vettoriale di uso comune che possono produrre come output il vettore in formato XAML. Questi in genere creano oggetti Path in un contenitore di layout, con comandi di spostamento e disegno per Path.Data. In XAML possono esistere più elementi Path, pertanto possono essere applicati pennelli diversi. Molti di questi programmi di esportazione o plug-in originariamente sono stati scritti per XAML di Windows Presentation Foundation (WPF) o Silverlight, ma la sintassi XAML per il percorso è identica in XAML di Windows Runtime. In genere, puoi usare blocchi di codice XAML provenienti da un programma di esportazione e incollarli direttamente in una pagina XAML di Windows Runtime. Non potrai tuttavia usare RadialGradientBrush se faceva parte del codice XAML convertito, in quanto XAML di Windows Runtime non supporta tale pennello.