Trasformazioni del percorso
Un'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) Transform definisce come trasformare un Path oggetto da uno spazio di coordinate a un altro spazio di coordinate. Quando una trasformazione viene applicata a un Path oggetto, cambia la modalità di rendering dell'oggetto nell'interfaccia utente.
Le trasformazioni possono essere suddivise in quattro classificazioni generali: rotazione, ridimensionamento, asimmetria e traslazione. .NET MAUI definisce una classe per ognuna di queste classificazioni di trasformazione:
- RotateTransform, che ruota un oggetto Path da un oggetto specificato
Angle
. - ScaleTransform, che ridimensiona un Path oggetto in base agli importi e
ScaleY
specificatiScaleX
. - SkewTransform, che asimmetria un Path oggetto in base alle quantità e
AngleY
specificateAngleX
. - TranslateTransform, che sposta un Path oggetto in base a valori e
Y
specificatiX
.
.NET MAUI fornisce anche le classi seguenti per la creazione di trasformazioni più complesse:
- TransformGroup, che rappresenta una trasformazione composita composta da più oggetti di trasformazione.
- CompositeTransform, che applica più operazioni di trasformazione a un Path oggetto .
- MatrixTransform, che crea trasformazioni personalizzate non fornite dalle altre classi di trasformazione.
Tutte queste classi derivano dalla Transform classe , che definisce una Value
proprietà di tipo Matrix, che rappresenta la trasformazione corrente come Matrix oggetto . Questa proprietà è supportata da un BindableProperty oggetto , il che significa che può essere la destinazione dei data binding e stili. Per altre informazioni sullo Matrix struct, vedere Matrice di trasformazione.
Per applicare una trasformazione a un Pathoggetto , creare una classe di trasformazione e impostarla come valore della Path.RenderTransform
proprietà .
Trasformazione rotazione
Una trasformazione di rotazione ruota un Path oggetto in senso orario su un punto specificato in un sistema di coordinate x-y 2D.
La RotateTransform classe , che deriva dalla Transform classe , definisce le proprietà seguenti:
- Angle, di tipo
double
, rappresenta l'angolo, in gradi, di rotazione in senso orario. Il valore predefinito di questa proprietà è 0,0. - CenterX, di tipo
double
, rappresenta la coordinata x del punto centrale di rotazione. Il valore predefinito di questa proprietà è 0,0. - CenterY, di tipo
double
, rappresenta la coordinata y del punto centrale di rotazione. Il valore predefinito di questa proprietà è 0,0.
Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.
Le CenterX proprietà e CenterY specificano il punto su cui viene ruotato l'oggetto Path . Questo punto centrale viene espresso nello spazio delle coordinate dell'oggetto trasformato. Per impostazione predefinita, la rotazione viene applicata a (0,0), ovvero l'angolo superiore sinistro dell'oggetto Path .
Nell'esempio seguente viene illustrato come ruotare un Path oggetto :
<Path Stroke="Black"
Aspect="Uniform"
HorizontalOptions="Center"
HeightRequest="100"
WidthRequest="100"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
<Path.RenderTransform>
<RotateTransform CenterX="0"
CenterY="0"
Angle="45" />
</Path.RenderTransform>
</Path>
In questo esempio l'oggetto Path viene ruotato di 45 gradi circa l'angolo superiore sinistro.
Ridimensionare la trasformazione
Una trasformazione di scala ridimensiona un Path oggetto nel sistema di coordinate x-y 2D.
La ScaleTransform classe , che deriva dalla Transform classe , definisce le proprietà seguenti:
- ScaleX, di tipo
double
, che rappresenta il fattore di scala dell'asse x. Il valore predefinito di questa proprietà è 1,0. - ScaleY, di tipo
double
, che rappresenta il fattore di scala dell'asse y. Il valore predefinito di questa proprietà è 1,0. - CenterX, di tipo
double
, che rappresenta la coordinata x del punto centrale di questa trasformazione. Il valore predefinito di questa proprietà è 0,0. - CenterY, di tipo
double
, che rappresenta la coordinata y del punto centrale di questa trasformazione. Il valore predefinito di questa proprietà è 0,0.
Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.
Il valore di ScaleX e ScaleY ha un impatto enorme sul ridimensionamento risultante:
- I valori compresi tra 0 e 1 riducono la larghezza e l'altezza dell'oggetto ridimensionato.
- I valori maggiori di 1 aumentano la larghezza e l'altezza dell'oggetto ridimensionato.
- I valori 1 indicano che l'oggetto non è ridimensionato.
- I valori negativi capovolgono l'oggetto scala orizzontalmente e verticalmente.
- I valori compresi tra 0 e -1 capovolgono l'oggetto scala e riducono la larghezza e l'altezza.
- I valori minori di -1 capovolgono l'oggetto e aumentano la larghezza e l'altezza.
- I valori di -1 capovolgono l'oggetto ridimensionato, ma non modificano la dimensione orizzontale o verticale.
Le CenterX proprietà e CenterY specificano il punto su cui viene ridimensionato l'oggetto Path . Questo punto centrale viene espresso nello spazio delle coordinate dell'oggetto trasformato. Per impostazione predefinita, il ridimensionamento viene applicato a (0,0), ovvero l'angolo superiore sinistro dell'oggetto Path . Questo ha l'effetto di spostare l'oggetto Path e renderlo più grande, perché quando si applica una trasformazione si modifica lo spazio delle coordinate in cui risiede l'oggetto Path .
Nell'esempio seguente viene illustrato come ridimensionare un Path oggetto :
<Path Stroke="Black"
Aspect="Uniform"
HorizontalOptions="Center"
HeightRequest="100"
WidthRequest="100"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
<Path.RenderTransform>
<ScaleTransform CenterX="0"
CenterY="0"
ScaleX="1.5"
ScaleY="1.5" />
</Path.RenderTransform>
</Path>
In questo esempio, l'oggetto Path viene ridimensionato su 1,5 volte la dimensione.
Trasformazione asimmetria
Una trasformazione asimmetria inclina un Path oggetto nel sistema di coordinate x-y 2D ed è utile per creare l'illusione della profondità 3D in un oggetto 2D.
La SkewTransform classe , che deriva dalla Transform classe , definisce le proprietà seguenti:
- AngleX, di tipo
double
, che rappresenta l'angolo di asimmetria dell'asse x, misurato in gradi in senso antiorario dall'asse y. Il valore predefinito di questa proprietà è 0,0. - AngleY, di tipo
double
, che rappresenta l'angolo di asimmetria dell'asse y, misurato in gradi in senso antiorario dall'asse x. Il valore predefinito di questa proprietà è 0,0. - CenterX, di tipo
double
, che rappresenta la coordinata x del centro della trasformazione. Il valore predefinito di questa proprietà è 0,0. - CenterY, di tipo
double
, che rappresenta la coordinata y del centro di trasformazione. Il valore predefinito di questa proprietà è 0,0.
Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.
Per stimare l'effetto di una trasformazione asimmetria, considerare che AngleX asimmetria i valori dell'asse x rispetto al sistema di coordinate originale. Pertanto, per un valore AngleX pari a 30, l'asse y ruota 30 gradi attraverso l'origine e sfasa i valori in x di 30 gradi da tale origine. Analogamente, un oggetto AngleY di 30 sfasa i valori y dell'oggetto Path di 30 gradi dall'origine.
Nota
Per asimmetria di un Path oggetto sul posto, impostare le CenterX
proprietà e CenterY
sul punto centrale dell'oggetto.
Nell'esempio seguente viene illustrato come asimmetria di un Path oggetto:
<Path Stroke="Black"
Aspect="Uniform"
HorizontalOptions="Center"
HeightRequest="100"
WidthRequest="100"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
<Path.RenderTransform>
<SkewTransform CenterX="0"
CenterY="0"
AngleX="45"
AngleY="0" />
</Path.RenderTransform>
</Path>
In questo esempio, un'asimmetria orizzontale di 45 gradi viene applicata all'oggetto Path , da un punto centrale di (0,0).
Tradurre la trasformazione
Una trasformazione di traslazione sposta un oggetto nel sistema di coordinate x-y 2D.
La TranslateTransform classe , che deriva dalla Transform classe , definisce le proprietà seguenti:
- X, di tipo
double
, che rappresenta la distanza da spostare lungo l'asse x. Il valore predefinito di questa proprietà è 0,0. - Y, di tipo
double
, che rappresenta la distanza da spostare lungo l'asse y. Il valore predefinito di questa proprietà è 0,0.
Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.
I valori negativi X spostano un oggetto a sinistra, mentre i valori positivi spostano un oggetto a destra. I valori negativi Y spostano un oggetto verso l'alto, mentre i valori positivi spostano un oggetto verso il basso.
Nell'esempio seguente viene illustrato come tradurre un Path oggetto :
<Path Stroke="Black"
Aspect="Uniform"
HorizontalOptions="Center"
HeightRequest="100"
WidthRequest="100"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
<Path.RenderTransform>
<TranslateTransform X="50"
Y="50" />
</Path.RenderTransform>
</Path>
In questo esempio l'oggetto Path viene spostato a destra di 50 unità indipendenti dal dispositivo e 50 unità indipendenti dal dispositivo.
Più trasformazioni
.NET MAUI include due classi che supportano l'applicazione di più trasformazioni a un Path oggetto . Si tratta di TransformGroupe CompositeTransform. Un TransformGroup oggetto esegue trasformazioni in qualsiasi ordine desiderato, mentre esegue CompositeTransform trasformazioni in un ordine specifico.
Trasformare i gruppi
I gruppi di trasformazione rappresentano trasformazioni composite composte da più Transform oggetti.
La TransformGroup classe , che deriva dalla Transform classe , definisce una Children proprietà di tipo TransformCollection, che rappresenta una raccolta di Transform oggetti . Questa proprietà è supportata da un BindableProperty oggetto , il che significa che può essere la destinazione dei data binding e stili.
L'ordine delle trasformazioni è importante in una trasformazione composita che usa la TransformGroup classe . Ad esempio, se si ruota prima, quindi si ridimensiona, quindi si traduce, si ottiene un risultato diverso rispetto a se si converte prima, quindi ruotare, quindi scalare. Un ordine motivo è significativo è che le trasformazioni come rotazione e ridimensionamento vengono eseguite rispetto all'origine del sistema di coordinate. Il ridimensionamento di un oggetto centrato in corrispondenza dell'origine produce un risultato diverso per ridimensionare un oggetto spostato dall'origine. Analogamente, la rotazione di un oggetto centrato in corrispondenza dell'origine produce un risultato diverso rispetto alla rotazione di un oggetto spostato dall'origine.
L'esempio seguente illustra come eseguire una trasformazione composita usando la TransformGroup classe :
<Path Stroke="Black"
Aspect="Uniform"
HorizontalOptions="Center"
HeightRequest="100"
WidthRequest="100"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.5"
ScaleY="1.5" />
<RotateTransform Angle="45" />
</TransformGroup>
</Path.RenderTransform>
</Path>
In questo esempio, l'oggetto Path viene ridimensionato a 1,5 volte le dimensioni e quindi ruotato di 45 gradi.
Trasformazioni composite
Una trasformazione composita applica più trasformazioni a un oggetto .
La CompositeTransform classe , che deriva dalla Transform classe , definisce le proprietà seguenti:
- CenterX, di tipo
double
, che rappresenta la coordinata x del punto centrale di questa trasformazione. Il valore predefinito di questa proprietà è 0,0. - CenterY, di tipo
double
, che rappresenta la coordinata y del punto centrale di questa trasformazione. Il valore predefinito di questa proprietà è 0,0. - ScaleX, di tipo
double
, che rappresenta il fattore di scala dell'asse x. Il valore predefinito di questa proprietà è 1,0. - ScaleY, di tipo
double
, che rappresenta il fattore di scala dell'asse y. Il valore predefinito di questa proprietà è 1,0. - SkewX, di tipo
double
, che rappresenta l'angolo di asimmetria dell'asse x, misurato in gradi in senso antiorario dall'asse y. Il valore predefinito di questa proprietà è 0,0. - SkewY, di tipo
double
, che rappresenta l'angolo di asimmetria dell'asse y, misurato in gradi in senso antiorario dall'asse x. Il valore predefinito di questa proprietà è 0,0. - Rotation, di tipo
double
, rappresenta l'angolo, in gradi, di rotazione in senso orario. Il valore predefinito di questa proprietà è 0,0. - TranslateX, di tipo
double
, che rappresenta la distanza da spostare lungo l'asse x. Il valore predefinito di questa proprietà è 0,0. - TranslateY, di tipo
double
, che rappresenta la distanza da spostare lungo l'asse y. Il valore predefinito di questa proprietà è 0,0.
Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.
Un CompositeTransform oggetto applica le trasformazioni in questo ordine:
- Ridimensionare (ScaleX e ScaleY).
- Asimmetria (SkewX e SkewY).
- Ruota (Rotation).
- Traduci (TranslateX, TranslateY).
Se si desidera applicare più trasformazioni a un oggetto in un ordine diverso, è necessario creare un TransformGroup oggetto e inserire le trasformazioni nell'ordine previsto.
Importante
Un CompositeTransform oggetto usa gli stessi punti CenterX
centrali e CenterY
, per tutte le trasformazioni. Se si desidera specificare punti centrali diversi per ogni trasformazione, usare un oggetto TransformGroup,
L'esempio seguente illustra come eseguire una trasformazione composita usando la CompositeTransform classe :
<Path Stroke="Black"
Aspect="Uniform"
HorizontalOptions="Center"
HeightRequest="100"
WidthRequest="100"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
<Path.RenderTransform>
<CompositeTransform ScaleX="1.5"
ScaleY="1.5"
Rotation="45"
TranslateX="50"
TranslateY="50" />
</Path.RenderTransform>
</Path>
In questo esempio, l'oggetto Path viene ridimensionato a 1,5 volte le dimensioni, quindi ruotato di 45 gradi e quindi convertito da 50 unità indipendenti dal dispositivo.
Matrice di trasformazione
Una trasformazione può essere descritta in termini di matrice di trasformazione affine 3x3, che esegue trasformazioni nello spazio 2D. Questa matrice 3x3 è rappresentata dallo Matrix struct , che è una raccolta di tre righe e tre colonne di double
valori.
Lo Matrix struct definisce le proprietà seguenti:
- Determinant, di tipo
double
, che ottiene il determinante della matrice. - HasInverse, di tipo
bool
, che indica se la matrice è invertibile. - Identity, di tipo Matrix, che ottiene una matrice di identità.
- IsIdentity, di tipo
bool
, che indica se la matrice è una matrice di identità. - M11, di tipo
double
, che rappresenta il valore della prima riga e della prima colonna della matrice. - M12, di tipo
double
, che rappresenta il valore della prima riga e della seconda colonna della matrice. - M21, di tipo
double
, che rappresenta il valore della seconda riga e della prima colonna della matrice. - M22, di tipo
double
, che rappresenta il valore della seconda riga e della seconda colonna della matrice. - OffsetX, di tipo
double
, che rappresenta il valore della terza riga e della prima colonna della matrice. - OffsetY, di tipo
double
, che rappresenta il valore della terza riga e della seconda colonna della matrice.
Le OffsetX proprietà e OffsetY vengono denominate in modo che specifichino la quantità di spazio delle coordinate lungo l'asse x e l'asse y rispettivamente.
Inoltre, lo Matrix struct espone una serie di metodi che possono essere usati per modificare i valori della matrice, tra cui Append, InvertMultiply, Prepend e molti altri.
La tabella seguente illustra la struttura di una matrice MAUI .NET:
M11
M12
0.0
M21
M22
0.0
OffsetX
OffsetY
1.0
Nota
Una matrice di trasformazione affine ha la colonna finale uguale a (0,0,1), pertanto è necessario specificare solo i membri nelle prime due colonne.
Modificando i valori della matrice, è possibile ruotare, ridimensionare, asimmetrie e tradurre Path oggetti. Ad esempio, se si modifica il OffsetX valore su 100, è possibile usarlo per spostare un Path oggetto 100 unità indipendenti dal dispositivo lungo l'asse x. Se si imposta il M22 valore su 3, è possibile usarlo per estendere un Path oggetto a tre volte l'altezza corrente. Se si modificano entrambi i valori, spostare l'oggetto 100 unità indipendenti dal dispositivo lungo l'asse x e estenderne l'altezza Path di un fattore pari a 3. Inoltre, le matrici di trasformazione affine possono essere moltiplicate per formare qualsiasi numero di trasformazioni lineari, ad esempio rotazione e asimmetria, seguite dalla traduzione.
Trasformazioni personalizzate
La MatrixTransform classe , che deriva dalla Transform classe , definisce una Matrix proprietà di tipo Matrix, che rappresenta la matrice che definisce la trasformazione. Questa proprietà è supportata da un BindableProperty oggetto , il che significa che può essere la destinazione dei data binding e stili.
Qualsiasi trasformazione che è possibile descrivere con un TranslateTransformoggetto , RotateTransformScaleTransform, o SkewTransform può essere anche descritta da un oggetto MatrixTransform. Tuttavia, le TranslateTransformclassi , ScaleTransformRotateTransform, e SkewTransform sono più facili da concettualizzare rispetto all'impostazione dei componenti vettoriali in un oggetto Matrix. Di conseguenza, la MatrixTransform classe viene in genere usata per creare trasformazioni personalizzate non fornite dalle RotateTransformclassi , ScaleTransform, SkewTransformo TranslateTransform .
Nell'esempio seguente viene illustrato come trasformare un Path oggetto usando un MatrixTransformoggetto :
<Path Stroke="Black"
Aspect="Uniform"
HorizontalOptions="Center"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
<Path.RenderTransform>
<MatrixTransform>
<MatrixTransform.Matrix>
<!-- M11 stretches, M12 skews -->
<Matrix OffsetX="10"
OffsetY="100"
M11="1.5"
M12="1" />
</MatrixTransform.Matrix>
</MatrixTransform>
</Path.RenderTransform>
</Path>
In questo esempio l'oggetto Path viene esteso, asimmetrico e scostato nelle dimensioni X e Y.
In alternativa, questa operazione può essere scritta in un formato semplificato che usa un convertitore di tipi integrato in .NET MAUI:
<Path Stroke="Black"
Aspect="Uniform"
HorizontalOptions="Center"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
<Path.RenderTransform>
<MatrixTransform Matrix="1.5,1,0,1,10,100" />
</Path.RenderTransform>
</Path>
In questo esempio la Matrix proprietà viene specificata come stringa delimitata da virgole costituita da sei membri: M11
, M12
, M21
M22
, OffsetX
. OffsetY
Anche se i membri sono delimitati da virgole in questo esempio, possono anche essere delimitati da uno o più spazi.
Inoltre, l'esempio precedente può essere ulteriormente semplificato specificando gli stessi sei membri del valore della RenderTransform proprietà:
<Path Stroke="Black"
Aspect="Uniform"
HorizontalOptions="Center"
RenderTransform="1.5 1 0 1 10 100"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z" />
Commenti e suggerimenti
https://aka.ms/ContentUserFeedback.
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedereInvia e visualizza il feedback per