Xamarin.Forms Formas: geometríasXamarin.Forms Shapes: Geometries

API de versión preliminar

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

La Geometry clase y las clases que derivan de ella permiten describir la geometría de una forma 2D.The Geometry class, and the classes that derive from it, enable you to describe the geometry of a 2D shape. Geometry los objetos pueden ser simples, como rectángulos y círculos, o compuestos, creados a partir de dos o más objetos Geometry.Geometry objects can be simple, such as rectangles and circles, or composite, created from two or more geometry objects. Además, se pueden crear geometrías más complejas que incluyen arcos y curvas.In addition, more complex geometries can be created that include arcs and curves.

La Geometry clase es la clase primaria para varias clases que definen diferentes categorías de geometrías:The Geometry class is the parent class for several classes that define different categories of geometries:

  • EllipseGeometry, que representa la geometría de una elipse o un círculo.EllipseGeometry, which represents the geometry of an ellipse or circle.
  • GeometryGroup, que representa un contenedor que puede combinar varios objetos Geometry en un solo objeto.GeometryGroup, which represents a container that can combine multiple geometry objects into a single object.
  • LineGeometry, que representa la geometría de una línea.LineGeometry, which represents the geometry of a line.
  • PathGeometry, que representa la geometría de una forma compleja que puede estar formada por arcos, curvas, elipses, líneas y rectángulos.PathGeometry, which represents the geometry of a complex shape that can be composed of arcs, curves, ellipses, lines, and rectangles.
  • RectangleGeometry, que representa la geometría de un rectángulo o cuadrado.RectangleGeometry, which represents the geometry of a rectangle or square.

Las Geometry Shape clases y parecen similares, ya que ambos describen las formas 2D, pero tienen una diferencia importante.The Geometry and Shape classes seem similar, in that they both describe 2D shapes, but have an important difference. La Geometry clase se deriva de la BindableObject clase, mientras que la Shape clase se deriva de la View clase.The Geometry class derives from the BindableObject class, while the Shape class derives from the View class. Por lo tanto, Shape los objetos se pueden representar y participar en el sistema de diseño, mientras que los Geometry objetos no pueden.Therefore, Shape objects can render themselves and participate in the layout system, while Geometry objects cannot. Aunque los objetos Shape se pueden usar más fácilmente que los Geometry objetos, los Geometry objetos son más versátiles.While Shape objects are more readily usable than Geometry objects, Geometry objects are more versatile. Mientras Shape que un objeto se usa para representar gráficos 2D, Geometry se puede usar un objeto para definir la región geométrica de los gráficos 2D y definir una región para el recorte.While a Shape object is used to render 2D graphics, a Geometry object can be used to define the geometric region for 2D graphics, and define a region for clipping.

Las siguientes clases tienen propiedades que se pueden establecer en Geometry objetos:The following classes have properties that can be set to Geometry objects:

  • La Path clase utiliza Geometry para describir su contenido.The Path class uses a Geometry to describe its contents. Puede representar una Geometry estableciendo la Path.Data propiedad en un Geometry objeto y estableciendo las Path Fill propiedades y del objeto Stroke .You can render a Geometry by setting the Path.Data property to a Geometry object, and setting the Path object's Fill and Stroke properties.
  • La VisualElement clase tiene una Clip propiedad, de tipo Geometry , que define el contorno del contenido de un elemento.The VisualElement class has a Clip property, of type Geometry, that defines the outline of the contents of an element. Cuando la Clip propiedad se establece en un Geometry objeto, solo se verá el área que está dentro de la región de Geometry .When the Clip property is set to a Geometry object, only the area that is within the region of the Geometry will be visible. Para obtener más información, consulte clip con Geometry.For more information, see Clip with a Geometry.

Las clases que derivan de la Geometry clase se pueden agrupar en tres categorías: geometrías simples, geometrías de trazado y geometrías compuestas.The classes that derive from the Geometry class can be grouped into three categories: simple geometries, path geometries, and composite geometries.

Geometrías simplesSimple geometries

Las clases de geometría simples son EllipseGeometry , LineGeometry y RectangleGeometry .The simple geometry classes are EllipseGeometry, LineGeometry, and RectangleGeometry. Se usan para crear formas geométricas básicas, como círculos, líneas y rectángulos.They are used to create basic geometric shapes, such as circles, lines, and rectangles. Estas mismas formas, así como formas más complejas, se pueden crear mediante PathGeometry o combinando objetos Geometry, pero estas clases proporcionan un enfoque más sencillo para generar estas formas geométricas básicas.These same shapes, as well as more complex shapes, can be created using a PathGeometry or by combining geometry objects together, but these classes provide a simpler approach for producing these basic geometric shapes.

EllipseGeometryEllipseGeometry

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.An ellipse geometry represents the geometry or an ellipse or circle, and is defined by a center point, an x-radius, and a y-radius.

La clase EllipseGeometry define las propiedades siguientes:The EllipseGeometry class defines the following properties:

  • Center, de tipo Point , que representa el punto central de la geometría.Center, of type Point, which represents the center point of the geometry.
  • RadiusX, de tipo double , que representa el valor del radio x de la geometría.RadiusX, of type double, which represents the x-radius value of the geometry. El valor predeterminado de esta propiedad es 0,0.The default value of this property is 0.0.
  • RadiusY, de tipo double , que representa el valor del radio y de la geometría.RadiusY, of type double, which represents the y-radius value of the geometry. El valor predeterminado de esta propiedad es 0,0.The default value of this property is 0.0.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

En el ejemplo siguiente se muestra cómo crear y representar un EllipseGeometry en un Path objeto:The following example shows how to create and render an EllipseGeometry in a Path object:

<Path Fill="Blue"
      Stroke="Red"
      StrokeThickness="1">
  <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 los radios x e y se establecen en 50.In this example, the center of the EllipseGeometry is set to (50,50) and the x-radius and y-radius are both set to 50. Esto crea un círculo rojo con un diámetro de unidades independientes del dispositivo 100, cuyo interior se pinta azul:This creates a red circle with a diameter of 100 device-independent units, whose interior is painted blue:

EllipseGeometryEllipseGeometry

LineGeometryLineGeometry

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.A line geometry represents the geometry of a line, and is defined by specifying the start point of the line and the end point.

La clase LineGeometry define las propiedades siguientes:The LineGeometry class defines the following properties:

  • StartPoint, de tipo Point , que representa el punto inicial de la línea.StartPoint, of type Point, which represents the start point of the line.
  • EndPoint, de tipo Point , que representa el punto final de la línea.EndPoint, of type Point, which represents the end point of the line.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

En el ejemplo siguiente se muestra cómo crear y representar un LineGeometry en un Path objeto:The following example shows how to create and render a LineGeometry in a Path object:

<Path Stroke="Black"
      StrokeThickness="1">
  <Path.Data>
    <LineGeometry StartPoint="10,20"
                  EndPoint="100,130" />
  </Path.Data>
</Path>

En este ejemplo, LineGeometry se dibuja un de (10, 20) a (100.130):In this example, a LineGeometry is drawn from (10,20) to (100,130):

LineGeometryLineGeometry

Nota

Establecer la Fill propiedad de un Path que representa un LineGeometry no tendrá ningún efecto, ya que una línea no tiene ningún interior.Setting the Fill property of a Path that renders a LineGeometry will have no effect, because a line has no interior.

RectangleGeometryRectangleGeometry

Una geometría de rectángulo representa la geometría de un rectángulo o cuadrado y se define con una Rect estructura que especifica su posición relativa y su alto y ancho.A rectangle geometry represents the geometry of a rectangle or square, and is defined with a Rect structure that specifies its relative position and its height and width.

La RectangleGeometry clase define la Rect propiedad, de tipo Rect , que representa las dimensiones del rectángulo.The RectangleGeometry class defines the Rect property, of type Rect, which represents the dimensions of the rectangle. Esta propiedad está respaldada por un BindableProperty objeto, lo que significa que puede ser el destino de los enlaces de datos y con estilo.This property is backed by a BindableProperty object, which means that it can be the target of data bindings, and styled.

En el ejemplo siguiente se muestra cómo crear y representar un RectangleGeometry en un Path objeto:The following example shows how to create and render a RectangleGeometry in a Path object:

<Path Fill="Blue"
      Stroke="Red"
      StrokeThickness="1">
  <Path.Data>
    <RectangleGeometry Rect="10,10,150,100" />
  </Path.Data>
</Path>

La posición y las dimensiones del rectángulo se definen mediante una Rect estructura.The position and dimensions of the rectangle are defined by a Rect structure. En este ejemplo, la posición es (10, 10), el ancho es 150 y el alto es de 100 unidades independientes del dispositivo:In this example, the position is (10,10), the width is 150, and the height is 100 device-independent units:

RectangleGeometryRectangleGeometry

Geometrías de ruta de accesoPath geometries

Una geometría de trazado describe una forma compleja que puede estar formada por arcos, curvas, elipses, líneas y rectángulos.A path geometry describes a complex shape that can be composed of arcs, curves, ellipses, lines, and rectangles.

La clase PathGeometry define las propiedades siguientes:The PathGeometry class defines the following properties:

  • Figures, de tipo PathFigureCollection , que representa la colección de PathFigure objetos que describen el contenido de la ruta de acceso.Figures, of type PathFigureCollection, which represents the collection of PathFigure objects that describe the path's contents.
  • FillRule, de tipo FillRule , que determina cómo se combinan las áreas de intersección contenidas en la geometría.FillRule, of type FillRule, which determines how the intersecting areas contained in the geometry are combined. El valor predeterminado de esta propiedad es FillRule.EvenOdd.The default value of this property is FillRule.EvenOdd.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Para obtener más información acerca de la FillRule enumeración, consulte Xamarin.Forms formas: rellenar reglas.For more information about the FillRule enumeration, see Xamarin.Forms Shapes: Fill rules.

Nota

La Figures propiedad es ContentProperty de la PathGeometry clase y, por tanto, no es necesario establecer explícitamente desde XAML.The Figures property is the ContentProperty of the PathGeometry class, and so does not need to be explicitly set from XAML.

Un PathGeometry objeto se compone de una colección de PathFigure objetos, cada uno de PathFigure los cuales describe una forma en la geometría.A PathGeometry is made up of a collection of PathFigure objects, with each PathFigure describing a shape in the geometry. Cada una de ellas PathFigure se compone de uno o varios PathSegment objetos, cada uno de los cuales describe un segmento de la forma.Each PathFigure is itself comprised of one or more PathSegment objects, each of which describes a segment of the shape. Hay muchos tipos de segmentos:There are many types of segments:

  • ArcSegment, que crea un arco elíptico entre dos puntos.ArcSegment, which creates an elliptical arc between two points.
  • BezierSegment, que crea una curva Bézier cúbica entre dos puntos.BezierSegment, which creates a cubic Bezier curve between two points.
  • LineSegment, que crea una línea entre dos puntos.LineSegment, which creates a line between two points.
  • PolyBezierSegment, que crea una serie de curvas Bézier cúbicas.PolyBezierSegment, which creates a series of cubic Bezier curves.
  • PolyLineSegment, que crea una serie de líneas.PolyLineSegment, which creates a series of lines.
  • PolyQuadraticBezierSegment, que crea una serie de curvas Bézier cuadráticas.PolyQuadraticBezierSegment, which creates a series of quadratic Bezier curves.
  • QuadraticBezierSegment, que crea una curva Bézier cuadrática.QuadraticBezierSegment, which creates a quadratic Bezier curve.

Todas las clases anteriores derivan de la PathSegment clase abstracta.All the above classes derive from the abstract PathSegment class.

Los segmentos de un PathFigure se combinan en una sola forma geométrica con el punto final de cada segmento que es el punto inicial del segmento siguiente.The segments within a PathFigure are combined into a single geometric shape with the end point of each segment being the start point of the next segment. La StartPoint propiedad de un PathFigure especifica el punto desde el que se dibuja el primer segmento.The StartPoint property of a PathFigure specifies the point from which the first segment is drawn. Cada segmento posterior comienza en el punto final del segmento anterior.Each subsequent segment starts at the end point of the previous segment. Por ejemplo, se puede definir una línea vertical de 10,50 a estableciendo 10,150 la StartPoint propiedad en 10,50 y creando un LineSegment con un Point valor de propiedad de 10,150 :For example, a vertical line from 10,50 to 10,150 can be defined by setting the StartPoint property to 10,50 and creating a LineSegment with a Point property setting of 10,150:

<Path Stroke="Black"
      StrokeThickness="1">
    <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 el uso de una combinación de PathSegment objetos y mediante el uso de varios PathFigure objetos dentro de PathGeometry .More complex geometries can be created by using a combination of PathSegment objects, and by using multiple PathFigure objects within a PathGeometry.

Crear un ArcSegmentCreate an ArcSegment

Un ArcSegment crea un arco elíptico entre dos puntos.An ArcSegment creates an elliptical arc between two points. Un arco elíptico se define mediante sus puntos inicial y final, x-e y-radio, factor de rotación del eje x, 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.An elliptical arc is defined by its start and end points, x- and y-radius, x-axis rotation factor, a value indicating whether the arc should be greater than 180 degrees, and a value describing the direction in which the arc is drawn.

La clase ArcSegment define las propiedades siguientes:The ArcSegment class defines the following properties:

  • Point, de tipo Point , que representa el extremo del arco elíptico. El valor predeterminado de esta propiedad es (0,0).Point, of type Point, which represents the endpoint of the elliptical arc. The default value of this property is (0,0).
  • Size, de tipo Size , que representa el radio x e y del arco. El valor predeterminado de esta propiedad es (0,0).Size, of type Size, which represents the x- and y-radius of the arc. The default value of this property is (0,0).
  • RotationAngle, de tipo double , que representa la cantidad en grados que la elipse gira alrededor del eje x.RotationAngle, of type double, which represents the amount in degrees by which the ellipse is rotated around the x-axis. El valor predeterminado de esta propiedad es 0.The default value of this property is 0.
  • SweepDirection, de tipo SweepDirection , que especifica la dirección en la que se dibuja el arco.SweepDirection, of type SweepDirection, which specifies the direction in which the arc is drawn. El valor predeterminado de esta propiedad es SweepDirection.CounterClockwise.The default value of this property is SweepDirection.CounterClockwise.
  • IsLargeArc, de tipo bool , que indica si el arco debe ser mayor que 180 grados.IsLargeArc, of type bool, which indicates whether the arc should be greater than 180 degrees. El valor predeterminado de esta propiedad es false.The default value of this property is false.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Nota

La ArcSegment clase no contiene una propiedad para el punto inicial del arco. Solo define el punto final del arco que representa.The ArcSegment class does not contain a property for the starting point of the arc. It only defines the end point of the arc it represents. El punto inicial del arco es el punto actual del PathFigure al que ArcSegment se agrega.The start point of the arc is the current point of the PathFigure to which the ArcSegment is added.

La enumeración SweepDirection define los miembros siguientes:The SweepDirection enumeration defines the following members:

  • CounterClockwise, que especifica que los arcos se dibujan en sentido de las agujas del reloj.CounterClockwise, which specifies that arcs are drawn in a clockwise direction.
  • Clockwise, que especifica que los arcos se dibujan en el sentido de las agujas del reloj.Clockwise, which specifies that arcs are drawn in a counter clockwise direction.

En el ejemplo siguiente se muestra cómo crear y representar un ArcSegment en un Path objeto:The following example shows how to create and render an ArcSegment in a Path object:

<Path Stroke="Black"
      StrokeThickness="1">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="10,100">
                        <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 este ejemplo, se dibuja un arco elíptico de (10.100) a (200.100).In this example, an elliptical arc is drawn from (10,100) to (200,100).

Creación de un BezierSegmentCreate a BezierSegment

Un BezierSegment crea una curva Bézier cúbica entre dos puntos.A BezierSegment creates a cubic Bezier curve between two points. Una curva Bézier cúbica se define mediante cuatro puntos: un punto inicial, un punto final y dos puntos de control.A cubic Bezier curve is defined by four points: a start point, an end point, and two control points.

La clase BezierSegment define las propiedades siguientes:The BezierSegment class defines the following properties:

  • Point1, de tipo Point , que representa el primer punto de control de la curva.Point1, of type Point, which represents the first control point of the curve. El valor predeterminado de esta propiedad es (0,0).The default value of this property is (0,0).
  • Point2, de tipo Point , que representa el segundo punto de control de la curva.Point2, of type Point, which represents the second control point of the curve. El valor predeterminado de esta propiedad es (0,0).The default value of this property is (0,0).
  • Point3, de tipo Point , que representa el punto final de la curva.Point3, of type Point, which represents the end point of the curve. El valor predeterminado de esta propiedad es (0,0).The default value of this property is (0,0).

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Nota

La BezierSegment clase no contiene una propiedad para el punto inicial de la curva.The BezierSegment class does not contain a property for the starting point of the curve. El punto inicial de la curva es el punto actual del PathFigure al que BezierSegment se agrega.The start point of the curve is the current point of the PathFigure to which the BezierSegment is added.

Los dos puntos de control de una curva Bézier cúbica se comportan como imanes, y atraen partes de lo que de otro modo serían una línea recta hacia ellos mismos y generando una curva.The two control points of a cubic Bezier curve behave like magnets, attracting portions of what would otherwise be a straight line toward themselves and producing a curve. El primer punto de control afecta a la parte inicial de la curva.The first control point affects the start portion of the curve. El segundo punto de control afecta a la parte final de la curva.The second control point affects the end portion of the curve. La curva no pasa necesariamente a través de ninguno de los puntos de control.The curve doesn't necessarily pass through either of the control points. En su lugar, cada punto de control mueve su parte de la línea hacia sí misma, pero no a sí misma.Instead, each control point moves its portion of the line toward itself, but not through itself.

En el ejemplo siguiente se muestra cómo crear y representar un BezierSegment en un Path objeto:The following example shows how to create and render a BezierSegment in a Path object:

<Path Stroke="Black"
      StrokeThickness="1">
    <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, una curva Bézier cúbica se dibuja de (10, 10) a (300, 10).In this example, a cubic Bezier curve is drawn from (10,10) to (300,10). La curva tiene dos puntos de control en (100, 0) y (200.200):The curve has two control points at (100,0) and (200,200):

BezierSegmentBezierSegment

Crear un LineSegmentCreate a LineSegment

Un LineSegment crea una línea entre dos puntos.A LineSegment creates a line between two points.

La LineSegment clase define la Point propiedad, de tipo Point , que representa el punto final del segmento de línea.The LineSegment class defines the Point property, of type Point, which represents the end point of the line segment. El valor predeterminado de esta propiedad es (0,0) y está respaldado por un BindableProperty objeto, lo que significa que puede ser el destino de los enlaces de datos y con estilo.The default value of this property is (0,0), and it's backed by a BindableProperty object, which means that it can be the target of data bindings, and styled.

Nota

La LineSegment clase no contiene una propiedad para el punto inicial de la línea.The LineSegment class does not contain a property for the starting point of the line. Solo define el punto final.It only defines the end point. El punto inicial de la línea es el punto actual del PathFigure al que LineSegment se agrega.The start point of the line is the current point of the PathFigure to which the LineSegment is added.

En el ejemplo siguiente se muestra cómo crear y representar LineSegment objetos en un Path objeto:The following example shows how to create and render LineSegment objects in a Path object:

<Path Stroke="Black"
      StrokeThickness="1"
      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, un segmento de línea se dibuja de (10.100) a (100.100) y de (100.100) a (100, 50).In this example, a line segment is drawn from (10,100) to (100,100), and from (100,100) to (100,50). Además, el PathFigure está cerrado porque su IsClosed propiedad está establecida en true .In addition, the PathFigure is closed because its IsClosed property is set to true. Esto da como resultado que se dibuje un triángulo:This results in a triangle being drawn:

LineSegmentsLineSegments

Creación de un PolyBezierSegmentCreate a PolyBezierSegment

Un PolyBezierSegment crea una o varias curvas Bézier cúbicas.A PolyBezierSegment creates one or more cubic Bezier curves.

La PolyBezierSegment clase define la Points propiedad, de tipo PointCollection , que representa los puntos que definen PolyBezierSegment .The PolyBezierSegment class defines the Points property, of type PointCollection, which represents the points that define the PolyBezierSegment. Un PointCollection es ObservableCollection de Point objetos.A PointCollection is an ObservableCollection of Point objects. Esta propiedad está respaldada por un BindableProperty objeto, lo que significa que puede ser el destino de los enlaces de datos y con estilo.This property is backed by a BindableProperty object, which means that it can be the target of data bindings, and styled.

Nota

La PolyBezierSegment clase no contiene una propiedad para el punto inicial de la curva.The PolyBezierSegment class does not contain a property for the starting point of the curve. El punto inicial de la curva es el punto actual del PathFigure al que PolyBezierSegment se agrega.The start point of the curve is the current point of the PathFigure to which the PolyBezierSegment is added.

En el ejemplo siguiente se muestra cómo crear y representar un PolyBezierSegment en un Path objeto:The following example shows how to create and render a PolyBezierSegment in a Path object:

<Path Stroke="Black"
      StrokeThickness="1">
    <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 Bézier cúbicas.In this example, the PolyBezierSegment specifies two cubic Bezier curves. 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).The first curve is from (10,10) to (150,100) with a control point of (0,0), and another control point of (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):The second curve is from (150,100) to (300,10) with a control point of (150,0) and another control point of (200,0):

PolyBezierSegmentPolyBezierSegment

Creación de un PolyLineSegmentCreate a PolyLineSegment

Un PolyLineSegment crea uno o más segmentos de línea.A PolyLineSegment creates one or more line segments.

La PolyLineSegment clase define la Points propiedad, de tipo PointCollection , que representa los puntos que definen PolyLineSegment .The PolyLineSegment class defines the Points property, of type PointCollection, which represents the points that define the PolyLineSegment. Un PointCollection es ObservableCollection de Point objetos.A PointCollection is an ObservableCollection of Point objects. Esta propiedad está respaldada por un BindableProperty objeto, lo que significa que puede ser el destino de los enlaces de datos y con estilo.This property is backed by a BindableProperty object, which means that it can be the target of data bindings, and styled.

Nota

La PolyLineSegment clase no contiene una propiedad para el punto inicial de la línea.The PolyLineSegment class does not contain a property for the starting point of the line. El punto inicial de la línea es el punto actual del PathFigure al que PolyLineSegment se agrega.The start point of the line is the current point of the PathFigure to which the PolyLineSegment is added.

En el ejemplo siguiente se muestra cómo crear y representar un PolyLineSegment en un Path objeto:The following example shows how to create and render a PolyLineSegment in a Path object:

<Path Stroke="Black"
      StrokeThickness="1">
    <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.In this example, the PolyLineSegment specifies two lines. La primera línea va de (10, 10) a (50, 10) y la segunda línea va de (50, 10) a (50, 50):The first line is from (10,10) to (50,10), and the second line is from (50,10) to (50,50):

PolyLineSegmentPolyLineSegment

Creación de un PolyQuadraticBezierSegmentCreate a PolyQuadraticBezierSegment

Un PolyQuadraticBezierSegment crea una o varias curvas Bézier cuadráticas.A PolyQuadraticBezierSegment creates one or more quadratic Bezier curves.

La PolyQuadraticBezierSegment clase define la Points propiedad, de tipo PointCollection , que representa los puntos que definen PolyQuadraticBezierSegment .The PolyQuadraticBezierSegment class defines the Points property, of type PointCollection, which represents the points that define the PolyQuadraticBezierSegment. Un PointCollection es ObservableCollection de Point objetos.A PointCollection is an ObservableCollection of Point objects. Esta propiedad está respaldada por un BindableProperty objeto, lo que significa que puede ser el destino de los enlaces de datos y con estilo.This property is backed by a BindableProperty object, which means that it can be the target of data bindings, and styled.

Nota

La PolyQuadraticBezierSegment clase no contiene una propiedad para el punto inicial de la curva.The PolyQuadraticBezierSegment class does not contain a property for the starting point of the curve. El punto inicial de la curva es el punto actual del PathFigure al que PolyQuadraticBezierSegment se agrega.The start point of the curve is the current point of the PathFigure to which the PolyQuadraticBezierSegment is added.

En el ejemplo siguiente se muestra cómo crear y representar un PolyQuadraticBezierSegment en un Path objeto:The following example shows to create and render a PolyQuadraticBezierSegment in a Path object:

<Path Stroke="Black"
      StrokeThickness="1">
    <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 de Bézier.In this example, the PolyQuadraticBezierSegment specifies two Bezier curves. La primera curva va de (10, 10) a (150, 50) con un punto de control en (100.100).The first curve is from (10,10) to (150,50) with a control point at (100,100). La segunda curva va de (100.100) a (15.200) con un punto de control en (0100):The second curve is from (100,100) to (15,200) with a control point at (0,100):

PolyQuadraticBezierSegmentPolyQuadraticBezierSegment

Creación de un QuadraticBezierSegmentCreate a QuadraticBezierSegment

Un QuadraticBezierSegment crea una curva Bézier cuadrática entre dos puntos.A QuadraticBezierSegment creates a quadratic Bezier curve between two points.

La clase QuadraticBezierSegment define las propiedades siguientes:The QuadraticBezierSegment class defines the following properties:

  • Point1, de tipo Point , que representa el punto de control de la curva.Point1, of type Point, which represents the control point of the curve. El valor predeterminado de esta propiedad es (0,0).The default value of this property is (0,0).
  • Point2, de tipo Point , que representa el punto final de la curva.Point2, of type Point, which represents the end point of the curve. El valor predeterminado de esta propiedad es (0,0).The default value of this property is (0,0).

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Nota

La QuadraticBezierSegment clase no contiene una propiedad para el punto inicial de la curva.The QuadraticBezierSegment class does not contain a property for the starting point of the curve. El punto inicial de la curva es el punto actual del PathFigure al que QuadraticBezierSegment se agrega.The start point of the curve is the current point of the PathFigure to which the QuadraticBezierSegment is added.

En el ejemplo siguiente se muestra cómo crear y representar un QuadraticBezierSegment en un Path objeto:The following example shows how to create and render a QuadraticBezierSegment in a Path object:

<Path Stroke="Black"
      StrokeThickness="1">
    <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 este ejemplo, se dibuja una curva Bézier cuadrática de (10, 10) a (300, 10).In this example, a quadratic Bezier curve is drawn from (10,10) to (300,10). La curva tiene un punto de control en (200.200):The curve has a control point at (200,200):

QuadraticBezierSegmentQuadraticBezierSegment

Crear geometrías complejasCreate complex geometries

Se pueden crear geometrías más complejas mediante una combinación de PathSegment objetos.More complex geometries can be created by using a combination of PathSegment objects. En el ejemplo siguiente se crea una forma mediante un BezierSegment , un LineSegment y un ArcSegment :The following example creates a shape using a BezierSegment, a LineSegment, and an ArcSegment:

<Path Stroke="Black"
      StrokeThickness="1">
    <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, BezierSegment se define primero un con cuatro puntos.In this example, a BezierSegment is first defined using four points. A continuación, en el ejemplo se agrega un LineSegment , que se dibuja entre el punto final de BezierSegment hasta el punto especificado por LineSegment .The example then adds a LineSegment, which is drawn between the end point of the BezierSegment to the point specified by the LineSegment. Por último, ArcSegment se dibuja desde el punto final del LineSegment hasta el punto especificado por ArcSegment .Finally, an ArcSegment is drawn from the end point of the LineSegment to the point specified by the ArcSegment.

Se pueden crear geometrías incluso más complejas mediante el uso PathFigure de varios objetos dentro de PathGeometry .Even more complex geometries can be created by using multiple PathFigure objects within a PathGeometry. En el ejemplo siguiente se crea un a PathGeometry partir de siete PathFigure objetos, algunos de los cuales contienen varios PathSegment objetos:The following example creates a PathGeometry from seven PathFigure objects, some of which contain multiple PathSegment objects:

<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 utilizando una combinación de LineSegment BezierSegment objetos y, junto con un solo ArcSegment objeto:In this example, the word "Hello" is drawn using a combination of LineSegment and BezierSegment objects, along with a single ArcSegment object:

Varios objetos PathFigureMultiple PathFigure objects

Geometrías compuestasComposite geometries

Los objetos de geometría compuestos se pueden crear mediante GeometryGroup .Composite geometry objects can be created using a GeometryGroup. La GeometryGroup clase crea una geometría compuesta a partir de uno o más Geometry objetos.The GeometryGroup class creates a composite geometry from one or more Geometry objects. GeometrySe puede agregar cualquier número de objetos a GeometryGroup .Any number of Geometry objects can be added to a GeometryGroup.

La clase GeometryGroup define las propiedades siguientes:The GeometryGroup class defines the following properties:

  • Children, de tipo GeometryCollection , que tiene en especie los objetos que definen GeomtryGroup .Children, of type GeometryCollection, which species the objects that define the GeomtryGroup. Un GeometryCollection es ObservableCollection de Geometry objetos.A GeometryCollection is an ObservableCollection of Geometry objects.
  • FillRule, de tipo FillRule , que especifica cómo se combinan las áreas de intersección de GeometryGroup .FillRule, of type FillRule, which specifies how the intersecting areas in the GeometryGroup are combined. El valor predeterminado de esta propiedad es FillRule.EvenOdd.The default value of this property is FillRule.EvenOdd.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Nota

La Children propiedad es ContentProperty de la GeometryGroup clase y, por tanto, no es necesario establecer explícitamente desde XAML.The Children property is the ContentProperty of the GeometryGroup class, and so does not need to be explicitly set from XAML.

Para obtener más información acerca de la FillRule enumeración, consulte Xamarin.Forms formas: rellenar reglas.For more information about the FillRule enumeration, see Xamarin.Forms Shapes: Fill rules.

Para dibujar una geometría compuesta, establezca los Geometry objetos necesarios como los elementos secundarios de un elemento GeometryGroup y muestrelos con un Path objeto.To draw a composite geometry, set the required Geometry objects as the children of a GeometryGroup, and display them with a Path object. En el código XAML siguiente se muestra un ejemplo de esto:The following XAML shows an example of this:

<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, EllipseGeometry se combinan cuatro objetos con las mismas coordenadas x-radio e y, pero con distintas coordenadas de centro.In this example, four EllipseGeometry objects with identical x-radius and y-radius coordinates, but with different center coordinates, are combined. Esto crea cuatro círculos superpuestos, cuyos interiores se rellenan de color naranja debido a la EvenOdd regla de relleno predeterminada:This creates four overlapping circles, whose interiors are filled orange due to the default EvenOdd fill rule:

GeometryGroupGeometryGroup

Recortar con una geometríaClip with a Geometry

La VisualElement clase tiene una Clip propiedad, de tipo Geometry , que define el contorno del contenido de un elemento.The VisualElement class has a Clip property, of type Geometry, that defines the outline of the contents of an element. Cuando la Clip propiedad se establece en un Geometry objeto, solo se verá el área que está dentro de la región de Geometry .When the Clip property is set to a Geometry object, only the area that is within the region of the Geometry will be visible.

En el ejemplo siguiente se muestra cómo usar un Geometry objeto como la región de recorte de un Image :The following example shows how to use a Geometry object as the clip region for an Image:

<Image Source="monkeyface.png">
    <Image.Clip>
        <EllipseGeometry RadiusX="100"
                         RadiusY="100"
                         Center="180,180" />
    </Image.Clip>
</Image>

En este ejemplo, un EllipseGeometry con RadiusX RadiusY los valores y de 100 y un Center valor de (180.180) se establece en la Clip propiedad de Image .In this example, an EllipseGeometry with RadiusX and RadiusY values of 100, and a Center value of (180,180) is set to the Clip property of an Image. Solo se mostrará la parte de la imagen que se encuentra dentro del área de la elipse:Only the part of the image that is within the area of the ellipse will be displayed:

Recortar una imagen con un EllipseGeometryClip an Image with an EllipseGeometry

Nota

Las geometrías simples, las geometrías de trazado y las geometrías compuestas se pueden usar para recortar VisualElement objetos.Simple geometries, path geometries, and composite geometries can all be used to clip VisualElement objects.

Otras característicasOther features

La GeometryHelper clase proporciona los siguientes métodos auxiliares:The GeometryHelper class provides the following helper methods:

  • FlattenGeometry, que alisa un Geometry en un PathGeometry .FlattenGeometry, which flattens a Geometry into a PathGeometry.
  • FlattenCubicBezier, que alisa una curva Bézier cúbica en una List<Point> colección.FlattenCubicBezier, which flattens a cubic Bezier curve into a List<Point> collection.
  • FlattenQuadraticBezier, que alisa una curva Bézier cuadrática en una List<Point> colección.FlattenQuadraticBezier, which flattens a quadratic Bezier curve into a List<Point> collection.
  • FlattenArc, que alisa un arco elíptico en una List<Point> colección.FlattenArc, which flattens an elliptical arc into a List<Point> collection.