Xamarin.Forms Shapes: Pfadtransformationen

A Transform definiert, wie ein Path Objekt von einem Koordinatenbereich in einen anderen Koordinatenbereich transformiert wird. Wenn eine Transformation auf ein Path-Objekt angewendet wird, ändert sich die Art und Weise, wie das Objekt in der Benutzeroberfläche dargestellt wird.

Transformationen können in vier allgemeine Kategorien unterteilt werden: Drehung, Skalierung, Neigung und Verschiebung. Xamarin.Forms definiert eine Klasse für jede dieser Transformationsklassifizierungen:

• RotateTransform, wodurch ein Path um einen bestimmten Angle gedreht wird.
• ScaleTransform, wodurch ein Path-Objekt um bestimmte ScaleX- und ScaleY-Beträge skaliert wird.
• SkewTransform, wodurch ein Path-Objekt um bestimmte AngleX- und AngleY-Beträge geneigt wird.
• TranslateTransform, wodurch ein Path-Objekt um bestimmte X- und Y-Beträge verschoben wird.

Xamarin.Forms Stellt außerdem die folgenden Klassen zum Erstellen komplexerer Transformationen bereit:

• TransformGroup, die eine zusammengesetzte Transformation darstellt, die aus mehreren Transformationsobjekten besteht.
• CompositeTransform, die mehrere Transformationsvorgänge auf ein Path-Objekt anwendet.
• MatrixTransform, die benutzerdefinierte Transformationen erstellt, die nicht von den anderen Transformationsklassen bereitgestellt werden.

Alle diese Klassen sind von der Transform-Klasse abgeleitet, die eine Value-Eigenschaft vom Typ Matrix definiert, die die aktuelle Transformation als Matrix-Objekt darstellt. Diese Eigenschaft wird von einem BindableProperty-Objekt unterstützt, was bedeutet, dass sie das Ziel von Datenbindungen sein kann und formatiert werden kann. Weitere Informationen über die Matrix Struktur finden Sie unter Transformationsmatrix.

Um eine Transformation auf einen Path anzuwenden, erstellen Sie eine Transformationsklasse und setzen Sie diese als Wert der Path.RenderTransform-Eigenschaft.

Drehungstransformation

Eine Drehtransformation dreht ein Path-Objekt im Uhrzeigersinn um einen bestimmten Punkt in einem 2D x-y-Koordinatensystem.

Die von der Transform-Klasse abgeleitete RotateTransform-Klasse definiert folgende Eigenschaften:

• Angle, vom Typ double, steht für den Winkel in Grad der Drehung im Uhrzeigersinn. Der Standardwert für diese Eigenschaft ist 0,0.
• CenterX, vom Typ double, stellt die X-Koordinate des Drehungsmittelpunkts dar. Der Standardwert für diese Eigenschaft ist 0,0.
• CenterY, vom Typ double, stellt die Y-Koordinate des Drehungsmittelpunkts dar. Der Standardwert für diese Eigenschaft ist 0,0.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Die Eigenschaften CenterX und CenterY bestimmen den Punkt, um den das Path-Objekt gedreht wird. Dieser Mittelpunkt wird im Koordinatenraum des Elements ausgedrückt, das transformiert wird. Standardmäßig wird die Drehung auf (0,0) angewendet, d. h. auf die linke obere Ecke des Path-Objekts.

Das folgende Beispiel zeigt, wie Sie ein Path-Objekt drehen können:

<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 diesem Beispiel wird das Path-Objekt um 45 Grad um seine linke obere Ecke gedreht.

Skalierungstransformation

Eine Skalierungstransformation skaliert ein Path -Objekt im 2D-X-Y-Koordinatensystem.

Die von der Transform-Klasse abgeleitete ScaleTransform-Klasse definiert folgende Eigenschaften:

• ScaleX, vom Typ double, der den Skalierungsfaktor der X-Achse darstellt. Der Standardwert für diese Eigenschaft ist 1,0.
• ScaleY, vom Typ double, die den Skalierungsfaktor der Y-Achse darstellt. Der Standardwert für diese Eigenschaft ist 1,0.
• CenterX, vom Typ double, der die X-Koordinate des Mittelpunkts dieser Transformation darstellt. Der Standardwert für diese Eigenschaft ist 0,0.
• CenterY, vom Typ double, die die Y-Koordinate des Mittelpunkts dieser Transformation darstellt. Der Standardwert für diese Eigenschaft ist 0,0.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Der Wert von ScaleX und ScaleY hat einen großen Einfluss auf die resultierende Skalierung:

• Werte zwischen 0 und 1 verringern sowohl die Breite als auch die Höhe des skalierten Objekts.
• Werte größer als 1 vergrößern sowohl die Breite als auch die Höhe des skalierten Objekts.
• Werte von 1 deuten darauf hin, dass das Objekt nicht skaliert ist.
• Negative Werte kippen das Skalierungsobjekt horizontal und vertikal.
• Werte zwischen 0 und -1 kippen das Skalierungsobjekt und verringern die Breite und Höhe.
• Werte kleiner als -1 kippen das Objekt und erhöhen die Breite und Höhe.
• Werte von -1 kippen das skalierte Objekt, ändern jedoch nicht die horizontale oder vertikale Größe.

Die Eigenschaften CenterX und CenterY geben den Punkt an, um den das Path-Objekt skaliert wird. Dieser Mittelpunkt wird im Koordinatenraum des Elements ausgedrückt, das transformiert wird. Die Skalierung wird standardmäßig um den Punkt (0,0), die obere linke Ecke des Path-Objekts, vorgenommen. Das bedeutet, dass das Path-Objekt verschoben wird und größer erscheint, da durch Anwenden einer Transformation der Koordinatenbereich geändert wird, in dem sich das Path-Objekt befindet.

Im folgenden Beispiel wird gezeigt, wie Sie ein Path-Objekt skalieren:

<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 diesem Beispiel wird das Path-Objekt auf die 1,5-fache Größe skaliert.

Schief-Transformation

Eine Schief-Transformation neigt ein Path-Objekt im 2D-X-Y-Koordinatensystem und ist nützlich, um die Illusion der 3D-Tiefe in einem 2D-Objekt zu erzeugen.

Die SkewTransform-Klasse, die von der Transform-Klasse abgeleitet wird, definiert die folgenden Eigenschaften:

• AngleX vom Typ double, die den Neigungswinkel der x-Achse darstellt, der in Grad gegen den Uhrzeigersinn von der y-Achse aus gemessen wird. Der Standardwert für diese Eigenschaft ist 0,0.
• AngleY, vom Typ double, der Neigungswinkel der Y-Achse darstellt, der in Grad gegen den Uhrzeigersinn von der X-Achse aus gemessen wird. Der Standardwert für diese Eigenschaft ist 0,0.
• CenterX, vom Typ double, der die X-Koordinate des Transformationscenters darstellt. Der Standardwert für diese Eigenschaft ist 0,0.
• CenterY, vom Typ double, der die Y-Koordinate des Transformationscenters darstellt. Der Standardwert für diese Eigenschaft ist 0,0.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Um die Auswirkungen einer schiefen Transformation vorherzusagen, betrachten Sie, dass AngleX die Werte der x-Achse relativ zum ursprünglichen Koordinatensystem neigt. Daher rotiert bei einem AngleX von 30 die Y-Achse um 30° durch den Ursprung und neigt die Werte auf der X-Achse um 30° vom Ursprung. Ebenso werden bei einem AngleY von 30 die Y-Werte des Path-Objektes um 30 Grad vom Ursprung geneigt.

Hinweis

Legen Sie die Eigenschaften CenterX und CenterY auf den Mittelpunkt des Objekts fest, um ein Path-Objekt an Ort und Stelle zu neigen.

Im folgenden Beispiel wird gezeigt, wie Sie ein Path-Objekt in die Schieflage versetzen:

<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 diesem Beispiel wird aus einem Mittelpunkt (0,0) eine horizontale Neigung von 45° auf das Path-Objekt angewendet.

Verschiebungstransformation

Eine Verschiebungstransformation verschiebt ein Objekt in das 2D-X-Y-Koordinatensystem.

Die TranslateTransform-Klasse, die von der Transform-Klasse abgeleitet wird, definiert die folgenden Eigenschaften:

• X, vom Typ double, der den Abstand darstellt, der entlang der X-Achse verschoben werden soll. Der Standardwert für diese Eigenschaft ist 0,0.
• Y, vom Typ double, der den Abstand darstellt, der entlang der Y-Achse verschoben werden soll. Der Standardwert für diese Eigenschaft ist 0,0.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Negative X-Werte verschieben ein Objekt nach links, während positive Werte ein Objekt nach rechts verschieben. Negative Y-Werte verschieben ein Objekt nach oben, während positive Werte ein Objekt nach unten verschieben.

Im folgenden Beispiel wird gezeigt, wie ein Path-Objekt verschoben wird:

<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 diesem Beispiel wird das Path-Objekt um 50 geräteunabhängige Einheiten nach rechts und um 50 geräteunabhängige Einheiten nach unten verschoben.

Mehrere Transformationen

Xamarin.Forms verfügt über zwei Klassen, die das Anwenden mehrerer Transformationen auf ein Path Objekt unterstützen. Dies sind TransformGroup und CompositeTransform. TransformGroup führt Transformationen in jeder gewünschten Reihenfolge aus, während CompositeTransform Transformationen in einer bestimmten Reihenfolge ausführt.

Transformationsgruppen

Transformationsgruppen stellen zusammengesetzte Transformationen dar, die aus mehreren Transform-Objekten bestehen.

Die TransformGroup-Klasse, die von der Transform-Klasse abgeleitet wird, definiert eine Children-Eigenschaft vom Typ TransformCollection, die eine Auflistung von Transform-Objekten darstellt. Diese Eigenschaft wird von einem BindableProperty-Objekt unterstützt, was bedeutet, dass sie das Ziel von Datenbindungen sein kann und formatiert werden kann.

In einer zusammengesetzten Transformation, die die TransformGroup-Klasse verwendet, ist die Reihenfolge der Transformationen wichtig. Wenn Sie beispielsweise erst drehen, dann skalieren und dann übersetzen, erhalten Sie ein anderes Ergebnis im Vergleich dazu, wenn Sie erst übersetzen, dann drehen und dann skalieren. Ein Grund für die Bedeutung der Reihenfolge ist, dass Transformationen wie Rotation und Skalierung in Bezug auf den Ursprung des Koordinatensystems durchgeführt werden. Die Skalierung eines Objekts, das auf den Ursprung zentriert ist, führt zu einem anderen Ergebnis als die Skalierung eines Objekts, das vom Ursprung weg bewegt wurde. In ähnlicher Weise führt das Drehen eines Objekts, das auf den Ursprung zentriert ist, zu einem anderen Ergebnis als das Drehen eines Objekts, das vom Ursprung weg bewegt wurde.

Das folgende Beispiel zeigt, wie mithilfe der TransformGroup-Klasse eine zusammengesetzte Transformation durchgeführt wird:

<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 diesem Beispiel wird das Path-Objekt auf die 1,5-fache Größe skaliert und dann um 45 Grad gedreht.

Zusammengesetzte Transformationen

Eine zusammengesetzte Transformation wendet mehrere Transformationen auf ein Objekt an.

Die CompositeTransform-Klasse, die von der Transform-Klasse abgeleitet wird, definiert die folgenden Eigenschaften:

• CenterX, vom Typ double, die die X-Koordinate des Mittelpunkts dieser Transformation darstellt. Der Standardwert für diese Eigenschaft ist 0,0.
• CenterY, vom Typ double, die die Y-Koordinate des Mittelpunkts dieser Transformation darstellt. Der Standardwert für diese Eigenschaft ist 0,0.
• ScaleX, vom Typ double, die den Skalierungsfaktor der X-Achse darstellt. Der Standardwert für diese Eigenschaft ist 1,0.
• ScaleY, vom Typ double, die den Skalierungsfaktor der Y-Achse darstellt. Der Standardwert für diese Eigenschaft ist 1,0.
• SkewX, vom Typ double, die den Neigungswinkel der X-Achse darstellt, der in Grad gegen den Uhrzeigersinn von der Y-Achse aus gemessen wird. Der Standardwert für diese Eigenschaft ist 0,0.
• SkewY, vom Typ double, der Neigungswinkel der Y-Achse darstellt, der in Grad gegen den Uhrzeigersinn von der X-Achse aus gemessen wird. Der Standardwert für diese Eigenschaft ist 0,0.
• Rotation, vom Typ double, der den Winkel in Grad einer Drehung im Uhrzeigersinn darstellt. Der Standardwert für diese Eigenschaft ist 0,0.
• TranslateX, vom Typ double, der den Abstand darstellt, der entlang der X-Achse verschoben werden soll. Der Standardwert für diese Eigenschaft ist 0,0.
• TranslateY, vom Typ double, der den Abstand darstellt, der entlang der Y-Achse verschoben werden soll. Der Standardwert für diese Eigenschaft ist 0,0.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Eine CompositeTransform wendet Transformationen in dieser Reihenfolge an:

1. Skalierung (ScaleX und ScaleY).
2. Neigung (SkewX und SkewY).
3. Drehen (Rotation).
4. Verschieben (TranslateX, TranslateY).

Wenn Sie mehrere Transformationen auf ein Objekt in einer anderen Reihenfolge anwenden möchten, sollten Sie eine TransformGroup erstellen und die Transformationen in ihrer gewünschten Reihenfolge einfügen.

Wichtig

Eine CompositeTransform verwendet dieselben Mittelpunkte CenterX und CenterY für alle Transformationen. Wenn Sie unterschiedliche Mittelpunkte pro Transformation angeben möchten, verwenden Sie eine TransformGroup.

Das folgende Beispiel zeigt, wie mithilfe der CompositeTransform-Klasse eine zusammengesetzte Transformation durchgeführt wird:

<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 diesem Beispiel wird das Path-Objekt auf das 1,5-Fache seiner Größe skaliert, dann um 45 Grad gedreht und dann um 50 geräteunabhängige Einheiten verschoben.

Transformationsmatrix

Eine Transformation kann in Bezug auf eine 3x3-affine Transformationsmatrix beschrieben werden, die Transformationen im 2D-Raum durchführt. Diese 3x3-Matrix wird durch die Matrix-Struktur dargestellt, bei der es sich um eine Auflistung von drei Zeilen und drei Spalten mit double-Werten handelt.

Die Matrix-Struktur definiert die folgenden Eigenschaften:

• Determinant, vom Typ double, die die Determinante der Matrix erhält.
• HasInverse, vom Typ bool, die angibt, ob die Matrix umkehrbar ist.
• Identity, vom Typ Matrix, die eine Identitätsmatrix erhält.
• HasIdentity, vom Typ bool, die angibt, ob die Matrix eine Identitätsmatrix ist.
• M11, vom Typ double, die den Wert der ersten Zeile und der ersten Spalte der Matrix darstellt.
• M12, vom Typ double, die den Wert der ersten Zeile und der zweiten Spalte der Matrix darstellt.
• M21, vom Typ double, stellt den Wert der zweiten Zeile und der ersten Spalte der Matrix dar.
• M22, vom Typ double, stellt den Wert der zweiten Zeile und der zweiten Spalte der Matrix dar.
• OffsetX, vom Typ double, stellt den Wert der dritten Zeile und der ersten Spalte der Matrix dar.
• OffsetY, vom Typ double, stellt den Wert der dritten Zeile und der zweiten Spalte der Matrix dar.

Die Eigenschaften OffsetX und OffsetY sind so benannt, da sie die Menge angeben, um den Koordinatenraum entlang der X-Achse bzw. der Y-Achse zu verschieben.

Darüber hinaus macht die Struktur Matrix eine Reihe von Methoden verfügbar, die zum Bearbeiten der Matrixwerte verwendet werden können, einschließlich Append, Invert, Multiply und Prepend weitere.

Die folgende Tabelle zeigt die Struktur einer Xamarin.Forms Matrix:

M11

M12

0,0

M21

M22

0,0

OffsetX

OffsetY

1.0

Hinweis

Bei einer affinen Transformationsmatrix ist die letzte Spalte gleich (0,0,1), sodass nur die Elemente in den ersten beiden Spalten angegeben werden müssen.

Durch Bearbeiten der Matrixwerte können Sie Path-Objekte drehen, skalieren, neigen und verschieben. Wenn Sie beispielsweise den Wert OffsetX in 100 ändern, können Sie ihn verwenden, um ein Path-Objekt 100 geräteunabhängige Einheiten entlang der X-Achse zu verschieben. Wenn Sie den Wert M22 in 3 ändern, können Sie ein Path-Objekt um das Dreifache seiner aktuellen Höhe strecken. Wenn Sie beide Werte ändern, wird das Path-Objekt 100 Einheiten entlang der X-Achse verschoben und seine Höhe wird um den Faktor 3 gestreckt. Darüber hinaus können affine Transformationsmatrizen multipliziert werden, um eine beliebige Anzahl linearer Transformationen zu bilden, z. B. Drehung und Neigung, gefolgt von einer Verschiebung.

Benutzerdefinierte Transformationen

Die Klasse MatrixTransform, die von der Klasse Transform abgeleitet wird, definiert eine Matrix-Eigenschaft vom Typ Matrix, die die Matrix darstellt, die die Transformation definiert. Diese Eigenschaft wird von einem BindableProperty-Objekt unterstützt, was bedeutet, dass sie das Ziel von Datenbindungen sein kann und formatiert werden kann.

Jede Transformation, die Sie mit einem TranslateTransform-, ScaleTransform-, RotateTransform- oder SkewTransform-Objekt beschreiben können, kann auch von MatrixTransform beschrieben werden. Die Klassen TranslateTransform, ScaleTransform, RotateTransform und SkewTransform sind jedoch einfacher zu konzeptualisieren als das Festlegen der Vektorkomponenten in Matrix. Daher wird üblicherweise die Klasse MatrixTransform verwendet, um benutzerdefinierte Transformationen zu erstellen, die nicht von den Klassen RotateTransform, ScaleTransform, SkewTransform oder TranslateTransform bereitgestellt werden.

Im folgenden Beispiel wird gezeigt, wie Path mit einem MatrixTransform-Objekt transformiert wird.

<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 diesem Beispiel wird das Path-Objekt in den Dimensionen X und Y gestreckt, geneigt und versetzt.

Alternativ kann dies in einer vereinfachten Form geschrieben werden, die einen Typkonverter verwendet, der in Xamarin.Forms:

<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 diesem Beispiel wird die Eigenschaft Matrix als durch Trennzeichen getrennte Zeichenfolge angegeben, die aus sechs Elementen besteht: M11, M12, M21, M22, OffsetX, OffsetY. Die Elemente in diesem Beispiel sind zwar durch Trennzeichen getrennt, sie können aber auch durch ein oder mehrere Leerzeichen getrennt werden.

Darüber hinaus kann das vorherige Beispiel noch weiter vereinfacht werden, indem die gleichen sechs Elemente als Wert der Eigenschaft RenderTransform angegeben werden:

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

Verwandte Links

• Xamarin.Forms Gebilde