Condividi tramite

Trasformazioni del percorso

  • Articolo

Browse sample. Esplorare l'esempio

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:

.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:

  1. Ridimensionare (ScaleX e ScaleY).
  2. Asimmetria (SkewX e SkewY).
  3. Ruota (Rotation).
  4. 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, M21M22, 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" />