Geometrie
Esplorare l'esempioLa classe .NET Multi-platform App UI (.NET MAUI) Geometry 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 RoundRectangleGeometry 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 oggetto Geometry per descriverne il contenuto. È possibile eseguire il rendering di un Geometry oggetto impostando la
Path.Dataproprietà su un Geometry oggetto e impostando le Path proprietà e Stroke dell'oggettoFill. - 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 . 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, LineGeometrye 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 tipo
Point, che rappresenta il punto centrale della geometria. - RadiusX, di tipo
double, che rappresenta il valore del raggio x della geometria. Il valore predefinito di questa proprietà è 0,0. - RadiusY, di tipo
double, 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 tipo
Point, che rappresenta il punto iniziale della riga. - EndPoint, di tipo
Point, 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 tipo PathFigureCollection, che rappresenta la raccolta di PathFigure oggetti che descrivono il contenuto del percorso.
- FillRule, di tipo FillRule, 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 Forme MAUI .NET: 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 tipo
Point, che rappresenta l'endpoint dell'arco ellittico. Il valore predefinito di questa proprietà è (0,0). - Size, di tipo
Size, che rappresenta il raggio x e y dell'arco. Il valore predefinito di questa proprietà è (0,0). - RotationAngle, di tipo
double, 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 tipo SweepDirection, che specifica la direzione in cui viene disegnato l'arco. Il valore predefinito di questa proprietà è
SweepDirection.CounterClockwise. - IsLargeArc, di tipo
bool, 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 tipo
Point, che rappresenta il primo punto di controllo della curva. Il valore predefinito di questa proprietà è (0,0). - Point2, di tipo
Point, che rappresenta il secondo punto di controllo della curva. Il valore predefinito di questa proprietà è (0,0). - Point3, di tipo
Point, 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 PointObservableCollection 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 PointObservableCollection 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 PointObservableCollection 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 tipo
Point, che rappresenta il punto di controllo della curva. Il valore predefinito di questa proprietà è (0,0). - Point2, di tipo
Point, 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 BezierSegmentoggetto , un LineSegmente un ArcSegmentoggetto :
<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 LineSegmentoggetto , 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 tipo GeometryCollection, che specifica gli oggetti che definiscono .GeometryGroup Un GeometryCollection oggetto è di Geometry
ObservableCollectionoggetti . - FillRule, di tipo FillRule, che specifica come vengono combinate le aree che intersecano nell'oggetto GeometryGroup . 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 Regole di riempimento.
Per disegnare una geometria composita, impostare gli oggetti necessari Geometry come elementi figlio di un GeometryGroupoggetto 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 tipo
CornerRadius, che è il raggio dell'angolo della geometria. - Rect, di tipo
Rect, 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 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 oggetto Geometry in un oggetto PathGeometry.
- FlattenCubicBezier, che appiattisce una curva cubica di Bézier in una
List<Point>raccolta. - FlattenQuadraticBezier, che rende bidimensionale una curva quadratica di Bézier in una
List<Point>raccolta. - FlattenArc, che rende bidimensionale un arco ellittico in una
List<Point>raccolta.
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per