Formas de Xamarin.Forms: Geometrías
La clase Geometry y las clases que se derivan de ella le permiten describir la geometría de una forma 2D. Los objetos Geometry pueden ser simples, como rectángulos y círculos, o compuestos, creados a partir de dos o más objetos geométricos. Además, se pueden crear geometrías más complejas que incluyan arcos y curvas.
La clase Geometry es la clase primaria para varias clases que definen diferentes categorías de geometrías:
EllipseGeometry, que representa la geometría de un círculo o elipse.GeometryGroup, que representa un contenedor que puede combinar varios objetos geométricos en un solo objeto.LineGeometry, que representa la geometría de una línea.PathGeometry, que representa la geometría de una forma compleja que puede estar formada por arcos, curvas, elipses, líneas y rectángulos.RectangleGeometry, que representa la geometría de un rectángulo o cuadrado.
Nota:
También hay una clase RoundedRectangleGeometry que deriva de la clase GeometryGroup. Para obtener más información, consulta RoundRectangleGeometry.
Las clases Geometry y Shape parecen similares en que ambas describen formas 2D, pero hay diferencias importantes. La clase Geometry se deriva de la clase BindableObject, mientras que la clase Shape deriva de la clase View. Por lo tanto, los objetos Shape pueden representarse a sí mismos y participar en el sistema de diseño, mientras que los objetos Geometry no pueden. Si bien los objetos Shape se pueden usar más rápidamente que los objetos Geometry, los objetos Geometry son más versátiles. Mientras que un objeto Shape se usa para representar gráficos 2D, un objeto Geometry se puede usar para definir la región geométrica de gráficos 2D y para definir una región de recorte.
Las siguientes clases tienen propiedades que se pueden establecer en objetos Geometry:
- La clase
PathusaGeometrypara describir su contenido. Puedes representarGeometryestableciendo la propiedadPath.Dataen un objetoGeometryy estableciendo las propiedadesFillyStrokedel objetoPath. - La clase
VisualElementtiene una propiedadClip, de tipoGeometry, que define el contorno del contenido de un elemento. Cuando la propiedadClipse establece en un objetoGeometry, solo se verá el área que se encuentra dentro de la región deGeometry. Para obtener más información, vea Recorte con una geometría.
Las clases que se derivan de la clase Geometry pueden agruparse en tres categorías: geometrías simples, geometrías de trazado y geometrías compuestas.
Geometrías simples
Las clases de geometría simples son EllipseGeometry, LineGeometry y RectangleGeometry. Se usan para crear formas geométricas básicas, como líneas, rectángulos y círculos. Estas mismas formas, así como otras formas más complejas, se pueden crear mediante PathGeometry o combinando objetos geométricos, pero estas clases ofrecen una manera más sencilla de producir estas formas geométricas básicas.
EllipseGeometry
Una geometría de elipse representa la geometría o una elipse o un círculo, y se define mediante un punto central, un radio X y un radio Y.
La clase EllipseGeometry define las propiedades siguientes:
Center, de tipoPoint, que representa el punto central de la geometría.RadiusX, de tipodouble, que representa el valor del radio X de la geometría. El valor predeterminado de esta propiedad es 0.0.RadiusY, de tipodouble, que representa el valor del radio Y de la geometría. El valor predeterminado de esta propiedad es 0.0.
Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.
En el siguiente ejemplo se muestra cómo crear y representar EllipseGeometry en un objeto Path.
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<EllipseGeometry Center="50,50"
RadiusX="50"
RadiusY="50" />
</Path.Data>
</Path>
En este ejemplo, el centro de EllipseGeometry se establece en (50,50) y el radio X y el radio Y se establecen en 50. Esto crea un círculo rojo con un diámetro de 100 unidades independientes del dispositivo, cuyo interior está pintado en azul:
LineGeometry
Una geometría de línea representa la geometría de una línea y se define especificando el punto inicial de la línea y el punto final.
La clase LineGeometry define las propiedades siguientes:
StartPoint, de tipoPoint, que representa el punto inicial de la línea.EndPoint, de tipoPoint, que representa el punto final de la línea.
Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.
En el siguiente ejemplo se muestra cómo crear y representar LineGeometry en un objeto Path:
<Path Stroke="Black">
<Path.Data>
<LineGeometry StartPoint="10,20"
EndPoint="100,130" />
</Path.Data>
</Path>
En este ejemplo, se dibuja un elemento LineGeometry de (10 20) a (100 130):
Nota:
Establecer la propiedad Fill de un elemento Path que representa una clase LineGeometry no tendrá ningún efecto, ya que una línea no tiene ningún interior.
RectangleGeometry
Una geometría de rectángulo representa la geometría de un rectángulo o cuadrado, y se define con una estructura Rect que especifica su posición relativa y su alto y ancho.
La clase RectangleGeometry define la propiedad Rect, de tipo Rect, que representa las dimensiones del rectángulo. Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con formato de estilo.
En el siguiente ejemplo se muestra cómo crear y representar RectangleGeometry en un objeto Path.
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<RectangleGeometry Rect="10,10,150,100" />
</Path.Data>
</Path>
La posición y las dimensiones del rectángulo se definen mediante una estructura Rect. En este ejemplo, la posición es (10,10), el ancho es 150 y el alto es de 100 unidades independientes del dispositivo:
Geometrías de trazado
Una geometría de trazado representa una forma compleja que puede estar formada por arcos, curvas, elipses, líneas y rectángulos.
La clase PathGeometry define las propiedades siguientes:
Figures, de tipoPathFigureCollection, que representa la colección de objetosPathFigureque describen el contenido del trazado.FillRule, de tipoFillRule, que determina cómo se combinan las áreas de intersección contenidas en la geometría. El valor predeterminado de esta propiedad esFillRule.EvenOdd.
Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.
Para más información sobre la enumeración de FillRule, consulte Formas de Xamarin.Forms: Reglas de relleno.
Nota:
La propiedad Figures es la ContentProperty de la clase PathGeometry y, por tanto, no es necesario establecerla explícitamente desde XAML.
PathGeometry Se compone de una colección de objetos PathFigure y cada PathFigure describe una forma en la geometría. Cada objeto PathFigure está compuesto de uno o más objetos PathSegment, cada uno de los cuales describe un segmento de la figura. Hay muchos tipos de segmentos:
ArcSegment, que crea un arco elíptico entre dos puntos.BezierSegment, que crea una curva Bézier cúbica entre dos puntos.LineSegment, que crea una línea entre dos puntos.PolyBezierSegment, que crea una serie de curvas Bézier cúbicas.PolyLineSegment, que crea una serie de líneas.PolyQuadraticBezierSegment, que crea una serie de curvas Bézier cuadráticas.QuadraticBezierSegment, que crea una curva Bézier cuadrática.
Todas las clases anteriores derivan de la clase abstracta PathSegment.
Los segmentos comprendidos en un objeto PathFigure se combinan en una sola forma geométrica donde el punto final de cada segmento es el punto inicial del siguiente segmento. La propiedad StartPoint de un objeto PathFigure especifica el punto desde el que se dibuja el primer segmento. Cada segmento posterior comienza en el punto final del segmento anterior. Por ejemplo, se puede definir una línea vertical de 10,50 a 10,150 estableciendo la propiedad StartPoint en 10,50 y creando un LineSegment con un valor de propiedad Point de 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>
Se pueden crear geometrías más complejas mediante una combinación de objetos PathSegment y usando varios objetos PathFigure dentro de PathGeometry.
Crear un ArcSegment
ArcSegment crea un arco elíptico entre dos puntos. Un arco elíptico se define mediante sus puntos iniciales y finales, el factor de rotación del eje x e y, un valor que indica si el arco debe ser superior a 180 grados y un valor que describe la dirección en la que se dibuja el arco.
La clase ArcSegment define las propiedades siguientes:
Point, de tipoPoint, que representa el punto de conexión del arco elíptico. El valor predeterminado de esta propiedad es (0,0).Size, de tipoSize, que representa el radio x e y del arco. El valor predeterminado de esta propiedad es (0,0).RotationAngle, de tipodouble, que representa la cantidad en grados en que gira la elipse alrededor del eje X. El valor predeterminado de esta propiedad es 0.SweepDirection, de tipoSweepDirection, que especifica la dirección en la que se dibuja el arco. El valor predeterminado de esta propiedad esSweepDirection.CounterClockwise.IsLargeArc, de tipobool, que indica si el arco debe ser superior a 180 grados. El valor predeterminado de esta propiedad esfalse.
Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.
Nota:
La clase ArcSegment no contiene una propiedad para el punto inicial del arco. Solo define el punto final del arco que representa. El punto inicial del arco se define como el punto actual de PathFigure donde se agrega ArcSegment.
La enumeración SweepDirection define los miembros siguientes:
CounterClockwise, que especifica que los arcos se dibujan en una dirección en sentido contrario a las agujas del reloj.Clockwise, que especifica que los arcos se dibujan en una dirección en sentido de las agujas del reloj.
En el siguiente ejemplo se muestra cómo crear y representar ArcSegment en un objeto Path:
<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>
En los ejemplos siguientes, se dibuja un arco elíptico de (10,10) a (200,100).
Crear un BezierSegment
BezierSegment crea una curva Bézier cúbica entre dos puntos. La curva Bézier cúbica la definen cuatro puntos: un punto inicial, un punto final y dos puntos de control.
La clase BezierSegment define las propiedades siguientes:
Point1, de tipoPoint, que representa el primer punto de control de la curva. El valor predeterminado de esta propiedad es (0,0).Point2, de tipoPoint, que representa el segundo punto de control de la curva. El valor predeterminado de esta propiedad es (0,0).Point3, de tipoPoint, que representa el punto final de la curva. El valor predeterminado de esta propiedad es (0,0).
Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.
Nota:
La clase BezierSegment no contiene una propiedad para el punto inicial de la curva. El punto inicial de la curva es el punto actual de PathFigure al que se agrega BezierSegment.
Los dos puntos de control de una curva Bézier cúbica se comportan como imanes, atraen hacia ellos partes de lo que de otra manera sería una línea recta y generan una curva. El primer punto de control afecta a la parte inicial de la curva. El segundo punto de control afecta a la parte final de la curva. La curva no pasa necesariamente por ninguno de los puntos de control. En su lugar, cada punto de control mueve su parte de la línea hacia sí misma, pero no a través de sí mismo.
En el siguiente ejemplo se muestra cómo crear y representar BezierSegment en un objeto Path:
<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>
En este ejemplo, se dibuja una curva Bézier cúbica de (10,10) a (300,10). La curva tiene dos puntos de control en (100,0) y (200,200):
Crear un LineSegment
LineSegment crea una línea entre dos puntos.
La clase LineSegment define la propiedad Point, de tipo Point, que representa el punto final del segmento de línea. El valor predeterminado de esta propiedad es (0,0) y está respaldado por un objeto BindableProperty, lo que significa que puede ser el destino de los enlaces de datos y aplicar un estilo.
Nota:
La clase LineSegment no contiene una propiedad para el punto inicial de la línea. Solo define el punto final. El punto inicial de la línea es el punto actual de PathFigure al que se agrega LineSegment.
En el siguiente ejemplo se muestra cómo crear y representar objetos LineSegment en un objeto Path.
<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>
En este ejemplo, se dibuja un segmento de línea de (10,100) a (100,100) y de (100,100) a (100,50). Además, se cierra PathFigure porque su propiedad IsClosed está establecida en true. Esto da como resultado un triángulo que se dibuja:
Crear un PolyBezierSegment
PolyBezierSegment crea una o varias curvas Bézier cúbicas.
La clase PolyBezierSegment define la propiedad Points, de tipo PointCollection, que representa los puntos que definen PolyBezierSegment. PointCollection es un objeto ObservableCollection de objetos Point. Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con formato de estilo.
Nota:
La clase PolyBezierSegment no contiene una propiedad para el punto inicial de la curva. El punto inicial de la curva es el punto actual de PathFigure al que se agrega PolyBezierSegment.
En el siguiente ejemplo se muestra cómo crear y representar PolyBezierSegment en un objeto Path.
<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>
En este ejemplo, PolyBezierSegment especifica dos curvas Bezier cúbicas. La primera curva va de (10,10) a (150,100) con un punto de control de (0,0) y otro punto de control de (100,0). La segunda curva va de (150,100) a (300,10) con un punto de control de (150,0) y otro punto de control de (200,0):
Creación de un PolyLineSegment
PolyLineSegment crea uno o varios segmentos de línea.
La clase PolyLineSegment define la propiedad Points, de tipo PointCollection, que representa los puntos que definen PolyLineSegment. PointCollection es un objeto ObservableCollection de objetos Point. Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con formato de estilo.
Nota:
La clase PolyLineSegment no contiene una propiedad para el punto inicial de la línea. El punto inicial de la línea es el punto actual de PathFigure a donde se agrega PolyLineSegment.
En el siguiente ejemplo se muestra cómo crear y representar PolyLineSegment en un objeto Path:
<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>
En este ejemplo, PolyLineSegment especifica dos líneas. La primera línea va de (10,10) a (50,10) y la segunda línea va de (50,10) a (50,50):
Creación de un PolyQuadraticBezierSegment
PolyQuadraticBezierSegment crea una o varias curvas Bezier cuadráticas.
La clase PolyQuadraticBezierSegment define la propiedad Points, de tipo PointCollection, que representa los puntos que definen PolyQuadraticBezierSegment. PointCollection es un objeto ObservableCollection de objetos Point. Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con formato de estilo.
Nota:
La clase PolyQuadraticBezierSegment no contiene una propiedad para el punto inicial de la curva. El punto inicial de la curva es el punto actual de PathFigure a donde se agrega PolyQuadraticBezierSegment.
En el siguiente ejemplo se muestra cómo crear y representar PolyQuadraticBezierSegment en una clase Path.
<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>
En este ejemplo, PolyQuadraticBezierSegment especifica dos curvas Bezier. La primera curva va de (10,10) a (150,50) con un punto de control en (100,100). La segunda curva va de (100,100) a (15,200) con un punto de control en (0,100):
Creación de un QuadraticBezierSegment
QuadraticBezierSegment crea una curva Bézier cuadrática entre dos puntos.
La clase QuadraticBezierSegment define las propiedades siguientes:
Point1, de tipoPoint, que representa el punto de control de la curva. El valor predeterminado de esta propiedad es (0,0).Point2, de tipoPoint, que representa el punto final de la curva. El valor predeterminado de esta propiedad es (0,0).
Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.
Nota:
La clase QuadraticBezierSegment no contiene una propiedad para el punto inicial de la curva. El punto inicial de la curva es el punto actual de PathFigure al que se agrega QuadraticBezierSegment.
En el siguiente ejemplo se muestra cómo crear y representar QuadraticBezierSegment en un objeto Path:
<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>
En los ejemplos siguientes, se dibuja una curva Bézier cuadrática de (10,10) a (300,10). La curva tiene un punto de control en (200,200):
Creación de geometrías complejas
Se pueden crear geometrías más complejas mediante una combinación de objetos PathSegment. En el siguiente ejemplo se crea una forma mediante BezierSegment, LineSegment y ArcSegment:
<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>
En este ejemplo, se define primero BezierSegment mediante cuatro puntos. A continuación, el ejemplo agrega LineSegment, que se dibuja entre el punto final de BezierSegment hasta el punto especificado por LineSegment. Por último, ArcSegment se dibuja desde el punto final de LineSegment hasta el punto especificado por ArcSegment.
Se pueden crear geometrías todavía más complejas mediante el uso de varios objetos PathFigure en un elemento PathGeometry. En el ejemplo siguiente se crea PathGeometry desde siete objetos PathFigure, algunos de los cuales contienen varios objetos PathSegment:
<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>
En este ejemplo, la palabra "Hello" se dibuja mediante una combinación de objetos LineSegment y BezierSegment, junto con un objeto ArcSegment único:
Geometrías compuestas
Los objetos geométricos compuestos se pueden crear mediante GeometryGroup. La clase GeometryGroup crea una geometría compuesta a partir de uno o varios objetos Geometry. Se puede agregar cualquier número de objetos Geometry a GeometryGroup.
La clase GeometryGroup define las propiedades siguientes:
Children, de tipoGeometryCollection, que especifica los objetos que definenGeomtryGroup.GeometryCollectiones un objetoObservableCollectionde objetosGeometry.FillRule, de tipoFillRule, que especifica cómo se combinan las áreas de intersección deGeometryGroup. El valor predeterminado de esta propiedad esFillRule.EvenOdd.
Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.
Nota:
La propiedad Children es la ContentProperty de la clase GeometryGroup y, por tanto, no es necesario establecerla de forma explícita desde XAML.
Para más información sobre la enumeración de FillRule, consulte Formas de Xamarin.Forms: Reglas de relleno.
Para dibujar una geometría compuesta, establece los objetos Geometry necesarios como elementos secundarios de GeometryGroup y muéstralos con un objeto Path. El XAML siguiente muestra un ejemplo de esto:
<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>
En este ejemplo, se combinan cuatro objetos EllipseGeometry con coordenadas de radio X e Y idénticas, pero con coordenadas centrales diferentes. Esto crea cuatro círculos superpuestos, cuyos interiores se rellenan en naranja debido a la regla de relleno predeterminada EvenOdd:
RoundRectangleGeometry
Una geometría de rectángulo redondo representa la geometría de un rectángulo, o cuadrado, con esquinas redondeadas, y se define mediante un radio de esquina y una estructura Rect que especifica su posición relativa y su altura y ancho.
La clase RoundRectangleGeometry, que se deriva de la clase GeometryGroup, define las siguientes propiedades:
CornerRadius, de tipoCornerRadius, que es el radio de esquina de la geometría.Rect, de tipoRect, que representa las dimensiones del rectángulo.
Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.
Nota:
La regla de relleno usada por RoundRectangleGeometry es FillRule.Nonzero. Para más información sobre las reglas de relleno, consulte: Formas de Xamarin.Forms: Reglas de relleno.
En el siguiente ejemplo se muestra cómo crear y representar RoundRectangleGeometry en un objeto Path:
<Path Fill="Blue"
Stroke="Red">
<Path.Data>
<RoundRectangleGeometry CornerRadius="5"
Rect="10,10,150,100" />
</Path.Data>
</Path>
La posición y las dimensiones del rectángulo se definen mediante una estructura Rect. En este ejemplo, la posición es (10,10), el ancho es 150 y el alto es de 100 unidades independientes del dispositivo. Además, las esquinas del rectángulo se redondean con un radio de 5 unidades independientes del dispositivo.
Recortar con una geometría
La clase VisualElement tiene una propiedad Clip, de tipo Geometry, que define el contorno del contenido de un elemento. Cuando la propiedad Clip se establece en un objeto Geometry, solo se verá el área que se encuentra dentro de la región de Geometry.
En el siguiente ejemplo se muestra cómo usar un objeto Geometry como región de recorte de Image.
<Image Source="monkeyface.png">
<Image.Clip>
<EllipseGeometry RadiusX="100"
RadiusY="100"
Center="180,180" />
</Image.Clip>
</Image>
En este ejemplo, EllipseGeometry con valores RadiusX y RadiusY de 100 y un valor Center de (180,180) se establece en la propiedad Clip de Image. Solo se mostrará la parte de la imagen que queda dentro del área de la elipse:
Nota:
Las geometrías simples, las geometrías de trazado y las geometrías compuestas se pueden usar para recortar objetos VisualElement.
Otras características
La clase GeometryHelper proporciona los métodos auxiliares siguientes:
FlattenGeometry, que aplana un objetoGeometryen un objetoPathGeometry.FlattenCubicBezier, que aplana una curva Bézier cúbica en una colecciónList<Point>.FlattenQuadraticBezier, que aplana una curva Bézier cuadrática en una colecciónList<Point>.FlattenArc, que aplana un arco elíptico en una colecciónList<Point>.