Xamarin.Forms Formen: Geometrien
Das Beispiel herunterladenMit Geometry der -Klasse und den daraus abgeleiteten Klassen können Sie die Geometrie einer 2D-Form 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 umfassen.
Die Geometry -Klasse ist die übergeordnete Klasse für mehrere Klassen, die verschiedene Kategorien von Geometrien definieren:
EllipseGeometry, die die Geometrie einer Ellipse oder eines Kreises darstellt.GeometryGroup, der einen Container darstellt, der mehrere Geometrieobjekte in einem einzelnen Objekt kombinieren kann.LineGeometry, die die Geometrie einer Linie darstellt.PathGeometry, die die Geometrie einer komplexen Form darstellt, die aus Bögen, Kurven, Auslassungspunkten, Linien und Rechtecken bestehen kann.RectangleGeometry, die die Geometrie eines Rechtecks oder Quadrats darstellt.
Hinweis
Es gibt auch eine RoundedRectangleGeometry Klasse, die von der GeometryGroup -Klasse abgeleitet ist. Weitere Informationen finden Sie unter RoundRectangleGeometry.
Die Geometry Klassen und Shape scheinen ähnlich zu sein, da sie beide 2D-Formen beschreiben, aber einen wichtigen Unterschied aufweisen. Die Geometry -Klasse wird von der BindableObject -Klasse abgeleitet, während die Shape -Klasse von der View -Klasse abgeleitet ist. Shape Daher können Objekte sich selbst rendern und am Layoutsystem teilnehmen, während Geometry Objekte dies nicht können. Objekte sind zwar Shape leichter verwendbar als Geometry Objekte, Geometry objekte sind jedoch 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 zum Beschneiden zu definieren.
Die folgenden Klassen verfügen über Eigenschaften, die auf Geometry -Objekte festgelegt werden können:
- Die
Path-Klasse verwendet einenGeometry, um ihren Inhalt zu beschreiben. Sie können eine rendernGeometry, indem Sie diePath.Data-Eigenschaft auf einGeometry-Objekt festlegen und die Eigenschaften undStrokedesPathFillObjekts festlegen. - Die
VisualElement-Klasse verfügt über eineClip-Eigenschaft vom TypGeometry, die die Gliederung des Inhalts eines Elements definiert. Wenn dieClip-Eigenschaft auf einGeometry-Objekt festgelegt ist, ist nur der Bereich sichtbar, der sich innerhalb des Bereichs vonGeometrybefindet. Weitere Informationen finden Sie unter Beschneiden mit einer Geometrie.
Die klassen, die von der Geometry -Klasse abgeleitet werden, können in drei Kategorien gruppiert werden: einfache Geometrien, Pfadgeometrien und zusammengesetzte Geometrien.
Einfache Geometrien
Die einfachen Geometrieklassen sind EllipseGeometry, LineGeometryund RectangleGeometry. Sie werden verwendet, um geometrische Grundformen wie Kreise, Linien und Rechtecke zu erstellen. Diese gleichen Formen sowie komplexere Formen können mithilfe eines PathGeometry oder durch Kombinieren von Geometrieobjekten erstellt werden, aber diese Klassen bieten einen einfacheren Ansatz für die Erstellung dieser grundlegenden geometrischen Formen.
Ellipsegeometry
Eine Ellipsengeometrie stellt die Geometrie oder eine Ellipse oder einen Kreis dar und wird durch einen Mittelpunkt, einen x-Radius und einen y-Radius definiert.
Die EllipseGeometry-Klasse definiert die folgenden Eigenschaften:
Centervom TypPoint, der den Mittelpunkt der Geometrie darstellt.RadiusXvom Typdouble, der den x-radius-Wert der Geometrie darstellt. Der Standardwert dieser Eigenschaft ist 0,0.RadiusYvom Typdouble, der den y-radius-Wert der Geometrie 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.
Das folgende Beispiel zeigt, wie Sie eine EllipseGeometry in einem Path -Objekt erstellen und rendern:
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<EllipseGeometry Center="50,50"
RadiusX="50"
RadiusY="50" />
</Path.Data>
</Path>
In diesem Beispiel ist die Mitte von EllipseGeometry auf (50,50) festgelegt, und der x-Radius und der y-Radius sind beide auf 50 festgelegt. Dadurch entsteht ein roter Kreis mit einem Durchmesser von 100 geräteunabhängigen Einheiten, dessen Inneres blau lackiert ist:
LineGeometry
Eine Liniengeometrie stellt die Geometrie einer Linie dar und wird definiert, indem der Startpunkt der Linie und der Endpunkt angegeben werden.
Die LineGeometry-Klasse definiert die folgenden Eigenschaften:
StartPoint, vom TypPoint, der den Startpunkt der Linie darstellt.EndPointvom TypPoint, der den Endpunkt der Linie darstellt.
Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.
Das folgende Beispiel zeigt, wie Sie eine LineGeometry in einem Path -Objekt erstellen und rendern:
<Path Stroke="Black">
<Path.Data>
<LineGeometry StartPoint="10,20"
EndPoint="100,130" />
</Path.Data>
</Path>
In diesem Beispiel wird ein LineGeometry von (10,20) bis (100,130) gezeichnet:
Hinweis
Das Festlegen der Fill -Eigenschaft eines Path , das einen rendert, LineGeometry hat keine Auswirkung, da eine Linie keinen Inneren aufweist.
RectangleGeometry
Eine Rechteckgeometrie stellt die Geometrie eines Rechtecks oder Quadrats dar und wird mit einer Rect Struktur definiert, die seine relative Position sowie dessen Höhe und Breite angibt.
Die RectangleGeometry -Klasse definiert die Rect -Eigenschaft vom Typ Rect, die die Dimensionen des Rechtecks darstellt. Diese Eigenschaft wird von einem BindableProperty -Objekt unterstützt, was bedeutet, dass es das Ziel von Datenbindungen sein und stilisiert werden kann.
Das folgende Beispiel zeigt, wie Sie eine RectangleGeometry in einem Path -Objekt erstellen und rendern:
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<RectangleGeometry Rect="10,10,150,100" />
</Path.Data>
</Path>
Die Position und die Dimensionen des Rechtecks werden durch eine Rect -Struktur definiert. In diesem Beispiel ist die Position (10,10), die Breite 150 und die Höhe beträgt 100 geräteunabhängige Einheiten:
Pfadgeometrien
Eine Pfadgeometrie beschreibt eine komplexe Form, die aus Bögen, Kurven, Ellipsen, Linien und Rechtecken bestehen kann.
Die PathGeometry-Klasse definiert die folgenden Eigenschaften:
Figuresvom TypPathFigureCollection, das die Auflistung vonPathFigureObjekten darstellt, die den Inhalt des Pfads beschreiben.FillRulevom TypFillRule, der bestimmt, wie die sich überschneidenden Bereiche, die in der Geometrie enthalten sind, kombiniert werden. Der Standardwert dieser Eigenschaft istFillRule.EvenOdd.
Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.
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 von XAML festgelegt werden.
Ein PathGeometry besteht aus einer Auflistung von PathFigure -Objekten, wobei jedes PathFigure eine Form in der Geometrie beschreibt. Jedes PathFigure besteht selbst aus einem oder PathSegment mehreren Objekten, von denen jedes ein Segment der Form beschreibt. Es gibt viele Arten von Segmenten:
ArcSegment, wodurch ein elliptischer Bogen zwischen zwei Punkten erstellt wird.BezierSegment, wodurch eine kubische Bézierkurve zwischen zwei Punkten erstellt wird.LineSegment, wodurch eine Linie zwischen zwei Punkten erstellt wird.PolyBezierSegment, wodurch eine Reihe kubischer Bézierkurven erstellt wird.PolyLineSegment, wodurch eine Reihe von Zeilen erstellt wird.PolyQuadraticBezierSegment, wodurch eine Reihe von quadratischen Bézierkurven erstellt wird.QuadraticBezierSegment, wodurch eine quadratische Bézierkurve erstellt wird.
Alle oben genannten Klassen werden von der abstrakten PathSegment Klasse abgeleitet.
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. Beispielsweise kann eine vertikale Linie von 10,50 bis 10,150 definiert werden, indem die StartPoint -Eigenschaft auf 10,50 festgelegt und eine LineSegment mit der Point -Eigenschaftseinstellung erstellt wird 10,150:
<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 können mithilfe einer Kombination von PathSegment -Objekten und mithilfe mehrerer PathFigure Objekte innerhalb eines PathGeometryerstellt werden.
Erstellen eines ArcSegment-Elements
Ein ArcSegment erstellt einen elliptischen Bogen zwischen zwei Punkten. Ein elliptischer Bogen wird durch seine Start- und Endpunkte, x- und y-Radius, x-Achse Drehungsfaktor, einen Wert definiert, der angibt, ob der Bogen größer als 180 Grad sein soll, und ein Wert, der die Richtung beschreibt, in der der Bogen gezeichnet wird.
Die ArcSegment-Klasse definiert die folgenden Eigenschaften:
Point, vom TypPoint, der den Endpunkt des elliptischen Bogens darstellt. Der Standardwert dieser Eigenschaft ist (0,0).Size, vom TypSize, der den x- und y-Radius des Bogens darstellt. Der Standardwert dieser Eigenschaft ist (0,0).RotationAnglevom Typdouble, der den Betrag in Grad darstellt, um den die Ellipse um die x-Achse gedreht wird. Der Standardwert dieser Eigenschaft ist 0.SweepDirectionvom TypSweepDirection, der die Richtung angibt, in der der Bogen gezeichnet wird. Der Standardwert dieser Eigenschaft istSweepDirection.CounterClockwise.IsLargeArcvom Typbool, der angibt, ob der Bogen größer als 180 Grad sein soll. Der Standardwert dieser Eigenschaft istfalse.
Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.
Hinweis
Die ArcSegment -Klasse enthält keine -Eigenschaft für den Ausgangspunkt des Bogens. Es definiert nur den Endpunkt des Bogens, den er darstellt. Der Startpunkt des Bogens ist der aktuelle Punkt des , dem PathFigure der ArcSegment hinzugefügt wird.
Die SweepDirection-Enumeration definiert die folgenden Member:
CounterClockwise, das angibt, dass Bögen gegen den Uhrzeigersinn gezeichnet werden.Clockwise, die angibt, dass Bögen im Uhrzeigersinn gezeichnet werden.
Das folgende Beispiel zeigt, wie Sie eine ArcSegment in einem Path -Objekt erstellen und rendern:
<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) bis (200.100) gezeichnet.
Erstellen eines BezierSegments
Ein BezierSegment erstellt eine kubische Bézierkurve zwischen zwei Punkten. Eine kubische Bézierkurve wird durch vier Punkte definiert: einen Startpunkt, einen Endpunkt und zwei Kontrollpunkte.
Die BezierSegment-Klasse definiert die folgenden Eigenschaften:
Point1, vom TypPoint, der den ersten Kontrollpunkt der Kurve darstellt. Der Standardwert dieser Eigenschaft ist (0,0).Point2vom TypPoint, der den zweiten Kontrollpunkt der Kurve darstellt. Der Standardwert dieser Eigenschaft ist (0,0).Point3vom TypPoint, der den Endpunkt der Kurve 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.
Hinweis
Die BezierSegment -Klasse enthält keine -Eigenschaft für den Ausgangspunkt der Kurve. Der Startpunkt der Kurve ist der aktuelle Punkt der , der PathFigure hinzugefügt BezierSegment wird.
Die beiden Kontrollpunkte einer kubischen Bézierkurve verhalten sich wie Magnete, ziehen Teile der sonst geraden Linie zu sich und erzeugen eine Kurve. Der erste Kontrollpunkt wirkt sich auf den Startteil der Kurve aus. Der zweite Kontrollpunkt wirkt sich auf den Endteil der Kurve aus. Die Kurve durchläuft nicht unbedingt einen der Kontrollpunkte. Stattdessen verschiebt jeder Kontrollpunkt seinen Teil der Linie zu sich selbst, aber nicht durch sich selbst.
Das folgende Beispiel zeigt, wie Sie eine BezierSegment in einem Path -Objekt erstellen und rendern:
<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 Bézierkurve von (10,10) bis (300,10) gezeichnet. Die Kurve hat zwei Kontrollpunkte bei (100,0) und (200.200):
Erstellen eines LineSegments
Ein LineSegment erstellt eine Linie zwischen zwei Punkten.
Die LineSegment -Klasse definiert die Point -Eigenschaft vom Typ Point, die den Endpunkt des Zeilensegments darstellt. Der Standardwert dieser Eigenschaft ist (0,0), und sie wird von einem BindableProperty -Objekt unterstützt, was bedeutet, dass es das Ziel von Datenbindungen sein und stilisiert werden kann.
Hinweis
Die LineSegment -Klasse enthält keine -Eigenschaft für den Startpunkt der Zeile. Es definiert nur den Endpunkt. Der Startpunkt der Zeile ist der aktuelle Punkt der , der PathFigure hinzugefügt LineSegment wird.
Das folgende Beispiel zeigt, wie Objekte in einem Path -Objekt erstellt und gerendert werdenLineSegment:
<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) bis (100.100) und von (100.100) bis (100,50) gezeichnet. Darüber hinaus wird geschlossen, da seine PathFigureIsClosed -Eigenschaft auf truefestgelegt ist. Dies führt dazu, dass ein Dreieck gezeichnet wird:
Erstellen eines PolyBezierSegment
Ein PolyBezierSegment erstellt eine oder mehrere kubische Bézierkurven.
Die PolyBezierSegment -Klasse definiert die Points -Eigenschaft vom Typ PointCollection, die die Punkte darstellt, die den PolyBezierSegmentdefinieren. Ein PointCollection ist ein ObservableCollection von Point -Objekten. Diese Eigenschaft wird von einem BindableProperty -Objekt unterstützt, was bedeutet, dass es das Ziel von Datenbindungen sein und stilisiert werden kann.
Hinweis
Die PolyBezierSegment -Klasse enthält keine -Eigenschaft für den Ausgangspunkt der Kurve. Der Startpunkt der Kurve ist der aktuelle Punkt der , der PathFigure hinzugefügt PolyBezierSegment wird.
Das folgende Beispiel zeigt, wie Sie eine PolyBezierSegment in einem Path -Objekt erstellen und rendern:
<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 zwei PolyBezierSegment kubische Bézierkurven an. Die erste Kurve ist von (10,10) bis (150.100) mit einem Kontrollpunkt von (0,0) und einem weiteren Kontrollpunkt von (100,0). Die zweite Kurve ist von (150.100) bis (300,10) mit einem Kontrollpunkt von (150,0) und einem weiteren Kontrollpunkt von (200,0):
Erstellen eines PolyLineSegment
Ein PolyLineSegment erstellt ein oder mehrere Zeilensegmente.
Die PolyLineSegment -Klasse definiert die Points -Eigenschaft vom Typ PointCollection, die die Punkte darstellt, die den PolyLineSegmentdefinieren. Ein PointCollection ist ein ObservableCollection von Point -Objekten. Diese Eigenschaft wird von einem BindableProperty -Objekt unterstützt, was bedeutet, dass es das Ziel von Datenbindungen sein und stilisiert werden kann.
Hinweis
Die PolyLineSegment -Klasse enthält keine -Eigenschaft für den Startpunkt der Zeile. Der Startpunkt der Zeile ist der aktuelle Punkt der , der PathFigure hinzugefügt PolyLineSegment wird.
Das folgende Beispiel zeigt, wie Sie eine PolyLineSegment in einem Path -Objekt erstellen und rendern:
<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 zwei PolyLineSegment Zeilen an. Die erste Zeile ist von (10,10) bis (50,10) und die zweite Zeile von (50,10) bis (50,50):
Erstellen eines PolyQuadraticBezierSegment
Ein PolyQuadraticBezierSegment erstellt eine oder mehrere quadratische Bézierkurven.
Die PolyQuadraticBezierSegment -Klasse definiert die Points -Eigenschaft vom Typ PointCollection, die die Punkte darstellt, die den PolyQuadraticBezierSegmentdefinieren. Ein PointCollection ist ein ObservableCollection von Point -Objekten. Diese Eigenschaft wird von einem BindableProperty -Objekt unterstützt, was bedeutet, dass es das Ziel von Datenbindungen sein und stilisiert werden kann.
Hinweis
Die PolyQuadraticBezierSegment -Klasse enthält keine -Eigenschaft für den Ausgangspunkt der Kurve. Der Startpunkt der Kurve ist der aktuelle Punkt der , der PathFigure hinzugefügt PolyQuadraticBezierSegment wird.
Das folgende Beispiel zeigt das Erstellen und Rendern eines PolyQuadraticBezierSegment in einem Path -Objekt:
<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 gibt zwei PolyQuadraticBezierSegment Bézierkurven an. Die erste Kurve ist von (10,10) bis (150,50) mit einem Kontrollpunkt bei (100.100). Die zweite Kurve ist von (100.100) bis (15.200) mit einem Kontrollpunkt bei (0.100):
Erstellen eines QuadraticBezierSegment
Ein QuadraticBezierSegment erstellt eine quadratische Bézierkurve zwischen zwei Punkten.
Die QuadraticBezierSegment-Klasse definiert die folgenden Eigenschaften:
Point1vom TypPoint, der den Kontrollpunkt der Kurve darstellt. Der Standardwert dieser Eigenschaft ist (0,0).Point2vom TypPoint, der den Endpunkt der Kurve 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.
Hinweis
Die QuadraticBezierSegment -Klasse enthält keine -Eigenschaft für den Ausgangspunkt der Kurve. Der Startpunkt der Kurve ist der aktuelle Punkt der , der PathFigure hinzugefügt QuadraticBezierSegment wird.
Das folgende Beispiel zeigt, wie Sie eine QuadraticBezierSegment in einem Path -Objekt erstellen und rendern:
<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 Bézierkurve von (10,10) bis (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 mithilfe von BezierSegment, LineSegmentund ArcSegmenterstellt:
<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 zuerst mithilfe BezierSegment von vier Punkten definiert. Im Beispiel wird dann ein LineSegmenthinzugefügt, das zwischen dem Endpunkt von BezierSegment und dem durch LineSegmentden angegebenen Punkt gezeichnet wird. Schließlich wird ein ArcSegment vom Endpunkt des LineSegment bis zum durch ArcSegmentangegebenen Punkt gezeichnet.
Noch komplexere Geometrien können mithilfe einer Kombination aus PathFigure-Objekten innerhalb einer PathGeometry erstellt werden. Im folgenden Beispiel wird ein PathGeometry aus sieben PathFigure -Objekten erstellt, 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 zusammen mit einem einzelnen ArcSegment -Objekt gezeichnet:
Zusammengesetzte Geometrien
Zusammengesetzte Geometrieobjekte können mit einem GeometryGrouperstellt werden. Die GeometryGroup -Klasse erstellt 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:
Childrenvom TypGeometryCollection, das die -Objekte angibt, die definierenGeomtryGroup. EinGeometryCollectionist einObservableCollectionvonGeometry-Objekten.FillRulevom TypFillRule, der angibt, wie die sich überschneidenden Bereiche imGeometryGroupkombiniert werden. Der Standardwert dieser Eigenschaft istFillRule.EvenOdd.
Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.
Hinweis
Die Children -Eigenschaft ist die ContentProperty der GeometryGroup -Klasse und muss daher nicht explizit von 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 fest GeometryGroup, und zeigen Sie 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 Mittelkoordinaten kombiniert. Dadurch werden vier überlappende Kreise erstellt, deren Inneres aufgrund der Standardfüllregel EvenOdd orange gefüllt ist:
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 dessen Höhe und Breite angibt.
Die RoundRectangleGeometry -Klasse, die von der GeometryGroup -Klasse abgeleitet wird, definiert die folgenden Eigenschaften:
CornerRadius, vom TypCornerRadius, bei dem es sich um den Eckradius der Geometrie handelt.Rectvom TypRect, der die Dimensionen des Rechtecks darstellt.
Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.
Hinweis
Die Füllregel, die RoundRectangleGeometry von verwendet wird, ist FillRule.Nonzero. Weitere Informationen zu Füllregeln finden Sie unter Xamarin.Forms Shapes: Füllregeln.
Das folgende Beispiel zeigt, wie Sie eine RoundRectangleGeometry in einem Path -Objekt erstellen und rendern:
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<RoundRectangleGeometry CornerRadius="5"
Rect="10,10,150,100" />
</Path.Data>
</Path>
Die Position und die Dimensionen des Rechtecks werden durch eine Rect -Struktur definiert. In diesem Beispiel ist die Position (10,10), die Breite 150 und die Höhe beträgt 100 geräteunabhängige Einheiten. Darüber hinaus werden die Rechteckecke mit einem Radius von 5 geräteunabhängigen Einheiten abgerundet.
Clip with a Geometry
Die VisualElement -Klasse verfügt über eine Clip -Eigenschaft vom Typ Geometry, die die Gliederung des Inhalts eines Elements definiert. Wenn die Clip -Eigenschaft auf ein Geometry -Objekt festgelegt ist, ist nur der Bereich sichtbar, der sich innerhalb des Bereichs von Geometry befindet.
Das folgende Beispiel zeigt, wie Sie ein Geometry -Objekt als Clipbereich für einen Imageverwenden:
<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 den Werten 100 und dem Center Wert (180.180) auf die Clip -Eigenschaft eines Imagefestgelegt. Nur der Teil des Bilds, der sich innerhalb des Bereichs der Ellipse befindet, wird angezeigt:
Hinweis
Einfache Geometrien, Pfadgeometrien und zusammengesetzte Geometrien können zum Beschneiden VisualElement von Objekten verwendet werden.
Weitere Features
Die GeometryHelper -Klasse stellt die folgenden Hilfsmethoden bereit:
FlattenGeometry, wodurch einGeometryzu einemPathGeometryvereinfacht wird.FlattenCubicBezier, wodurch eine kubische Bézierkurve in eineList<Point>Sammlung vereinfacht wird.FlattenQuadraticBezier, wodurch eine quadratische Bézierkurve in eineList<Point>Auflistung vereinfacht wird.FlattenArc, wodurch ein elliptischer Bogen zu einerList<Point>Sammlung vereinfacht wird.