Xamarin.Forms Shapes: Geometrien
Die Geometry Klasse und die von ihr abgeleiteten Klassen ermöglichen es Ihnen, die Geometrie eines 2D-Shapes zu beschreiben. Bei Geometry-Objekten kann es sich um einfache Formen wie Rechtecke und Kreise oder um aus einem oder mehreren geometrischen Objekten zusammengesetzte Formen handeln. Darüber hinaus können komplexere Geometrien erstellt werden, die Bögen und Kurven enthalten.
Die Klasse Geometry ist die übergeordnete Klasse für mehrere Klassen, die verschiedene Kategorien von Geometrien definieren:
EllipseGeometry, stellt die Geometrie einer Ellipse oder eines Kreises dar.GeometryGroup, stellt einen Container dar, der mehrere Geometrieobjekte zu einem einzigen Objekt zusammenfassen kann.LineGeometry, stellt die Geometrie einer Linie dar.PathGeometry, stellt die Geometrie einer komplexen Form dar, die sich aus Bögen, Kurven, Ellipsen, Linien und Rechtecken zusammensetzen kann.RectangleGeometry, stellt die Geometrie eines Rechtecks oder Quadrats dar.
Hinweis
Es gibt auch eine Klasse RoundedRectangleGeometry, die sich von der Klasse GeometryGroup ableitet. Für weitere Informationen siehe RoundRectangleGeometry.
Die Klassen Geometry und Shape scheinen sich insofern zu ähneln, als sie beide 2D-Formen beschreiben, weisen aber einen wichtigen Unterschied auf. Die Klasse Geometry leitet sich von der Klasse BindableObject ab, während die Klasse Shape sich von der Klasse View ableitet. Daher können Shape-Objekte sich selbst rendern und am Layout-System teilnehmen, Geometry-Objekte hingegen nicht. Während Shape-Objekte leichter zu verwenden sind als Geometry-Objekte, sind Geometry-Objekte vielseitiger. Während ein Shape-Objekt zum Rendern von 2D-Grafiken verwendet wird, kann ein Geometry-Objekt verwendet werden, um den geometrischen Bereich für 2D-Grafiken zu definieren und einen Bereich für das Clipping festzulegen.
Die folgenden Klassen haben Eigenschaften, die auf Geometry-Objekte gesetzt werden können:
- Die Klasse
Pathverwendet einGeometry, um ihren Inhalt zu beschreiben. Sie können einGeometrydarstellen, indem Sie diePath.Data-Eigenschaft auf einGeometry-Objekt setzen und dieFill- undStroke-Eigenschaften desPath-Objekts festlegen. - Die Klasse
VisualElementhat eineClip-Eigenschaft vom TypGeometry, die den Umriss des Inhalts eines Elements definiert. Wenn dieClip-Eigenschaft auf einGeometry-Objekt gesetzt wird, ist nur der Bereich sichtbar, der innerhalb der Region desGeometryliegt. Weitere Informationen finden Sie unter Beschneiden mit einer Geometrie.
Die Klassen, die sich von der Klasse Geometry ableiten, lassen sich in drei Kategorien einteilen: einfache Geometrien, Pfadgeometrien und zusammengesetzte Geometrien.
Einfache Geometrien
Die einfachen Geometrieklassen sind EllipseGeometry, LineGeometry, und RectangleGeometry. Sie werden verwendet, um geometrische Grundformen wie Kreise, Linien und Rechtecke zu erstellen. Diese Formen sowie komplexere Formen können mit einem PathGeometry oder durch Kombination von Geometrieobjekten erstellt werden, aber diese Klassen bieten einen einfacheren Ansatz für die Erstellung dieser geometrischen Grundformen.
EllipseGeometry
Eine Ellipsengeometrie stellt die Geometrie einer Ellipse oder eines Kreises dar und wird durch einen Mittelpunkt, einen x-Radius und einen y-Radius definiert.
Die EllipseGeometry-Klasse definiert die folgenden Eigenschaften:
Center, vom TypPoint, der den Mittelpunkt der Geometrie darstellt.RadiusX, vom Typdouble, der den Wert des x-Radius der Geometrie darstellt. Der Standardwert dieser Eigenschaft ist 0.0.RadiusY, vom Typdouble, der den y-Radiuswert der Geometrie darstellt. Der Standardwert dieser 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.
Das folgende Beispiel zeigt, wie man ein EllipseGeometry in einem Path-Objekt erstellt und rendert:
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<EllipseGeometry Center="50,50"
RadiusX="50"
RadiusY="50" />
</Path.Data>
</Path>
In diesem Beispiel wird der Mittelpunkt von EllipseGeometry auf (50,50) gesetzt und der x-Radius und der y-Radius werden beide auf 50 gesetzt. Dadurch entsteht ein roter Kreis mit einem Durchmesser von 100 geräteunabhängigen Einheiten, dessen Inneres blau gefärbt ist:
LineGeometry
Eine Liniengeometrie stellt die Geometrie einer Linie dar und wird durch Angabe des Anfangs- und des Endpunkts der Linie definiert.
Die LineGeometry-Klasse definiert die folgenden Eigenschaften:
StartPoint, vom TypPoint, der den Anfangspunkt der Linie darstellt.EndPoint, vom TypPoint, der den Endpunkt der Linie darstellt.
Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.
Das folgende Beispiel zeigt, wie man ein LineGeometry in einem Path-Objekt erstellt und rendert:
<Path Stroke="Black">
<Path.Data>
<LineGeometry StartPoint="10,20"
EndPoint="100,130" />
</Path.Data>
</Path>
In diesem Beispiel wird ein LineGeometry von (10,20) nach (100,130) gezogen:
Hinweis
Das Einstellen der Fill-Eigenschaft einer Path, die eine LineGeometry wiedergibt, hat keine Auswirkungen, da eine Linie kein Inneres hat.
RectangleGeometry
Eine Rechteckgeometrie stellt die Geometrie eines Rechtecks oder Quadrats dar und wird mit einer Rect-Struktur definiert, die seine relative Position sowie seine Höhe und Breite angibt.
Die Klasse RectangleGeometry definiert die Eigenschaft Rect vom Typ Rect, die die Abmessungen des Rechtecks darstellt. Diese Eigenschaft wird durch ein BindableProperty-Objekt unterstützt, was bedeutet, dass sie das Ziel von Datenbindungen sein kann und gestylt werden kann.
Das folgende Beispiel zeigt, wie man ein RectangleGeometry in einem Path-Objekt erstellt und rendert:
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<RectangleGeometry Rect="10,10,150,100" />
</Path.Data>
</Path>
Die Position und die Abmessungen des Rechtecks werden durch eine Rect-Struktur definiert. In diesem Beispiel ist die Position (10,10), die Breite ist 150 und die Höhe ist 100 geräteunabhängige Einheiten:
Pfadgeometrien
Eine Pfadgeometrie beschreibt eine komplexe Form, die aus Bögen, Kurven, Ellipsen, Linien und Rechtecken zusammengesetzt sein kann.
Die PathGeometry-Klasse definiert die folgenden Eigenschaften:
Figures, vom TypPathFigureCollection, der die Sammlung vonPathFigure-Objekten darstellt, die den Inhalt des Pfades beschreiben.FillRule, vom TypFillRule, der bestimmt, wie die in der Geometrie enthaltenen Schnittflächen kombiniert werden. Der Standardwert dieser Eigenschaft istFillRule.EvenOdd.
Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.
Weitere Informationen zur FillRule Enumeration finden Sie unter Xamarin.Forms Shapes: Füllregeln.
Hinweis
Die Figures-Eigenschaft ist die ContentProperty der PathGeometry-Klasse und muss daher nicht explizit in XAML festgelegt werden.
Ein PathGeometry besteht aus einer Sammlung von PathFigure-Objekten, wobei jedes PathFigure eine Form in der Geometrie beschreibt. Jedes PathFigure besteht selbst aus einem oder mehreren PathSegment-Objekten, von denen jedes einen Abschnitt der Form beschreibt. Es gibt viele Arten von Segmenten.
ArcSegment, wodurch ein elliptischer Bogen zwischen zwei Punkten entsteht.BezierSegment, erzeugt eine kubische Bezier-Kurve zwischen zwei Punkten.LineSegment, erzeugt eine Linie zwischen zwei Punkten.PolyBezierSegment, erzeugt eine Reihe von kubischen Bezier-Kurven.PolyLineSegment, erzeugt eine Reihe von Zeilen.PolyQuadraticBezierSegment, erzeugt eine Reihe von quadratischen Bezier-Kurven.QuadraticBezierSegment, erzeugt eine quadratische Bezier-Kurve.
Alle oben genannten Klassen leiten sich von der abstrakten Klasse PathSegment ab.
Die Segmente in einer PathFigure werden zu einer einzelnen geometrischen Form kombiniert, die den Endpunkt eines Segments als Startpunkt des nächsten Segments verwendet. Die StartPoint-Eigenschaft einer PathFigure gibt den Punkt an, von dem aus das erste Segment gezeichnet wird. Jedes nachfolgende Segment beginnt am Endpunkt des vorherigen Segments. So kann beispielsweise eine vertikale Linie von 10,50 nach 10,150 definiert werden, indem die Eigenschaft StartPoint auf 10,50 gesetzt wird und eine LineSegment mit einer Point-Eigenschaftseinstellung von 10,150 erstellt wird:
<Path Stroke="Black">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,50">
<PathFigure.Segments>
<PathSegmentCollection>
<LineSegment Point="10,150" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
Komplexere Geometrien lassen sich durch die Kombination von PathSegment-Objekten und durch die Verwendung mehrerer PathFigure-Objekte innerhalb eines PathGeometry erzeugen.
Ein ArcSegment erstellen
Ein ArcSegment erzeugt einen elliptischen Bogen zwischen zwei Punkten. Ein elliptischer Bogen wird durch seinen Start- und Endpunkt, den x- und y-Radius, den x-Achsen-Rotationsfaktor, einen Wert, der angibt, ob der Bogen größer als 180 Grad sein soll, und einen Wert, der die Richtung beschreibt, in der der Bogen gezeichnet wird, definiert.
Die ArcSegment-Klasse definiert die folgenden Eigenschaften:
Point, vom TypPoint, der den Endpunkt des Ellipsenbogens darstellt. Der Standardwert für diese Eigenschaft ist (0,0).Size, vom TypSize, der den x- und y-Radius des Bogens darstellt. Der Standardwert für diese Eigenschaft ist (0,0).RotationAnglevom Typdouble, der den Betrag in Grad angibt, um den die Ellipse um die x-Achse gedreht wird. Der Standardwert dieser Eigenschaft ist 0.SweepDirection, vom TypSweepDirection, der die Richtung angibt, in der der Bogen gezeichnet wird. Der Standardwert dieser Eigenschaft istSweepDirection.CounterClockwise.IsLargeArc, vom Typbool, der angibt, ob der Bogen größer als 180 Grad sein soll. Der Standardwert dieser Eigenschaft istfalse.
Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.
Hinweis
Die Klasse ArcSegment enthält keine Eigenschaft für den Anfangspunkt des Bogens. Sie definiert nur den Endpunkt des Bogens, den sie darstellt. Der Startpunkt des Bogens ist der aktuelle Punkt des PathFigure, zu dem der ArcSegment hinzugefügt wird.
Die SweepDirection-Enumeration definiert die folgenden Members:
CounterClockwise, gibt an, dass die Bögen gegen den Uhrzeigersinn gezeichnet werden.Clockwise, gibt an, dass die Bögen im Uhrzeigersinn gezeichnet werden.
Das folgende Beispiel zeigt, wie man ein ArcSegment in einem Path-Objekt erstellt und rendert:
<Path Stroke="Black">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,10">
<PathFigure.Segments>
<PathSegmentCollection>
<ArcSegment Size="100,50"
RotationAngle="45"
IsLargeArc="True"
SweepDirection="CounterClockwise"
Point="200,100" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
In diesem Beispiel wird ein elliptischer Bogen von (10,10) nach (200,100) gezeichnet.
Erstellen eines Bezier Segments
Ein BezierSegment erzeugt eine kubische Bezier-Kurve zwischen zwei Punkten. Eine kubische Bezier-Kurve wird durch vier Punkte definiert: einen Startpunkt, einen Endpunkt und zwei Steuerpunkte.
Die BezierSegment-Klasse definiert die folgenden Eigenschaften:
Point1, vom TypPoint, der den ersten Kontrollpunkt der Kurve darstellt. Der Standardwert dieser Eigenschaft ist (0,0).Point2, vom TypPoint, der den zweiten Kontrollpunkt der Kurve darstellt. Der Standardwert dieser Eigenschaft ist (0,0).Point3, vom TypPoint, der den Endpunkt der Kurve darstellt. Der Standardwert dieser 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.
Hinweis
Die Klasse BezierSegment enthält keine Eigenschaft für den Anfangspunkt der Kurve. Der Startpunkt der Kurve ist der aktuelle Punkt des PathFigure, zu dem der BezierSegment hinzugefügt wird.
Die beiden Kontrollpunkte einer kubischen Bezier-Kurve verhalten sich wie Magneten, die Teile einer ansonsten geraden Linie an sich ziehen und eine Kurve erzeugen. Der erste Kontrollpunkt betrifft den Anfangsbereich der Kurve. Der zweite Kontrollpunkt betrifft den Endabschnitt der Kurve. Die Kurve muss nicht unbedingt durch einen der beiden Kontrollpunkte verlaufen. Stattdessen bewegt jeder Kontrollpunkt seinen Teil der Linie auf sich selbst zu, aber nicht durch sich selbst hindurch.
Das folgende Beispiel zeigt, wie man ein BezierSegment in einem Path-Objekt erstellt und rendert:
<Path Stroke="Black">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,10">
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment Point1="100,0"
Point2="200,200"
Point3="300,10" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
In diesem Beispiel wird eine kubische Bezier-Kurve von (10,10) nach (300,10) gezeichnet. Die Kurve hat zwei Kontrollpunkte bei (100,0) und (200,200):
Erstellen eines LineSegment
Ein LineSegment erzeugt eine Linie zwischen zwei Punkten.
Die Klasse LineSegment definiert die Eigenschaft Point vom Typ Point, die den Endpunkt des Liniensegments darstellt. Der Standardwert dieser Eigenschaft ist (0,0), und sie wird von einem BindableProperty-Objekt unterstützt, was bedeutet, dass sie das Ziel von Datenbindungen sein kann, und gestylt.
Hinweis
Die Klasse LineSegment enthält keine Eigenschaft für den Anfangspunkt der Linie. Sie definiert nur den Endpunkt. Der Anfangspunkt der Zeile ist der aktuelle Punkt der PathFigure, zu dem LineSegment hinzugefügt wird.
Das folgende Beispiel zeigt, wie man LineSegment-Objekte in einem Path-Objekt erstellt und rendert:
<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 wird ein Liniensegment von (10,100) nach (100,100) und von (100,100) nach (100,50) gezogen. Außerdem ist die PathFigure geschlossen, weil ihre IsClosed-Eigenschaft auf true gesetzt ist. Dies führt dazu, dass ein Dreieck gezeichnet wird:
Erstellen eines PolyBezierSegment
PolyBezierSegment erzeugt eine oder mehrere kubische Bezier-Kurven.
Die Klasse PolyBezierSegment definiert die Eigenschaft Points vom Typ PointCollection, die die Punkte repräsentiert, die den PolyBezierSegment definieren. Ein PointCollection ist ein ObservableCollection von Point-Objekten. Diese Eigenschaft wird durch ein BindableProperty-Objekt unterstützt, was bedeutet, dass sie das Ziel von Datenbindungen sein kann und gestylt werden kann.
Hinweis
Die Klasse PolyBezierSegment enthält keine Eigenschaft für den Anfangspunkt der Kurve. Der Startpunkt der Kurve ist der aktuelle Punkt des PathFigure, zu dem der PolyBezierSegment hinzugefügt wird.
Das folgende Beispiel zeigt, wie man ein PolyBezierSegment in einem Path-Objekt erstellt und rendert:
<Path Stroke="Black">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,10">
<PathFigure.Segments>
<PathSegmentCollection>
<PolyBezierSegment Points="0,0 100,0 150,100 150,0 200,0 300,10" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
In diesem Beispiel gibt PolyBezierSegment zwei kubische Bezier-Kurven an. Die erste Kurve verläuft von (10,10) nach (150,100) mit einem Kontrollpunkt von (0,0) und einem weiteren Kontrollpunkt von (100,0). Die zweite Kurve verläuft von (150,100) nach (300,10) mit einem Kontrollpunkt von (150,0) und einem weiteren Kontrollpunkt von (200,0):
Erstellen eines PolyLineSegment
Ein PolyLineSegment erzeugt ein oder mehrere Liniensegmente.
Die Klasse PolyLineSegment definiert die Eigenschaft Points vom Typ PointCollection, die die Punkte darstellt, die den PolyLineSegment definieren. Ein PointCollection ist ein ObservableCollection von Point-Objekten. Diese Eigenschaft wird durch ein BindableProperty-Objekt unterstützt, was bedeutet, dass sie das Ziel von Datenbindungen sein kann und gestylt werden kann.
Hinweis
Die Klasse PolyLineSegment enthält keine Eigenschaft für den Anfangspunkt der Linie. Der Anfangspunkt der Linie ist der aktuelle Punkt der PathFigure, zu dem PolyLineSegment hinzugefügt wird.
Das folgende Beispiel zeigt, wie man ein PolyLineSegment in einem Path-Objekt erstellt und rendert:
<Path Stroke="Black">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="10,10">
<PathFigure.Segments>
<PolyLineSegment Points="50,10 50,50" />
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
In diesem Beispiel gibt PolyLineSegment zwei Linien an. Die erste Linie reicht von (10,10) bis (50,10), und die zweite Linie reicht von (50,10) bis (50,50):
Erstellen eines PolyQuadraticBezierSegment
Ein PolyQuadraticBezierSegment erzeugt eine oder mehrere quadratische Bezier-Kurven.
Die Klasse PolyQuadraticBezierSegment definiert die Eigenschaft Points vom Typ PointCollection, die die Punkte darstellt, die PolyQuadraticBezierSegment definieren. Ein PointCollection ist ein ObservableCollection von Point-Objekten. Diese Eigenschaft wird durch ein BindableProperty-Objekt unterstützt, was bedeutet, dass sie das Ziel von Datenbindungen sein kann und gestylt werden kann.
Hinweis
Die Klasse PolyQuadraticBezierSegment enthält keine Eigenschaft für den Anfangspunkt der Kurve. Der Startpunkt der Kurve ist der aktuelle Punkt des PathFigure, zu dem der PolyQuadraticBezierSegment hinzugefügt wird.
Das folgende Beispiel zeigt, wie man ein PolyQuadraticBezierSegment in einem Path-Objekt erstellt und rendert:
<Path Stroke="Black">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,10">
<PathFigure.Segments>
<PathSegmentCollection>
<PolyQuadraticBezierSegment Points="100,100 150,50 0,100 15,200" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
In diesem Beispiel werden mit PolyQuadraticBezierSegment zwei Bezier-Kurven angegeben. Die erste Kurve verläuft von (10,10) nach (150,50) mit einem Kontrollpunkt bei (100,100). Die zweite Kurve verläuft von (100,100) nach (15,200) mit einem Kontrollpunkt bei (0,100):
Erstellen eines QuadraticBezierSegment
Ein QuadraticBezierSegment erzeugt eine quadratische Bezier-Kurve zwischen zwei Punkten.
Die QuadraticBezierSegment-Klasse definiert die folgenden Eigenschaften:
Point1, vom TypPoint, der den Kontrollpunkt der Kurve darstellt. Der Standardwert dieser Eigenschaft ist (0,0).Point2, vom TypPoint, der den Endpunkt der Kurve darstellt. Der Standardwert dieser 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.
Hinweis
Die Klasse QuadraticBezierSegment enthält keine Eigenschaft für den Anfangspunkt der Kurve. Der Startpunkt der Kurve ist der aktuelle Punkt des PathFigure, zu dem der QuadraticBezierSegment hinzugefügt wird.
Das folgende Beispiel zeigt, wie man ein QuadraticBezierSegment in einem Path-Objekt erstellt und rendert:
<Path Stroke="Black">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="10,10">
<PathFigure.Segments>
<PathSegmentCollection>
<QuadraticBezierSegment Point1="200,200"
Point2="300,10" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
In diesem Beispiel wird eine quadratische Bezier-Kurve von (10,10) nach (300,10) gezeichnet. Die Kurve hat einen Kontrollpunkt bei (200,200):
Erstellen komplexer Geometrien
Komplexere Geometrien können mithilfe einer Kombination aus PathSegment-Objekten erstellt werden. Im folgenden Beispiel wird eine Form mit einem BezierSegment, einem LineSegment und einem ArcSegment erstellt:
<Path Stroke="Black">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="10,50">
<PathFigure.Segments>
<BezierSegment Point1="100,0"
Point2="200,200"
Point3="300,100"/>
<LineSegment Point="400,100" />
<ArcSegment Size="50,50"
RotationAngle="45"
IsLargeArc="True"
SweepDirection="Clockwise"
Point="200,100"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
In diesem Beispiel wird ein BezierSegment zunächst mit 4 Punkten definiert. Das Beispiel fügt dann ein LineSegment hinzu, das zwischen dem Endpunkt des BezierSegment und dem durch LineSegment angegebenen Punkt gezeichnet wird. Schließlich wird ein ArcSegment vom Endpunkt des LineSegment zu dem durch ArcSegment angegebenen Punkt gezogen.
Noch komplexere Geometrien können mithilfe einer Kombination aus PathFigure-Objekten innerhalb einer PathGeometry erstellt werden. Das folgende Beispiel erstellt ein PathGeometry aus sieben PathFigure-Objekten, von denen einige mehrere PathSegment-Objekte enthalten:
<Path Stroke="Red"
StrokeThickness="12"
StrokeLineJoin="Round">
<Path.Data>
<PathGeometry>
<!-- H -->
<PathFigure StartPoint="0,0">
<LineSegment Point="0,100" />
</PathFigure>
<PathFigure StartPoint="0,50">
<LineSegment Point="50,50" />
</PathFigure>
<PathFigure StartPoint="50,0">
<LineSegment Point="50,100" />
</PathFigure>
<!-- E -->
<PathFigure StartPoint="125, 0">
<BezierSegment Point1="60, -10"
Point2="60, 60"
Point3="125, 50" />
<BezierSegment Point1="60, 40"
Point2="60, 110"
Point3="125, 100" />
</PathFigure>
<!-- L -->
<PathFigure StartPoint="150, 0">
<LineSegment Point="150, 100" />
<LineSegment Point="200, 100" />
</PathFigure>
<!-- L -->
<PathFigure StartPoint="225, 0">
<LineSegment Point="225, 100" />
<LineSegment Point="275, 100" />
</PathFigure>
<!-- O -->
<PathFigure StartPoint="300, 50">
<ArcSegment Size="25, 50"
Point="300, 49.9"
IsLargeArc="True" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
In diesem Beispiel wird das Wort „Hello“ mit einer Kombination aus LineSegment- und BezierSegment-Objekten sowie einem einzigen ArcSegment-Objekt gezeichnet:
Zusammengesetzte Geometrien
Zusammengesetzte Geometrieobjekte können mit GeometryGroup erstellt werden. Die GeometryGroup-Klasse erzeugt eine zusammengesetzte Geometrie aus einem oder mehreren Geometry-Objekten. Einer GeometryGroup können beliebig viele Geometry-Objekte hinzugefügt werden.
Die GeometryGroup-Klasse definiert die folgenden Eigenschaften:
Children, vom TypGeometryCollection, der die Objekte angibt, die denGeomtryGroupdefinieren. EinGeometryCollectionist einObservableCollectionvonGeometry-Objekten.FillRule, vom TypFillRule, der angibt, wie die Schnittflächen imGeometryGroupkombiniert werden. Der Standardwert dieser Eigenschaft istFillRule.EvenOdd.
Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.
Hinweis
Die Children-Eigenschaft ist die ContentProperty der GeometryGroup-Klasse und muss daher nicht explizit in XAML festgelegt werden.
Weitere Informationen zur FillRule Enumeration finden Sie unter Xamarin.Forms Shapes: Füllregeln.
Um eine zusammengesetzte Geometrie zu zeichnen, legen Sie die erforderlichen Geometry-Objekte als untergeordnete Objekte eines GeometryGroup-Objekts fest und zeigen sie mit einem Path-Objekt an. Die folgende XAML zeigt ein Beispiel dafür:
<Path Stroke="Green"
StrokeThickness="2"
Fill="Orange">
<Path.Data>
<GeometryGroup>
<EllipseGeometry RadiusX="100"
RadiusY="100"
Center="150,150" />
<EllipseGeometry RadiusX="100"
RadiusY="100"
Center="250,150" />
<EllipseGeometry RadiusX="100"
RadiusY="100"
Center="150,250" />
<EllipseGeometry RadiusX="100"
RadiusY="100"
Center="250,250" />
</GeometryGroup>
</Path.Data>
</Path>
In diesem Beispiel werden vier EllipseGeometry Objekte mit identischen x-Radius- und y-Radius-Koordinaten, aber mit unterschiedlichen Mittelpunktskoordinaten, kombiniert. So entstehen vier sich überlappende Kreise, deren Innenräume aufgrund der Standardfüllregel EvenOdd orange gefüllt sind:
RoundRectangleGeometry
Eine runde Rechteckgeometrie stellt die Geometrie eines Rechtecks oder Quadrats mit abgerundeten Ecken dar und wird durch einen Eckenradius und eine Rect-Struktur definiert, die seine relative Position sowie seine Höhe und Breite angibt.
Die Klasse RoundRectangleGeometry, die sich von der Klasse GeometryGroup ableitet, definiert die folgenden Eigenschaften:
CornerRadiusvom TypCornerRadius, der den Eckenradius der Geometrie darstellt.Rect, vom TypRect, der die Abmessungen des Rechtecks darstellt.
Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.
Hinweis
Die vom RoundRectangleGeometry verwendete Ausfüllregel lautet FillRule.Nonzero. Weitere Informationen zu Füllregeln finden Sie unter Xamarin.Forms Shapes: Füllregeln.
Das folgende Beispiel zeigt, wie man ein RoundRectangleGeometry in einem Path-Objekt erstellt und rendert:
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<RoundRectangleGeometry CornerRadius="5"
Rect="10,10,150,100" />
</Path.Data>
</Path>
Die Position und die Abmessungen des Rechtecks werden durch eine Rect-Struktur definiert. In diesem Beispiel ist die Position (10,10), die Breite ist 150 und die Höhe ist 100 geräteunabhängige Einheiten. Außerdem werden die Ecken der Rechtecke mit einem Radius von 5 geräteunabhängigen Einheiten abgerundet.
Schneiden mit einer Geometrie
Die Klasse VisualElement hat eine Clip-Eigenschaft vom Typ Geometry, die den Umriss des Inhalts eines Elements definiert. Wenn die Clip-Eigenschaft auf ein Geometry-Objekt gesetzt wird, ist nur der Bereich sichtbar, der innerhalb der Region des Geometry liegt.
Das folgende Beispiel zeigt, wie man ein Geometry-Objekt als Zuschneideareal für ein Image-Objekt verwendet:
<Image Source="monkeyface.png">
<Image.Clip>
<EllipseGeometry RadiusX="100"
RadiusY="100"
Center="180,180" />
</Image.Clip>
</Image>
In diesem Beispiel wird ein EllipseGeometry- mit RadiusX- und RadiusY-Werten von 100 und einem Center-Wert von (180,180) auf die Clip-Eigenschaft eines Image gesetzt. Es wird nur der Teil des Bildes angezeigt, der im Bereich der Ellipse liegt:
Hinweis
Einfache Geometrien, Pfadgeometrien und zusammengesetzte Geometrien können alle zum Zuschneiden von VisualElement-Objekten verwendet werden.
Weitere Features
Die Klasse GeometryHelper bietet die folgenden Hilfsmethoden:
FlattenGeometry, reduziertGeometryzuPathGeometry.FlattenCubicBezier, reduziert eine kubische Bezierkurve zu einerList<Point>-Sammlung.FlattenQuadraticBezier, reduziert eine quadratische Bezierkurve zu einerList<Point>-Sammlung.FlattenArc, reduziert einen elliptischen Bogen auf eineList<Point>-Sammlung.