Xamarin.Forms Shapes: Pfadtransformationen

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

Ein Transform definiert, wie ein Path Objekt von einem Koordinatenraum in einen anderen Koordinatenraum transformiert wird. Wenn eine Transformation auf ein Path Objekt angewendet wird, ändert sie, wie das Objekt auf der Benutzeroberfläche gerendert wird.

Transformationen können in vier allgemeine Klassifizierungen unterteilt werden: Rotation, Skalierung, Abweichung und Übersetzung. Xamarin.Forms definiert eine Klasse für jede dieser Transformationsklassifizierungen:

  • RotateTransform, das eine Path durch eine angegebene Anglerotiert.
  • ScaleTransform, das ein Path -Objekt nach den angegebenen ScaleX Mengen und ScaleY skaliert.
  • SkewTransform, wodurch ein Path Objekt nach den angegebenen AngleX Mengen und AngleY verzerrt wird.
  • TranslateTransform, das ein Path -Objekt um die angegebenen X Mengen und Y verschiebt.

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, das mehrere Transformationsvorgänge auf ein Path Objekt anwendet.
  • MatrixTransform, wodurch benutzerdefinierte Transformationen erstellt werden, die nicht von den anderen Transformationsklassen bereitgestellt werden.

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

Um eine Transformation auf anzuwenden Path, erstellen Sie eine Transformationsklasse und legen sie als Wert der Path.RenderTransform -Eigenschaft fest.

Drehungstransformation

Eine drehbare Transformation dreht ein Path Objekt im Uhrzeigersinn um einen angegebenen Punkt in einem 2D-x-y-Koordinatensystem.

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

  • Anglevom Typ doublestellt den Winkel der Drehung im Uhrzeigersinn in Grad dar. Der Standardwert dieser Eigenschaft ist 0,0.
  • CenterXvom Typ doublestellt die x-Koordinate des Drehmittelpunkts dar. Der Standardwert dieser Eigenschaft ist 0,0.
  • CenterYvom Typ doublestellt die y-Koordinate des Drehmittelpunkts dar. Der Standardwert dieser Eigenschaft ist 0,0.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Die CenterX Eigenschaften und CenterY geben den Punkt an, um den das Path Objekt gedreht wird. Dieser Mittelpunkt wird im Koordinatenraum des objekts ausgedrückt, das transformiert wird. Standardmäßig wird die Drehung auf (0,0) angewendet, bei der es sich um die obere linke Ecke des Path Objekts handelt.

Im folgenden Beispiel wird gezeigt, wie ein Path -Objekt gedreht 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>
        <RotateTransform CenterX="0"
                         CenterY="0"
                         Angle="45" />
    </Path.RenderTransform>
</Path>

In diesem Beispiel wird das Path Objekt um 45 Grad um seine obere linke Ecke gedreht.

Skalierungstransformation

Eine Skalierungstransformation skaliert ein Path Objekt im 2D x-y-Koordinatensystem.

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

  • ScaleXvom Typ double, der den Skalierungsfaktor der x-Achse darstellt. Der Standardwert dieser Eigenschaft ist 1,0.
  • ScaleYvom Typ double, der den Skalierungsfaktor der y-Achse darstellt. Der Standardwert dieser Eigenschaft ist 1,0.
  • CenterXvom Typ double, der die x-Koordinate des Mittelpunkts dieser Transformation darstellt. Der Standardwert dieser Eigenschaft ist 0,0.
  • CenterYvom Typ double, der die y-Koordinate des Mittelpunkts dieser Transformation darstellt. Der Standardwert dieser Eigenschaft ist 0,0.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

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

  • Werte zwischen 0 und 1 verringern die Breite und Höhe des skalierten Objekts.
  • Werte größer als 1 erhöhen die Breite und Höhe des skalierten Objekts.
  • Der Wert 1 gibt an, dass das Objekt nicht skaliert ist.
  • Negative Werte kippen das Skalierungsobjekt horizontal und vertikal.
  • Werte zwischen 0 und -1 kippen das Skalierungsobjekt und verringern seine Breite und Höhe.
  • Werte kleiner als -1 kippen das Objekt und erhöhen seine Breite und Höhe.
  • Die Werte -1 kippen das skalierte Objekt, ändern jedoch seine horizontale oder vertikale Größe nicht.

Die CenterX Eigenschaften und CenterY geben den Punkt an, an dem das Path Objekt skaliert wird. Dieser Mittelpunkt wird im Koordinatenraum des objekts ausgedrückt, das transformiert wird. Standardmäßig wird die Skalierung auf (0,0) angewendet, wobei es sich um die obere linke Ecke des Path Objekts handelt. Dies hat den Effekt, dass das Path Objekt verschoben und größer angezeigt wird, denn wenn Sie eine Transformation anwenden, ändern Sie den Koordinatenbereich, in dem sich das Path Objekt befindet.

Im folgenden Beispiel wird gezeigt, wie ein Path -Objekt skaliert 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>
        <ScaleTransform CenterX="0"
                        CenterY="0"
                        ScaleX="1.5"
                        ScaleY="1.5" />
    </Path.RenderTransform>
</Path>

In diesem Beispiel wird das Path Objekt auf das 1,5-fache der Größe skaliert.

Transformation mit Skew

Eine Skewtransformation verzerrt 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:

  • AngleXvom Typ double, der den Neigungswinkel der x-Achse darstellt, der in Grad gegen den Uhrzeigersinn von der y-Achse gemessen wird. Der Standardwert dieser Eigenschaft ist 0,0.
  • AngleY, vom Typ double, der den Y-Achsenschiefewinkel darstellt, der in Grad gegen den Uhrzeigersinn von der x-Achse gemessen wird. Der Standardwert dieser Eigenschaft ist 0,0.
  • CenterXvom Typ double, der die x-Koordinate des Transformationszentrums darstellt. Der Standardwert dieser Eigenschaft ist 0,0.
  • CenterYvom Typ double, der die y-Koordinate des Transformationszentrums darstellt. Der Standardwert dieser Eigenschaft ist 0,0.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Um die Auswirkungen einer schiefen Transformation vorherzusagen, betrachten Sie, dass AngleX die Werte der x-Achse relativ zum ursprünglichen Koordinatensystem neigt. Bei einem AngleX von 30 dreht sich die y-Achse daher um 30 Grad durch den Ursprung und verzerrt die Werte in x um 30 Grad von diesem Ursprung. Ebenso wird ein AngleY von 30 die y-Werte des Path Objekts um 30 Grad vom Ursprung entfernt.

Hinweis

Um ein Path Objekt zu verzerren, legen Sie die CenterX Eigenschaften und CenterY auf den Mittelpunkt des Objekts fest.

Das folgende Beispiel zeigt, wie Sie ein Path Objekt verzerren:

<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 eine horizontale Abweichung von 45 Grad vom Mittelpunkt (0,0) auf das Path Objekt angewendet.

Übersetzen der Transformation

Eine Übersetzungstransformation verschiebt ein Objekt im 2D-x-y-Koordinatensystem.

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

  • Xvom Typ double, der den Abstand darstellt, der entlang der x-Achse verschoben werden soll. Der Standardwert dieser Eigenschaft ist 0,0.
  • Yvom Typ double, der den Abstand darstellt, der entlang der y-Achse verschoben werden soll. Der Standardwert dieser Eigenschaft ist 0,0.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

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 übersetzt 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 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. Ein TransformGroup führt Transformationen in beliebiger Reihenfolge aus, während transformationen CompositeTransform in einer bestimmten Reihenfolge ausgeführt werden.

Transformieren von Gruppen

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 es das Ziel von Datenbindungen sein und stilisiert werden kann.

Die Reihenfolge der Transformationen ist bei einer zusammengesetzten Transformation, die die TransformGroup -Klasse verwendet, 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 Reihenfolge ist, dass Transformationen wie Drehung und Skalierung in Bezug auf den Ursprung des Koordinatensystems durchgeführt werden. Das Skalieren eines Objekts, das am Ursprung zentriert ist, führt zu einem anderen Ergebnis als die Skalierung eines Objekts, das vom Ursprung entfernt 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.

Im folgenden Beispiel wird gezeigt, wie eine zusammengesetzte Transformation mithilfe der TransformGroup -Klasse ausgefü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 Objekt auf das Path 1,5-fache seiner 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:

  • CenterXvom Typ double, der die x-Koordinate des Mittelpunkts dieser Transformation darstellt. Der Standardwert dieser Eigenschaft ist 0,0.
  • CenterYvom Typ double, der die y-Koordinate des Mittelpunkts dieser Transformation darstellt. Der Standardwert dieser Eigenschaft ist 0,0.
  • ScaleXvom Typ double, der den Skalierungsfaktor der x-Achse darstellt. Der Standardwert dieser Eigenschaft ist 1,0.
  • ScaleYvom Typ double, der den Skalierungsfaktor der y-Achse darstellt. Der Standardwert dieser Eigenschaft ist 1,0.
  • SkewXvom Typ double, der den Neigungswinkel der x-Achse darstellt, der in Grad gegen den Uhrzeigersinn von der y-Achse gemessen wird. Der Standardwert dieser Eigenschaft ist 0,0.
  • SkewY, vom Typ double, der den Y-Achsenschiefewinkel darstellt, der in Grad gegen den Uhrzeigersinn von der x-Achse gemessen wird. Der Standardwert dieser Eigenschaft ist 0,0.
  • Rotationvom Typ doublestellt den Winkel der Drehung im Uhrzeigersinn in Grad dar. Der Standardwert dieser Eigenschaft ist 0,0.
  • TranslateXvom Typ double, der den Abstand darstellt, der entlang der x-Achse verschoben werden soll. Der Standardwert dieser Eigenschaft ist 0,0.
  • TranslateYvom Typ double, der den Abstand darstellt, der entlang der y-Achse verschoben werden soll. Der Standardwert dieser Eigenschaft ist 0,0.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Ein CompositeTransform wendet Transformationen in der folgenden Reihenfolge an:

  1. Skalierung (ScaleX und ScaleY).
  2. Skew (SkewX und SkewY).
  3. Drehen (Rotation).
  4. Übersetzen (TranslateX, TranslateY).

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

Wichtig

Ein CompositeTransform verwendet die gleichen Mittelpunkte und CenterXCenterYfür alle Transformationen. Wenn Sie unterschiedliche Mittelpunkte pro Transformation angeben möchten, verwenden Sie eine TransformGroup,

Im folgenden Beispiel wird gezeigt, wie eine zusammengesetzte Transformation mithilfe der CompositeTransform -Klasse ausgefü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 Objekt auf das Path 1,5-fache seiner Größe skaliert, dann um 45 Grad gedreht und dann um 50 geräteunabhängige Einheiten übersetzt.

Transformationsmatrix

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

Die Matrix Struktur definiert die folgenden Eigenschaften:

  • Determinantvom Typ double, der die Determinante der Matrix abruft.
  • HasInversevom Typ bool, der angibt, ob die Matrix invertierbar ist.
  • Identityvom Typ Matrix, der eine Identitätsmatrix abruft.
  • HasIdentityvom Typ bool, der angibt, ob die Matrix eine Identitätsmatrix ist.
  • M11vom Typ double, der den Wert der ersten Zeile und ersten Spalte der Matrix darstellt.
  • M12vom Typ double, der den Wert der ersten Zeile und der zweiten Spalte der Matrix darstellt.
  • M21vom Typ double, der den Wert der zweiten Zeile und der ersten Spalte der Matrix darstellt.
  • M22vom Typ double, der den Wert der zweiten Zeile und der zweiten Spalte der Matrix darstellt.
  • OffsetXvom Typ double, der den Wert der dritten Zeile und der ersten Spalte der Matrix darstellt.
  • OffsetYvom Typ double, der den Wert der dritten Zeile und der zweiten Spalte der Matrix darstellt.

Die OffsetX Eigenschaften und OffsetY werden so benannt, da sie den Betrag angeben, der den Koordinatenraum entlang der x-Achse bzw. y-Achse übersetzen soll.

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

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

M11

M12

0,0

M21

M22

0,0

OffsetX

OffsetY

1.0

Hinweis

Eine affine Transformationsmatrix hat ihre letzte Spalte gleich (0,0,1), sodass nur die Elemente in den ersten beiden Spalten angegeben werden müssen.

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

Benutzerdefinierte Transformationen

Die MatrixTransform -Klasse, die von der Transform -Klasse 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 es das Ziel von Datenbindungen sein und stilisiert werden kann.

Jede Transformation, die Sie mit einem TranslateTransform- , ScaleTransform- RotateTransformoder SkewTransform -Objekt beschreiben können, kann ebenfalls durch eine MatrixTransformbeschrieben werden. Die TranslateTransformKlassen , ScaleTransform, RotateTransformund SkewTransform sind jedoch einfacher zu konzipieren als das Festlegen der Vektorkomponenten in einem Matrix. Daher wird die -Klasse in der MatrixTransform Regel verwendet, um benutzerdefinierte Transformationen zu erstellen, die nicht von den RotateTransformKlassen , ScaleTransform, SkewTransformoder TranslateTransform bereitgestellt werden.

Im folgenden Beispiel wird gezeigt, wie ein Path -Objekt mithilfe von MatrixTransformtransformiert 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 Objekt in den Path Dimensionen X und Y gestreckt, verzerrt und versetzt.

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

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

Darüber hinaus kann das vorherige Beispiel noch weiter vereinfacht werden, indem die gleichen sechs Member als Wert der RenderTransform -Eigenschaft 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" />