Xamarin.Forms Kształty: Geometrie

Klasa Geometry i klasy, które pochodzą z niej, umożliwiają opisanie geometrii kształtu 2D. Geometry obiekty mogą być proste, takie jak prostokąty i okręgi lub złożone, utworzone na podstawie co najmniej dwóch obiektów geometrycznych. Ponadto można utworzyć bardziej złożone geometrie, które obejmują łuki i krzywe.

Klasa Geometry jest klasą nadrzędną dla kilku klas, które definiują różne kategorie geometrii:

• EllipseGeometry, który reprezentuje geometrię wielokropka lub okręgu.
• GeometryGroup, który reprezentuje kontener, który może łączyć wiele obiektów geometrycznych w jeden obiekt.
• LineGeometry, który reprezentuje geometrię linii.
• PathGeometry, który reprezentuje geometrię złożonego kształtu, który może składać się z łuków, krzywych, wielokropka, linii i prostokątów.
• RectangleGeometry, który reprezentuje geometrię prostokąta lub kwadratu.

Uwaga

Istnieje również RoundedRectangleGeometry klasa, która pochodzi z GeometryGroup klasy . Aby uzyskać więcej informacji, zobacz RoundRectangleGeometry.

Klasy Geometry i Shape wydają się podobne, ponieważ obie opisują kształty 2D, ale mają ważną różnicę. Klasa Geometry pochodzi z BindableObject klasy, podczas gdy Shape klasa pochodzi z View klasy . Shape W związku z tym obiekty mogą renderować się i uczestniczyć w systemie układu, podczas gdy Geometry obiekty nie mogą. Chociaż Shape obiekty są bardziej łatwo użyteczne niż Geometry obiekty, Geometry obiekty są bardziej uniwersalne. Shape Podczas gdy obiekt jest używany do renderowania grafiki 2D, Geometry obiekt może służyć do definiowania regionu geometrycznego dla grafiki 2D i definiowania regionu do wycinków.

Następujące klasy mają właściwości, które można ustawić na Geometry obiekty:

• Klasa Path używa klasy , Geometry aby opisać jego zawartość. Obiekt można renderować Geometry , ustawiając Path.Data właściwość na Geometry obiekt i ustawiając Path właściwości obiektu Fill Stroke .
• Klasa VisualElement ma Clip właściwość typu Geometry, która definiuje konspekt zawartości elementu. Clip Gdy właściwość jest ustawiona na Geometry obiekt, widoczny będzie tylko obszar znajdujący się w regionie obiektu Geometry . Aby uzyskać więcej informacji, zobacz Clip with a Geometry (Tworzenie wycinków za pomocą geometrii).

Klasy pochodzące z Geometry klasy można zgrupować w trzy kategorie: proste geometrie, geometrie ścieżek i geometrie złożone.

Proste geometrie

Proste klasy geometryczne to EllipseGeometry, LineGeometryi RectangleGeometry. Służą one do tworzenia podstawowych kształtów geometrycznych, takich jak okręgi, linie i prostokąty. Te same kształty, a także bardziej złożone kształty, można tworzyć przy użyciu obiektu PathGeometry lub przez połączenie obiektów geometrycznych ze sobą, ale te klasy zapewniają prostsze podejście do tworzenia tych kształtów geometrycznych.

ElipseGeometry

Geometria wielokropka reprezentuje geometrię lub wielokropek lub okrąg i jest definiowana przez punkt środkowy, promień x i promień y.

Klasa EllipseGeometry definiuje następujące właściwości:

• Center, typu Point, który reprezentuje punkt środkowy geometrii.
• RadiusX, typu double, który reprezentuje wartość x promień geometrii. Wartość domyślna tej właściwości to 0,0.
• RadiusY, typu double, który reprezentuje wartość promień y geometrii. Wartość domyślna tej właściwości to 0,0.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

W poniższym przykładzie pokazano, jak utworzyć i renderować obiekt EllipseGeometry w Path obiekcie:

<Path Fill="Blue"
      Stroke="Red">
  <Path.Data>
    <EllipseGeometry Center="50,50"
                     RadiusX="50"
                     RadiusY="50" />
  </Path.Data>
</Path>

W tym przykładzie środek EllipseGeometry obiektu jest ustawiony na (50 50 50), a promień x i promień y są ustawione na 50. Tworzy czerwony okrąg o średnicy 100 jednostek niezależnych od urządzenia, których wnętrze jest malowane na niebiesko:

LineGeometry

Geometria linii reprezentuje geometrię linii i jest definiowana przez określenie punktu początkowego linii i punktu końcowego.

Klasa LineGeometry definiuje następujące właściwości:

• StartPoint, typu Point, który reprezentuje punkt początkowy linii.
• EndPoint, typu Point, który reprezentuje punkt końcowy wiersza.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

W poniższym przykładzie pokazano, jak utworzyć i renderować obiekt LineGeometry w Path obiekcie:

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

W tym przykładzie obiekt LineGeometry jest pobierany z (10 20) do (100 130):

Uwaga

Fill Ustawienie właściwości Path , która renderuje LineGeometry element , nie będzie miało żadnego wpływu, ponieważ linia nie ma wnętrza.

RectangleGeometry

Geometria prostokąta reprezentuje geometrię prostokąta lub kwadratu i jest definiowana za pomocą struktury określającej Rect jej położenie względne oraz wysokość i szerokość.

Klasa RectangleGeometry definiuje Rect właściwość typu Rect, która reprezentuje wymiary prostokąta. Ta właściwość jest wspierana BindableProperty przez obiekt, co oznacza, że może być obiektem docelowym powiązań danych i stylizowany.

W poniższym przykładzie pokazano, jak utworzyć i renderować obiekt RectangleGeometry w Path obiekcie:

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

Położenie i wymiary prostokąta są definiowane przez Rect strukturę. W tym przykładzie pozycja to (10 10 10), szerokość wynosi 150, a wysokość to 100 jednostek niezależnych od urządzenia:

Geometrie ścieżek

Geometria ścieżki opisuje złożony kształt, który może składać się z łuków, krzywych, wielokropka, linii i prostokątów.

Klasa PathGeometry definiuje następujące właściwości:

• Figures, typu PathFigureCollection, który reprezentuje kolekcję PathFigure obiektów opisujących zawartość ścieżki.
• FillRule, typu FillRule, który określa, w jaki sposób połączone są obszary przecinające się w geometrii. Wartość domyślna tej właściwości to FillRule.EvenOdd.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Aby uzyskać więcej informacji na temat FillRule wyliczenia, zobacz Xamarin.Forms Kształty: reguły wypełniania.

Uwaga

Właściwość Figures jest ContentProperty klasą PathGeometry i nie musi być jawnie ustawiona z języka XAML.

Obiekt PathGeometry składa się z kolekcji PathFigure obiektów, z których każdy PathFigure opisuje kształt w geometrii. Każdy PathFigure z nich składa się z co najmniej jednego PathSegment obiektu, z których każdy opisuje segment kształtu. Istnieje wiele typów segmentów:

• ArcSegment, który tworzy łuk wielokropowy między dwoma punktami.
• BezierSegment, który tworzy krzywą beziera sześcienną między dwoma punktami.
• LineSegment, który tworzy linię między dwoma punktami.
• PolyBezierSegment, który tworzy serię krzywych beziera sześciennych.
• PolyLineSegment, który tworzy serię wierszy.
• PolyQuadraticBezierSegment, który tworzy serię krzywych Beziera kwadratowego.
• QuadraticBezierSegment, który tworzy krzywą Beziera kwadratowego.

Wszystkie powyższe klasy pochodzą z klasy abstrakcyjnej PathSegment .

Segmenty w obrębie elementu PathFigure są łączone w jeden kształt geometryczny z punktem końcowym każdego segmentu będącego punktem początkowym następnego segmentu. Właściwość StartPoint obiektu PathFigure określa punkt, z którego jest rysowany pierwszy segment. Każdy kolejny segment rozpoczyna się od punktu końcowego poprzedniego segmentu. Na przykład można zdefiniować pionową linię z 10,50 do 10,150 , ustawiając StartPoint właściwość na 10,50 i tworząc obiekt LineSegment z ustawieniem Point 10,150właściwości :

<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>

Bardziej złożone geometrie można tworzyć przy użyciu kombinacji PathSegment obiektów i wielu PathFigure obiektów w obiekcie PathGeometry.

Tworzenie elementu ArcSegment

Obiekt tworzy wielokropowy łuk między dwoma ArcSegment punktami. Łuk wielokropowy jest definiowany przez punkty początkowe i końcowe, x- i y, współczynnik obrotu osi x, wartość wskazującą, czy łuk powinien być większy niż 180 stopni, oraz wartość opisująca kierunek, w którym jest rysowany łuk.

Klasa ArcSegment definiuje następujące właściwości:

• Point, typu Point, który reprezentuje punkt końcowy wielokropka łuku. Wartość domyślna tej właściwości to (0,0).
• Size, typu Size, który reprezentuje promień x i y łuku. Wartość domyślna tej właściwości to (0,0).
• RotationAngle, typu double, który reprezentuje ilość w stopniach, w których wielokropek jest obracany wokół osi x. Wartość domyślna tej właściwości to 0.
• SweepDirection, typu SweepDirection, który określa kierunek, w którym jest rysowany łuk. Wartość domyślna tej właściwości to SweepDirection.CounterClockwise.
• IsLargeArc, typu bool, który wskazuje, czy łuk powinien być większy niż 180 stopni. Wartość domyślna tej właściwości to false.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Uwaga

Klasa ArcSegment nie zawiera właściwości punktu początkowego łuku. Definiuje tylko punkt końcowy łuku, który reprezentuje. Punkt początkowy łuku jest bieżącym punktem PathFigure , do którego jest dodawany ArcSegment element .

Wyliczenie SweepDirection definiuje następujące elementy członkowskie:

• CounterClockwise, który określa, że łuki są rysowane w kierunku odwrotnym do ruchu wskazówek zegara.
• Clockwise, który określa, że łuki są rysowane w kierunku wskazówek zegara.

W poniższym przykładzie pokazano, jak utworzyć i renderować obiekt ArcSegment w Path obiekcie:

<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>

W tym przykładzie łuk wielokropowy jest pobierany z (10,10) do (200 100).

Tworzenie elementu BezierSegment

A BezierSegment tworzy krzywą Beziera sześcienną między dwoma punktami. Krzywa beziera sześcienna jest definiowana przez cztery punkty: punkt początkowy, punkt końcowy i dwa punkty kontrolne.

Klasa BezierSegment definiuje następujące właściwości:

• Point1, typu Point, który reprezentuje pierwszy punkt kontrolny krzywej. Wartość domyślna tej właściwości to (0,0).
• Point2, typu Point, który reprezentuje drugi punkt kontrolny krzywej. Wartość domyślna tej właściwości to (0,0).
• Point3, typu Point, który reprezentuje punkt końcowy krzywej. Wartość domyślna tej właściwości to (0,0).

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Uwaga

Klasa BezierSegment nie zawiera właściwości punktu początkowego krzywej. Punkt początkowy krzywej jest bieżącym punktem PathFigure , do którego jest dodawany BezierSegment element .

Dwa punkty kontrolne krzywej Beziera sześciennego zachowują się jak magnesy, przyciągając części tego, co w przeciwnym razie byłoby prostą linią w kierunku siebie i produkując krzywą. Pierwszy punkt kontrolny wpływa na część początkową krzywej. Drugi punkt kontrolny wpływa na końcową część krzywej. Krzywa nie musi przechodzić przez jeden z punktów kontrolnych. Zamiast tego każdy punkt kontrolny przesuwa swoją część linii w kierunku samego siebie, ale nie przez siebie.

W poniższym przykładzie pokazano, jak utworzyć i renderować obiekt BezierSegment w Path obiekcie:

<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>

W tym przykładzie krzywa beziera sześcienna jest pobierana z (10 10) do (300 10). Krzywa ma dwa punkty kontrolne w (100 0) i (200 200):

Tworzenie elementu LineSegment

Obiekt tworzy linię między dwoma LineSegment punktami.

Klasa LineSegment definiuje Point właściwość typu Point, która reprezentuje punkt końcowy segmentu wiersza. Wartość domyślna tej właściwości to (0,0) i jest wspierana przez BindableProperty obiekt, co oznacza, że może być obiektem docelowym powiązań danych i stylizowanym.

Uwaga

Klasa LineSegment nie zawiera właściwości punktu początkowego wiersza. Definiuje tylko punkt końcowy. Punktem początkowym wiersza jest bieżący punkt PathFigure , do którego jest dodawany LineSegment element .

W poniższym przykładzie pokazano, jak tworzyć i renderować LineSegment obiekty w Path obiekcie:

<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>

W tym przykładzie segment wiersza jest pobierany z (10 1000) do (100 100) i z (100 100) do (100 50). Ponadto właściwość jest zamknięta PathFigure , ponieważ jej IsClosed właściwość jest ustawiona na truewartość . Powoduje to narysowane trójkąty:

Tworzenie elementu PolyBezierSegment

Tworzy PolyBezierSegment co najmniej jedną krzywą Beziera sześciennego.

Klasa PolyBezierSegment definiuje właściwość typu PointCollection, która reprezentuje punkty definiujące element PolyBezierSegmentPoints . A PointCollection jest obiektem Point ObservableCollection. Ta właściwość jest wspierana BindableProperty przez obiekt, co oznacza, że może być obiektem docelowym powiązań danych i stylizowany.

Uwaga

Klasa PolyBezierSegment nie zawiera właściwości punktu początkowego krzywej. Punkt początkowy krzywej jest bieżącym punktem PathFigure , do którego jest dodawany PolyBezierSegment element .

W poniższym przykładzie pokazano, jak utworzyć i renderować obiekt PolyBezierSegment w Path obiekcie:

<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>

W tym przykładzie PolyBezierSegment parametr określa dwie sześcienne krzywe Beziera. Pierwsza krzywa to od (10,10) do (150 100) z punktem kontrolnym (0,0) i innym punktem kontrolnym (100,0). Druga krzywa wynosi od (150 100) do (300 10) z punktem kontrolnym (150,0) i innym punktem kontrolnym (200,0):

Tworzenie elementu PolyLineSegment

Element tworzy PolyLineSegment co najmniej jeden segment wiersza.

Klasa PolyLineSegment definiuje właściwość typu PointCollection, która reprezentuje punkty definiujące element PolyLineSegmentPoints . A PointCollection jest obiektem Point ObservableCollection. Ta właściwość jest wspierana BindableProperty przez obiekt, co oznacza, że może być obiektem docelowym powiązań danych i stylizowany.

Uwaga

Klasa PolyLineSegment nie zawiera właściwości punktu początkowego wiersza. Punktem początkowym wiersza jest bieżący punkt PathFigure , do którego jest dodawany PolyLineSegment element .

W poniższym przykładzie pokazano, jak utworzyć i renderować obiekt PolyLineSegment w Path obiekcie:

<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>

W tym przykładzie parametr PolyLineSegment określa dwa wiersze. Pierwszy wiersz pochodzi z (10,10) do (50,10), a drugi wiersz pochodzi z (50 10) do (50 50 50):

Tworzenie elementu PolyQuadraticBezierSegment

Element PolyQuadraticBezierSegment tworzy co najmniej jedną krzywą Beziera kwadratowego.

Klasa PolyQuadraticBezierSegment definiuje właściwość typu PointCollection, która reprezentuje punkty definiujące element PolyQuadraticBezierSegmentPoints . A PointCollection jest obiektem Point ObservableCollection. Ta właściwość jest wspierana BindableProperty przez obiekt, co oznacza, że może być obiektem docelowym powiązań danych i stylizowany.

Uwaga

Klasa PolyQuadraticBezierSegment nie zawiera właściwości punktu początkowego krzywej. Punkt początkowy krzywej jest bieżącym punktem PathFigure , do którego jest dodawany PolyQuadraticBezierSegment element .

W poniższym przykładzie pokazano, jak utworzyć i renderować obiekt PolyQuadraticBezierSegment w Path obiekcie:

<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>

W tym przykładzie parametr PolyQuadraticBezierSegment określa dwie krzywe Beziera. Pierwsza krzywa to od (10 10 10) do (150 50) z punktem kontrolnym (100 100). Druga krzywa wynosi od (100 100) do (15 200) z punktem kontrolnym (0100):

Tworzenie elementu QuadraticBezierSegment

Obiekt QuadraticBezierSegment tworzy kwadratową krzywą Beziera między dwoma punktami.

Klasa QuadraticBezierSegment definiuje następujące właściwości:

• Point1, typu Point, który reprezentuje punkt kontrolny krzywej. Wartość domyślna tej właściwości to (0,0).
• Point2, typu Point, który reprezentuje punkt końcowy krzywej. Wartość domyślna tej właściwości to (0,0).

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Uwaga

Klasa QuadraticBezierSegment nie zawiera właściwości punktu początkowego krzywej. Punkt początkowy krzywej jest bieżącym punktem PathFigure , do którego jest dodawany QuadraticBezierSegment element .

W poniższym przykładzie pokazano, jak utworzyć i renderować obiekt QuadraticBezierSegment w Path obiekcie:

<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>

W tym przykładzie krzywa Beziera kwadratowego jest pobierana z (10 10 10) do (300 10). Krzywa ma punkt kontrolny (200 200):

Tworzenie złożonych geometrii

Bardziej złożone geometrie można tworzyć przy użyciu kombinacji PathSegment obiektów. W poniższym przykładzie tworzony jest kształt przy użyciu BezierSegmentelementu , a LineSegmenti :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>

W tym przykładzie element jest BezierSegment najpierw zdefiniowany przy użyciu czterech punktów. W tym przykładzie zostanie dodany element LineSegment, który jest rysowany między punktem końcowym obiektu BezierSegment do punktu określonego LineSegmentprzez element . Na koniec element ArcSegment jest pobierany z punktu końcowego LineSegment do punktu określonego ArcSegmentprzez wartość .

Jeszcze bardziej złożone geometrie można utworzyć przy użyciu wielu PathFigure obiektów w obiekcie PathGeometry. Poniższy przykład tworzy obiekt PathGeometry z siedmiu PathFigure obiektów, z których niektóre zawierają wiele PathSegment obiektów:

<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>

W tym przykładzie słowo "Hello" jest rysowane przy użyciu kombinacji LineSegment obiektów i BezierSegment wraz z pojedynczym ArcSegment obiektem:

Geometrie złożone

Obiekty geometrii złożonej można utworzyć przy użyciu obiektu GeometryGroup. Klasa GeometryGroup tworzy geometrię złożoną na podstawie co najmniej jednego Geometry obiektu. Do obiektu można dodać dowolną GeometryGroupliczbę Geometry obiektów.

Klasa GeometryGroup definiuje następujące właściwości:

• Children, typu GeometryCollection, który określa obiekty definiujące .GeomtryGroup A GeometryCollection jest obiektem Geometry ObservableCollection.
• FillRule, typu FillRule, który określa sposób łączenia obszarów przecinających się w obiekcie GeometryGroup . Wartość domyślna tej właściwości to FillRule.EvenOdd.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Uwaga

Właściwość Children jest ContentProperty klasą GeometryGroup i nie musi być jawnie ustawiona z języka XAML.

Aby uzyskać więcej informacji na temat FillRule wyliczenia, zobacz Xamarin.Forms Kształty: reguły wypełniania.

Aby narysować geometrię złożoną, ustaw wymagane Geometry obiekty jako elementy podrzędne GeometryGroupobiektu i wyświetl je za pomocą Path obiektu . Poniższy kod XAML przedstawia przykład tego:

<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>

W tym przykładzie są łączone cztery EllipseGeometry obiekty z identycznymi współrzędnymi promienia x i y, ale z różnymi współrzędnymi środka. Powoduje to utworzenie czterech nakładających się okręgów, których wnętrza są wypełnione pomarańczowo ze względu na domyślną EvenOdd regułę wypełnienia:

RoundRectangleGeometry

Zaokrąglona geometria prostokąta reprezentuje geometrię prostokąta lub kwadratu z zaokrąglonymi rogami i jest definiowana przez promień rogu i Rect strukturę, która określa położenie względne oraz wysokość i szerokość.

Klasa RoundRectangleGeometry , która pochodzi z GeometryGroup klasy, definiuje następujące właściwości:

• CornerRadius, typu CornerRadius, który jest promieniem narożnika geometrii.
• Rect, typu Rect, który reprezentuje wymiary prostokąta.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Uwaga

Reguła wypełnienia używana przez element RoundRectangleGeometry to FillRule.Nonzero. Aby uzyskać więcej informacji na temat reguł wypełniania, zobacz Xamarin.Forms Kształty: reguły wypełniania.

W poniższym przykładzie pokazano, jak utworzyć i renderować obiekt RoundRectangleGeometry w Path obiekcie:

<Path Fill="Blue"
      Stroke="Red">
    <Path.Data>
        <RoundRectangleGeometry CornerRadius="5"
                                Rect="10,10,150,100" />
    </Path.Data>
</Path>

Położenie i wymiary prostokąta są definiowane przez Rect strukturę. W tym przykładzie pozycja to (10 10 10), szerokość wynosi 150, a wysokość to 100 jednostek niezależnych od urządzenia. Ponadto narożniki prostokąta są zaokrąglane promieniem 5 jednostek niezależnych od urządzenia.

Tworzenie wycinków z geometrią

Klasa VisualElement ma Clip właściwość typu Geometry, która definiuje konspekt zawartości elementu. Clip Gdy właściwość jest ustawiona na Geometry obiekt, widoczny będzie tylko obszar znajdujący się w regionie obiektu Geometry .

W poniższym przykładzie pokazano, jak używać Geometry obiektu jako regionu klipu dla elementu Image:

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

W tym przykładzie parametr EllipseGeometry z wartościami RadiusX i RadiusY 100, a Center wartość (180 180 180) jest ustawiona na Clip właściwość Image. Zostanie wyświetlona tylko część obrazu znajdującego się w obszarze wielokropka:

Uwaga

Proste geometrie, geometrie ścieżek i geometrie złożone mogą służyć do przycinania VisualElement obiektów.

Inne funkcje

Klasa GeometryHelper udostępnia następujące metody pomocnicze:

• FlattenGeometry, które spłaszczają element Geometry w obiekcie PathGeometry.
• FlattenCubicBezier, które spłaszczają sześcienną krzywą Beziera List<Point> do kolekcji.
• FlattenQuadraticBezier, który spłaszcza krzywą Beziera kwadratowego List<Point> do kolekcji.
• FlattenArc, które spłaszczają wielokropek do List<Point> kolekcji.

Pokrewne łącza

• Xamarin.Forms Kształty
• Xamarin.Forms Kształty: reguły wypełniania