Xamarin.Forms Shapes: Pfad

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

Die Path -Klasse wird von der Shape -Klasse abgeleitet und kann zum Zeichnen von Kurven und komplexen Formen verwendet werden. Diese Kurven und Formen werden häufig mithilfe von Geometry -Objekten beschrieben. Informationen zu den Eigenschaften, die die Path -Klasse von der Shape -Klasse erbt, finden Sie unter Xamarin.Forms Shapes.

Path definiert die folgenden Eigenschaften:

  • Data, vom Typ Geometry, der die zu zeichnende Form angibt.
  • RenderTransformvom Typ Transform, die die Transformation darstellt, die vor dem Zeichnen auf die Geometrie eines Pfads angewendet wird.

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

Weitere Informationen zu Transformationen finden Sie unter Xamarin.Forms Pfadtransformationen.

Erstellen eines Pfads

Um einen Pfad zu zeichnen, erstellen Sie ein Path -Objekt, und legen Sie dessen Data -Eigenschaft fest. Es gibt zwei Techniken zum Festlegen der Data Eigenschaft:

  • Sie können einen Zeichenfolgenwert für Data in XAML mithilfe der Pfadmarkupsyntax festlegen. Bei diesem Ansatz verwendet der Path.Data Wert ein Serialisierungsformat für Grafiken. In der Regel bearbeiten Sie diesen Zeichenfolgenwert nicht manuell, nachdem er erstellt wurde. Stattdessen verwenden Sie Entwurfstools, um die Daten zu bearbeiten, und exportieren sie als Zeichenfolgenfragment, das von der Data -Eigenschaft verwendet werden kann.
  • Sie können die Data -Eigenschaft auf ein Geometry -Objekt festlegen. Dies kann ein bestimmtes Geometry -Objekt oder ein GeometryGroup -Objekt sein, das als Container fungiert, der mehrere Geometrieobjekte in einem einzelnen Objekt kombinieren kann.

Erstellen eines Pfads mit Pfadmarkupsyntax

Im folgenden XAML-Beispiel wird gezeigt, wie ein Dreieck mithilfe der Pfadmarkupsyntax gezeichnet wird:

<Path Data="M 10,100 L 100,100 100,50Z"
      Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Start" />

Die Data Zeichenfolge beginnt mit dem durch angegebenen MMove-Befehl, der einen absoluten Startpunkt für den Pfad festlegt. L ist der Zeilenbefehl, der eine gerade Linie vom Startpunkt zum angegebenen Endpunkt erstellt. Z ist der Close-Befehl, der eine Zeile erstellt, die den aktuellen Punkt mit dem Startpunkt verbindet. Das Ergebnis ist ein Dreieck:

Pfaddreieck

Weitere Informationen zur Pfadmarkupsyntax finden Sie unter Xamarin.Forms Pfadmarkupsyntax.

Erstellen eines Pfads mit Geometry-Objekten

Kurven und Formen können mithilfe von Geometry -Objekten beschrieben werden, die zum Festlegen der Path -Eigenschaft des Data Objekts verwendet werden. Es gibt eine Vielzahl von Geometry-Objekten, aus denen Sie auswählen können. Die Klassen EllipseGeometry, LineGeometry und RectangleGeometry beschreiben relativ einfache Formen. Verwenden Sie eine PathGeometry, um komplexere Formen oder Kurven zu erstellen.

PathGeometry -Objekte bestehen aus einem oder PathFigure mehreren Objekten. Jedes PathFigure Objekt stellt eine andere Form dar. Jedes PathFigure Objekt besteht selbst aus einem oder PathSegment mehreren Objekten, die jeweils einen Verbindungsteil der Form darstellen. Segmenttypen umfassen die folgenden LineSegmentKlassen , BezierSegmentund ArcSegment .

Im folgenden XAML-Beispiel wird gezeigt, wie ein Dreieck mithilfe eines PathGeometry -Objekts gezeichnet wird:

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Start">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure IsClosed="True"
                                StartPoint="10,100">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <LineSegment Point="100,100" />
                                <LineSegment Point="100,50" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

In diesem Beispiel ist der Startpunkt des Dreiecks (10.100). Ein Liniensegment wird von (10.100) bis (100.100) und von (100.100) bis (100.50) gezeichnet. Dann werden die ersten und letzten Segmente miteinander verbunden, da die PathFigure.IsClosed -Eigenschaft auf truefestgelegt ist. Das Ergebnis ist ein Dreieck:

Pfaddreieck

Weitere Informationen zu Geometrien finden Sie unter Xamarin.Forms Geometrien.