Xamarin.Forms Forme: geometrie
La Geometry
classe e le classi che ne derivano consentono di descrivere la geometria di una forma 2D. Geometry
gli oggetti possono essere semplici, ad esempio rettangoli e cerchi o compositi, creati da due o più oggetti geometry. Inoltre, è possibile creare geometrie più complesse che includono archi e curve.
La Geometry
classe è la classe padre per diverse classi che definiscono diverse categorie di geometrie:
EllipseGeometry
, che rappresenta la geometria di un'ellisse o di un cerchio.GeometryGroup
, che rappresenta un contenitore che può combinare più oggetti geometry in un singolo oggetto.LineGeometry
, che rappresenta la geometria di una linea.PathGeometry
, che rappresenta la geometria di una forma complessa che può essere composta da archi, curve, ellissi, linee e rettangoli.RectangleGeometry
, che rappresenta la geometria di un rettangolo o di un quadrato.
Nota
Esiste anche una RoundedRectangleGeometry
classe che deriva dalla GeometryGroup
classe . Per altre informazioni, vedere RoundRectangleGeometry.
Le Geometry
classi e Shape
sembrano simili, in quanto descrivono entrambe le forme 2D, ma hanno una differenza importante. La Geometry
classe deriva dalla BindableObject
classe , mentre la Shape
classe deriva dalla View
classe . Pertanto, Shape
gli oggetti possono eseguire il rendering di se stessi e partecipare al sistema di layout, mentre Geometry
gli oggetti non possono. Mentre Shape
gli oggetti sono più facilmente utilizzabili rispetto agli Geometry
oggetti, Geometry
gli oggetti sono più versatili. Mentre un Shape
oggetto viene usato per eseguire il rendering della grafica 2D, è possibile usare un Geometry
oggetto per definire l'area geometrica per la grafica 2D e definire un'area per il ritaglio.
Le classi seguenti hanno proprietà che possono essere impostate su Geometry
oggetti:
- La
Path
classe usa un oggettoGeometry
per descriverne il contenuto. È possibile eseguire il rendering di unGeometry
oggetto impostando laPath.Data
proprietà su unGeometry
oggetto e impostando lePath
proprietà eStroke
dell'oggettoFill
. - La
VisualElement
classe ha unaClip
proprietà di tipoGeometry
, che definisce la struttura del contenuto di un elemento. Quando laClip
proprietà è impostata su unGeometry
oggetto , sarà visibile solo l'area all'interno dell'areaGeometry
di . Per altre informazioni, vedere Ritaglia con una geometria.
Le classi che derivano dalla Geometry
classe possono essere raggruppate in tre categorie: geometrie semplici, geometrie di percorso e geometrie composite.
Geometrie semplici
Le classi geometry semplici sono EllipseGeometry
, LineGeometry
e RectangleGeometry
. Vengono usati per creare forme geometriche di base, ad esempio cerchi, linee e rettangoli. Queste stesse forme, oltre a forme più complesse, possono essere create usando un PathGeometry
oggetto o combinando oggetti geometry insieme, ma queste classi offrono un approccio più semplice per la produzione di queste forme geometriche di base.
EllipseGeometry
Una geometria con puntini di sospensione rappresenta la geometria o un cerchio o un ellisse ed è definita da un punto centrale, un raggio x e un raggio y.
La EllipseGeometry
classe definisce le proprietà seguenti:
Center
, di tipoPoint
, che rappresenta il punto centrale della geometria.RadiusX
, di tipodouble
, che rappresenta il valore del raggio x della geometria. Il valore predefinito di questa proprietà è 0,0.RadiusY
, di tipodouble
, che rappresenta il valore del raggio y della geometria. Il valore predefinito di questa proprietà è 0,0.
Queste proprietà sono supportate da BindableProperty
oggetti, il che significa che possono essere destinazioni di data binding e stili.
Nell'esempio seguente viene illustrato come creare ed eseguire il rendering di un oggetto EllipseGeometry
in un Path
oggetto :
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<EllipseGeometry Center="50,50"
RadiusX="50"
RadiusY="50" />
</Path.Data>
</Path>
In questo esempio il centro di EllipseGeometry
è impostato su (50,50) e il raggio x e il raggio y sono entrambi impostati su 50. Questo crea un cerchio rosso con un diametro di 100 unità indipendenti dal dispositivo, il cui interno è dipinto blu:
LineGeometry
Una geometria di linea rappresenta la geometria di una linea e viene definita specificando il punto iniziale della linea e il punto finale.
La LineGeometry
classe definisce le proprietà seguenti:
StartPoint
, di tipoPoint
, che rappresenta il punto iniziale della riga.EndPoint
, di tipoPoint
, che rappresenta il punto finale della riga.
Queste proprietà sono supportate da BindableProperty
oggetti, il che significa che possono essere destinazioni di data binding e stili.
Nell'esempio seguente viene illustrato come creare ed eseguire il rendering di un LineGeometry
oggetto in un Path
oggetto :
<Path Stroke="Black">
<Path.Data>
<LineGeometry StartPoint="10,20"
EndPoint="100,130" />
</Path.Data>
</Path>
In questo esempio viene disegnato un oggetto LineGeometry
da (10,20) a (100,130):
Nota
L'impostazione della proprietà di un Path
oggetto che esegue il Fill
rendering di un LineGeometry
oggetto non avrà alcun effetto, perché una linea non ha interni.
RectangleGeometry
Una geometria rettangolo rappresenta la geometria di un rettangolo o di un quadrato e viene definita con una Rect
struttura che ne specifica la posizione relativa e l'altezza e la larghezza.
La RectangleGeometry
classe definisce la Rect
proprietà di tipo Rect
, che rappresenta le dimensioni del rettangolo. Questa proprietà è supportata da un BindableProperty
oggetto , il che significa che può essere la destinazione dei data binding e stili.
Nell'esempio seguente viene illustrato come creare ed eseguire il rendering di un RectangleGeometry
oggetto in un Path
oggetto :
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<RectangleGeometry Rect="10,10,150,100" />
</Path.Data>
</Path>
La posizione e le dimensioni del rettangolo sono definite da una Rect
struttura. In questo esempio la posizione è (10,10), la larghezza è 150 e l'altezza è 100 unità indipendenti dal dispositivo:
Geometrie di percorso
Una geometria di percorso descrive una forma complessa che può essere composta da archi, curve, ellissi, linee e rettangoli.
La PathGeometry
classe definisce le proprietà seguenti:
Figures
, di tipoPathFigureCollection
, che rappresenta la raccolta diPathFigure
oggetti che descrivono il contenuto del percorso.FillRule
, di tipoFillRule
, che determina la modalità di combinazione delle aree intersecanti contenute nella geometria. Il valore predefinito di questa proprietà èFillRule.EvenOdd
.
Queste proprietà sono supportate da BindableProperty
oggetti, il che significa che possono essere destinazioni di data binding e stili.
Per altre informazioni sull'enumerazione FillRule
, vedere Xamarin.Forms Forme: Regole di riempimento.
Nota
La Figures
proprietà è la ContentProperty
della PathGeometry
classe e pertanto non deve essere impostata in modo esplicito da XAML.
Un PathGeometry
oggetto è costituito da una raccolta di PathFigure
oggetti, ognuno PathFigure
dei quali descrive una forma nella geometria. Ognuno PathFigure
di essi è costituito da uno o più PathSegment
oggetti, ognuno dei quali descrive un segmento della forma. Esistono molti tipi di segmenti:
ArcSegment
, che crea un arco ellittico tra due punti.BezierSegment
, che crea una curva di Bézier cubica tra due punti.LineSegment
, che crea una linea tra due punti.PolyBezierSegment
, che crea una serie di curve di Bézier cubiche.PolyLineSegment
, che crea una serie di righe.PolyQuadraticBezierSegment
, che crea una serie di curve di Bézier quadratiche.QuadraticBezierSegment
, che crea una curva di Bézier quadratica.
Tutte le classi precedenti derivano dalla classe astratta PathSegment
.
I segmenti all'interno di un PathFigure
oggetto vengono combinati in una singola forma geometrica con il punto finale di ogni segmento che rappresenta il punto iniziale del segmento successivo. La StartPoint
proprietà di un PathFigure
oggetto specifica il punto da cui viene disegnato il primo segmento. Ogni segmento successivo inizia in corrispondenza del punto finale del segmento precedente. Ad esempio, una linea verticale da 10,50
a 10,150
può essere definita impostando la StartPoint
proprietà su 10,50
e creando un LineSegment
oggetto con un'impostazione Point
della proprietà di 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>
È possibile creare geometrie più complesse usando una combinazione di oggetti e usando più PathFigure
oggetti all'interno di PathSegment
un oggetto PathGeometry
.
Creare un arcoSegment
Un ArcSegment
oggetto crea un arco ellittico tra due punti. Un arco ellittico è definito dai punti iniziale e finale, dal fattore di rotazione dell'asse x e y, da un valore che indica se l'arco deve essere maggiore di 180 gradi e un valore che descrive la direzione in cui viene disegnato l'arco.
La ArcSegment
classe definisce le proprietà seguenti:
Point
, di tipoPoint
, che rappresenta l'endpoint dell'arco ellittico. Il valore predefinito di questa proprietà è (0,0).Size
, di tipoSize
, che rappresenta il raggio x e y dell'arco. Il valore predefinito di questa proprietà è (0,0).RotationAngle
, di tipodouble
, che rappresenta la quantità in gradi in base alla quale l'ellisse viene ruotata attorno all'asse x. Il valore predefinito di questa proprietà è 0.SweepDirection
, di tipoSweepDirection
, che specifica la direzione in cui viene disegnato l'arco. Il valore predefinito di questa proprietà èSweepDirection.CounterClockwise
.IsLargeArc
, di tipobool
, che indica se l'arco deve essere maggiore di 180 gradi. Il valore predefinito di questa proprietà èfalse
.
Queste proprietà sono supportate da BindableProperty
oggetti, il che significa che possono essere destinazioni di data binding e stili.
Nota
La ArcSegment
classe non contiene una proprietà per il punto iniziale dell'arco. Definisce solo il punto finale dell'arco rappresentato. Il punto iniziale dell'arco è il punto corrente dell'oggetto PathFigure
a cui viene aggiunto l'oggetto ArcSegment
.
L'enumerazione SweepDirection
definisce i membri seguenti:
CounterClockwise
, che specifica che gli archi vengono disegnati in direzione antiorario.Clockwise
, che specifica che gli archi vengono disegnati in senso orario.
Nell'esempio seguente viene illustrato come creare ed eseguire il rendering di un oggetto ArcSegment
in un Path
oggetto :
<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 questo esempio, un arco ellittico viene disegnato da (10.10) a (200.100).
Creare un bezierSegment
Un BezierSegment
oggetto crea una curva di Bézier cubica tra due punti. Una curva di Bézier cubica è definita da quattro punti: un punto iniziale, un punto finale e due punti di controllo.
La BezierSegment
classe definisce le proprietà seguenti:
Point1
, di tipoPoint
, che rappresenta il primo punto di controllo della curva. Il valore predefinito di questa proprietà è (0,0).Point2
, di tipoPoint
, che rappresenta il secondo punto di controllo della curva. Il valore predefinito di questa proprietà è (0,0).Point3
, di tipoPoint
, che rappresenta il punto finale della curva. Il valore predefinito di questa proprietà è (0,0).
Queste proprietà sono supportate da BindableProperty
oggetti, il che significa che possono essere destinazioni di data binding e stili.
Nota
La BezierSegment
classe non contiene una proprietà per il punto iniziale della curva. Il punto iniziale della curva è il punto corrente dell'oggetto PathFigure
a cui viene aggiunto l'oggetto BezierSegment
.
I due punti di controllo di una curva di Bézier cubica si comportano come i magneti, attirando parti di ciò che altrimenti sarebbe una linea retta verso se stessi e producendo una curva. Il primo punto di controllo influisce sulla parte iniziale della curva. Il secondo punto di controllo influisce sulla parte finale della curva. La curva non passa necessariamente attraverso uno dei punti di controllo. Ogni punto di controllo sposta invece la parte della linea verso se stessa, ma non attraverso se stessa.
Nell'esempio seguente viene illustrato come creare ed eseguire il rendering di un BezierSegment
oggetto in un Path
oggetto :
<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 questo esempio viene disegnata una curva di Bézier cubica da (10,10) a (300,10). La curva ha due punti di controllo a (100,0) e (200,200):
Creare un oggetto LineSegment
Un LineSegment
oggetto crea una linea tra due punti.
La LineSegment
classe definisce la Point
proprietà , di tipo Point
, che rappresenta il punto finale del segmento di linea. Il valore predefinito di questa proprietà è (0,0) ed è supportato da un BindableProperty
oggetto , il che significa che può essere la destinazione dei data binding e stili.
Nota
La LineSegment
classe non contiene una proprietà per il punto iniziale della riga. Definisce solo il punto finale. Il punto iniziale della riga è il punto corrente dell'oggetto PathFigure
a cui viene aggiunto l'oggetto LineSegment
.
Nell'esempio seguente viene illustrato come creare ed eseguire il rendering LineSegment
di oggetti in un Path
oggetto :
<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 questo esempio, un segmento di linea viene disegnato da (10.100) a (100.100) e da (100.100) a (100,50). Inoltre, l'oggetto PathFigure
viene chiuso perché la relativa IsClosed
proprietà è impostata su true
. In questo modo viene disegnato un triangolo:
Creare un oggetto PolyBezierSegment
Un PolyBezierSegment
oggetto crea una o più curve di Bézier cubiche.
La PolyBezierSegment
classe definisce la Points
proprietà , di tipo PointCollection
, che rappresenta i punti che definiscono l'oggetto PolyBezierSegment
. Un PointCollection
oggetto è di Point
ObservableCollection
oggetti . Questa proprietà è supportata da un BindableProperty
oggetto , il che significa che può essere la destinazione dei data binding e stili.
Nota
La PolyBezierSegment
classe non contiene una proprietà per il punto iniziale della curva. Il punto iniziale della curva è il punto corrente dell'oggetto PathFigure
a cui viene aggiunto l'oggetto PolyBezierSegment
.
Nell'esempio seguente viene illustrato come creare ed eseguire il rendering di un PolyBezierSegment
oggetto in un Path
oggetto :
<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 questo esempio, specifica PolyBezierSegment
due curve di Bézier cubiche. La prima curva è da (10,10) a (150.100) con un punto di controllo (0,0) e un altro punto di controllo di (100,0). La seconda curva è da (150,100) a (300,10) con un punto di controllo (150,0) e un altro punto di controllo di (200,0):
Creare un oggetto PolyLineSegment
Un PolyLineSegment
oggetto crea uno o più segmenti di linea.
La PolyLineSegment
classe definisce la Points
proprietà , di tipo PointCollection
, che rappresenta i punti che definiscono l'oggetto PolyLineSegment
. Un PointCollection
oggetto è di Point
ObservableCollection
oggetti . Questa proprietà è supportata da un BindableProperty
oggetto , il che significa che può essere la destinazione dei data binding e stili.
Nota
La PolyLineSegment
classe non contiene una proprietà per il punto iniziale della riga. Il punto iniziale della riga è il punto corrente dell'oggetto PathFigure
a cui viene aggiunto l'oggetto PolyLineSegment
.
Nell'esempio seguente viene illustrato come creare ed eseguire il rendering di un PolyLineSegment
oggetto in un Path
oggetto :
<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 questo esempio l'oggetto PolyLineSegment
specifica due righe. La prima riga è da (10,10) a (50,10) e la seconda è da (50,10) a (50,50):
Creare un oggetto PolyQuadraticBezierSegment
Un PolyQuadraticBezierSegment
oggetto crea una o più curve di Bézier quadratiche.
La PolyQuadraticBezierSegment
classe definisce la Points
proprietà , di tipo PointCollection
, che rappresenta i punti che definiscono l'oggetto PolyQuadraticBezierSegment
. Un PointCollection
oggetto è di Point
ObservableCollection
oggetti . Questa proprietà è supportata da un BindableProperty
oggetto , il che significa che può essere la destinazione dei data binding e stili.
Nota
La PolyQuadraticBezierSegment
classe non contiene una proprietà per il punto iniziale della curva. Il punto iniziale della curva è il punto corrente dell'oggetto PathFigure
a cui viene aggiunto l'oggetto PolyQuadraticBezierSegment
.
Nell'esempio seguente viene illustrato come creare ed eseguire il rendering di un oggetto PolyQuadraticBezierSegment
in un Path
oggetto :
<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 questo esempio, specifica PolyQuadraticBezierSegment
due curve di Bézier. La prima curva è da (10,10) a (150,50) con un punto di controllo a (100,100). La seconda curva è da (100,100) a (15.200) con un punto di controllo in corrispondenza di (0,100):
Creare un quadraticoBezierSegment
Un QuadraticBezierSegment
oggetto crea una curva di Bézier quadratica tra due punti.
La QuadraticBezierSegment
classe definisce le proprietà seguenti:
Point1
, di tipoPoint
, che rappresenta il punto di controllo della curva. Il valore predefinito di questa proprietà è (0,0).Point2
, di tipoPoint
, che rappresenta il punto finale della curva. Il valore predefinito di questa proprietà è (0,0).
Queste proprietà sono supportate da BindableProperty
oggetti, il che significa che possono essere destinazioni di data binding e stili.
Nota
La QuadraticBezierSegment
classe non contiene una proprietà per il punto iniziale della curva. Il punto iniziale della curva è il punto corrente dell'oggetto PathFigure
a cui viene aggiunto l'oggetto QuadraticBezierSegment
.
Nell'esempio seguente viene illustrato come creare ed eseguire il rendering di un QuadraticBezierSegment
oggetto in un Path
oggetto :
<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 questo esempio viene disegnata una curva di Bézier quadratica da (10,10) a (300,10). La curva ha un punto di controllo a (200,200):
Creare geometrie complesse
È possibile creare geometrie più complesse usando una combinazione di PathSegment
oggetti. Nell'esempio seguente viene creata una forma usando un BezierSegment
oggetto , un LineSegment
e un ArcSegment
oggetto :
<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 questo esempio, un BezierSegment
oggetto viene prima definito usando quattro punti. Nell'esempio viene quindi aggiunto un LineSegment
oggetto , disegnata tra il punto finale dell'oggetto BezierSegment
e il punto specificato dall'oggetto LineSegment
. Infine, un ArcSegment
oggetto viene disegnato dal punto finale dell'oggetto LineSegment
al punto specificato dall'oggetto ArcSegment
.
È possibile creare geometrie ancora più complesse usando più PathFigure
oggetti all'interno di un oggetto PathGeometry
. Nell'esempio seguente viene creato un oggetto PathGeometry
da sette PathFigure
oggetti, alcuni dei quali contengono più PathSegment
oggetti:
<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 questo esempio, la parola "Hello" viene disegnata usando una combinazione di LineSegment
oggetti e BezierSegment
, insieme a un singolo ArcSegment
oggetto:
Geometrie composite
È possibile creare oggetti geometry compositi usando un oggetto GeometryGroup
. La GeometryGroup
classe crea una geometria composita da uno o più Geometry
oggetti. È possibile aggiungere un numero qualsiasi di Geometry
oggetti a un oggetto GeometryGroup
.
La GeometryGroup
classe definisce le proprietà seguenti:
Children
, di tipoGeometryCollection
, che specifica gli oggetti che definiscono .GeomtryGroup
UnGeometryCollection
oggetto è diGeometry
ObservableCollection
oggetti .FillRule
, di tipoFillRule
, che specifica come vengono combinate le aree che intersecano nell'oggettoGeometryGroup
. Il valore predefinito di questa proprietà èFillRule.EvenOdd
.
Queste proprietà sono supportate da BindableProperty
oggetti, il che significa che possono essere destinazioni di data binding e stili.
Nota
La Children
proprietà è la ContentProperty
della GeometryGroup
classe e pertanto non deve essere impostata in modo esplicito da XAML.
Per altre informazioni sull'enumerazione FillRule
, vedere Xamarin.Forms Forme: Regole di riempimento.
Per disegnare una geometria composita, impostare gli oggetti necessari Geometry
come elementi figlio di un GeometryGroup
oggetto e visualizzarli con un Path
oggetto . Il codice XAML seguente mostra un esempio di questo:
<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 questo esempio, quattro EllipseGeometry
oggetti con coordinate di raggio x e raggio y identiche, ma con coordinate del centro diverse, vengono combinati. In questo modo vengono creati quattro cerchi sovrapposti, i cui interni sono riempiti di arancione a causa della regola di riempimento predefinita EvenOdd
:
RoundRectangleGeometry
Una geometria del rettangolo arrotondato rappresenta la geometria di un rettangolo o di un quadrato, con angoli arrotondati ed è definita da un raggio dell'angolo e da una Rect
struttura che specifica la relativa posizione relativa e la relativa altezza e larghezza.
La RoundRectangleGeometry
classe , che deriva dalla GeometryGroup
classe , definisce le proprietà seguenti:
CornerRadius
, di tipoCornerRadius
, che è il raggio dell'angolo della geometria.Rect
, di tipoRect
, che rappresenta le dimensioni del rettangolo.
Queste proprietà sono supportate da BindableProperty
oggetti, il che significa che possono essere destinazioni di data binding e stili.
Nota
La regola di riempimento usata da RoundRectangleGeometry
è FillRule.Nonzero
. Per altre informazioni sulle regole di riempimento, vedere Xamarin.Forms Forme: Regole di riempimento.
Nell'esempio seguente viene illustrato come creare ed eseguire il rendering di un RoundRectangleGeometry
oggetto in un Path
oggetto :
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<RoundRectangleGeometry CornerRadius="5"
Rect="10,10,150,100" />
</Path.Data>
</Path>
La posizione e le dimensioni del rettangolo sono definite da una Rect
struttura. In questo esempio la posizione è (10,10), la larghezza è 150 e l'altezza è 100 unità indipendenti dal dispositivo. Inoltre, gli angoli del rettangolo vengono arrotondati con un raggio di 5 unità indipendenti dal dispositivo.
Ritaglia con una geometria
La VisualElement
classe ha una Clip
proprietà di tipo Geometry
, che definisce la struttura del contenuto di un elemento. Quando la Clip
proprietà è impostata su un Geometry
oggetto , sarà visibile solo l'area all'interno dell'area Geometry
di .
Nell'esempio seguente viene illustrato come usare un Geometry
oggetto come area di ritaglio per un oggetto Image
:
<Image Source="monkeyface.png">
<Image.Clip>
<EllipseGeometry RadiusX="100"
RadiusY="100"
Center="180,180" />
</Image.Clip>
</Image>
In questo esempio, un oggetto EllipseGeometry
con RadiusX
i valori e RadiusY
100 e il Center
valore (180,180) viene impostato sulla Clip
proprietà di un oggetto Image
. Verrà visualizzata solo la parte dell'immagine all'interno dell'area dell'ellisse:
Nota
Le geometrie semplici, le geometrie di percorso e le geometrie composite possono essere usate per ritagliare VisualElement
oggetti.
Altre funzionalità
La GeometryHelper
classe fornisce i metodi helper seguenti:
FlattenGeometry
, che rende flat un oggettoGeometry
in un oggettoPathGeometry
.FlattenCubicBezier
, che appiattisce una curva cubica di Bézier in unaList<Point>
raccolta.FlattenQuadraticBezier
, che rende bidimensionale una curva quadratica di Bézier in unaList<Point>
raccolta.FlattenArc
, che rende bidimensionale un arco ellittico in unaList<Point>
raccolta.