Aracılığıyla paylaş

Xamarin.Forms Şekiller: Geometriler

Geometry sınıfı ve ondan türetilen sınıflar, 2B şeklin geometrisini açıklamanıza olanak tanır. Geometry nesneler dikdörtgenler ve daireler gibi basit veya iki veya daha fazla geometri nesnesinden oluşturulmuş bileşik olabilir. Ek olarak, yaylar ve eğriler içeren daha karmaşık geometriler oluşturulabilir.

Geometry sınıfı, farklı geometri kategorilerini tanımlayan çeşitli sınıfların üst sınıfıdır:

  • EllipseGeometry, üç nokta veya dairenin geometrisini temsil eder.
  • GeometryGroup, birden çok geometri nesnesini tek bir nesnede birleştirebilen bir kapsayıcıyı temsil eder.
  • LineGeometry, bir çizginin geometrisini temsil eder.
  • PathGeometry, yaylardan, eğrilerden, üç noktalardan, çizgilerden ve dikdörtgenlerden oluşabilen karmaşık bir şeklin geometrisini temsil eder.
  • RectangleGeometry, dikdörtgenin veya karenin geometrisini temsil eder.

Not

Ayrıca sınıfından türetilen GeometryGroup bir RoundedRectangleGeometry sınıf da vardır. Daha fazla bilgi için bkz . RoundRectangleGeometry.

Geometry ve Shape sınıfları benzer görünür, her ikisi de 2B şekilleri açıklar, ancak önemli bir farka sahiptir. Geometry sınıfı sınıfından BindableObject türetilirken Shape sınıfı sınıfından View türetilir. Bu nedenle, Shape nesneler kendilerini işleyebilir ve düzen sistemine katılabilir, ancak Geometry nesneler bunu yapamaz. Nesneler nesnelerden Geometry daha kolay kullanılabilir olsa Shape da, Geometry nesneler daha çok yönlü olur. Bir Shape nesne 2B grafikleri işlemek için kullanılırken, bir Geometry nesne 2B grafiklerin geometrik bölgesini tanımlamak ve kırpma için bir bölge tanımlamak için kullanılabilir.

Aşağıdaki sınıflar nesnelere ayarlanabilen özelliklere Geometry sahiptir:

  • sınıfı, Path içeriğini açıklamak için öğesini Geometry kullanır. özelliğini bir Geometry nesne olarak Geometry Path.Data ayarlayıp nesnenin Path Fill ve Stroke özelliklerini ayarlayarak bir işleyebilirsiniz.
  • sınıfı VisualElement , bir Clip öğenin içeriğinin ana hattını tanımlayan türünde Geometrybir özelliğine sahiptir. Clip Özelliği bir Geometry nesne olarak ayarlandığında, yalnızca öğesinin içindeki Geometry alan görünür. Daha fazla bilgi için bkz . Geometri ile kırpma.

Sınıfından Geometry türetilen sınıflar üç kategoride gruplandırılabilir: basit geometriler, yol geometrileri ve bileşik geometriler.

Basit geometriler

Basit geometri sınıfları , LineGeometryve RectangleGeometryşeklindedirEllipseGeometry. Daireler, çizgiler ve dikdörtgenler gibi temel geometrik şekiller oluşturmak için kullanılırlar. Aynı şekiller ve daha karmaşık şekiller, geometri nesneleri birlikte birleştirilerek veya PathGeometry kullanılarak oluşturulabilir, ancak bu sınıflar bu temel geometrik şekilleri oluşturmak için daha basit bir yaklaşım sağlar.

EllipseGeometry

Üç nokta geometrisi geometriyi veya üç nokta veya daireyi temsil eder ve bir merkez noktası, x yarıçapı ve y yarıçapı ile tanımlanır.

EllipseGeometry sınıfı aşağıdaki özellikleri tanımlar:

  • Center, türündeki Pointgeometrinin orta noktasını temsil eder.
  • RadiusX, türündedir doubleve geometrinin x yarıçap değerini temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.
  • RadiusY, türündedir doubleve geometrinin y yarıçap değerini temsil eder. Bu özelliğin varsayılan değeri 0,0'dır.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Aşağıdaki örnekte bir Path nesnede oluşturma EllipseGeometry ve işleme işlemi gösterilmektedir:

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

Bu örnekte' nin EllipseGeometry merkezi (50,50) olarak, x yarıçapı ve y yarıçapı da 50 olarak ayarlanmıştır. Bu, iç kısmı maviye boyanmış 100 cihazdan bağımsız birim çapında kırmızı bir daire oluşturur:

EllipseGeometry

LineGeometry

Çizgi geometrisi bir çizginin geometrisini temsil eder ve çizginin başlangıç noktası ve bitiş noktası belirtilerek tanımlanır.

LineGeometry sınıfı aşağıdaki özellikleri tanımlar:

  • StartPoint, türündeki Pointsatırın başlangıç noktasını temsil eder.
  • EndPoint, türündeki Pointsatırın bitiş noktasını temsil eder.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Aşağıdaki örnekte, bir Path nesnede oluşturma LineGeometry ve işleme işlemi gösterilmektedir:

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

Bu örnekte, (10,20) ile (100,130) arasında bir LineGeometry çizilir:

LineGeometry

Not

Fill öğesini işleyen LineGeometry bir Path öğesinin özelliğini ayarlamanın hiçbir etkisi olmaz, çünkü bir çizginin iç kısmı yoktur.

RectangleGeometry

Dikdörtgen geometrisi bir dikdörtgenin veya karenin geometrisini temsil eder ve göreli konumunu, yüksekliğini ve genişliğini belirten bir Rect yapıyla tanımlanır.

sınıfı RectangleGeometry , dikdörtgenin Rect boyutlarını temsil eden türünde Rectözelliğini tanımlar. Bu özellik bir BindableProperty nesne tarafından desteklenir; bu da veri bağlamalarının hedefi olabileceği ve stillendirilebileceği anlamına gelir.

Aşağıdaki örnekte, bir Path nesnede oluşturma RectangleGeometry ve işleme işlemi gösterilmektedir:

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

Dikdörtgenin konumu ve boyutları bir Rect yapı tarafından tanımlanır. Bu örnekte konum (10,10), genişlik 150 ve yükseklik ise cihazdan bağımsız 100 birimdir:

RectangleGeometry

Yol geometrileri

Yol geometrisi, yaylardan, eğrilerden, üç noktalardan, çizgilerden ve dikdörtgenlerden oluşabilen karmaşık bir şekli açıklar.

PathGeometry sınıfı aşağıdaki özellikleri tanımlar:

  • Figures, türündeki PathFigureCollectionyolunun içeriğini açıklayan nesne koleksiyonunu PathFigure temsil eder.
  • FillRule, türündedir FillRuleve geometride bulunan kesişen alanların nasıl birleştirileceğini belirler. Bu özelliğin varsayılan değeridir FillRule.EvenOdd.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Numaralandırma hakkında FillRule daha fazla bilgi için bkz Xamarin.Forms . Şekiller: Doldurma kuralları.

Not

Figures özelliği sınıfının özelliğidir ContentProperty PathGeometry ve bu nedenle açıkça XAML'den ayarlanması gerekmez.

APathGeometry, her PathFigure biri PathFigure geometrideki bir şekli açıklayan bir nesne koleksiyonundan oluşur. Her PathFigure biri, şeklin bir kesimini tanımlayan bir veya daha fazla PathSegment nesneden oluşur. Birçok segment türü vardır:

  • ArcSegment, iki nokta arasında eliptik bir yay oluşturur.
  • BezierSegment, iki nokta arasında bir küp Bezier eğrisi oluşturur.
  • LineSegment, iki nokta arasında bir çizgi oluşturur.
  • PolyBezierSegment, bir dizi kübik Bezier eğrisi oluşturur.
  • PolyLineSegment, bir dizi satır oluşturur.
  • PolyQuadraticBezierSegment, ikinci dereceden Bezier eğrileri dizisi oluşturur.
  • QuadraticBezierSegment, ikinci dereceden bezier eğrisi oluşturur.

Yukarıdaki tüm sınıflar soyut PathSegment sınıftan türetilir.

içindeki PathFigure segmentler tek bir geometrik şekilde birleştirilir ve her segmentin bitiş noktası bir sonraki segmentin başlangıç noktası olur. özelliğiPathFigure, StartPoint ilk kesimin çizildiği noktayı belirtir. Sonraki her segment, önceki segmentin bitiş noktasında başlar. Örneğin, öğesinin 10,50 10,150 dikey çizgisi, özelliği 10,50 olarak ayarlanarak StartPoint ve özelliği ayarıyla 10,150Point oluşturularak LineSegment tanımlanabilir:

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

Daha karmaşık geometriler, nesnelerin bir bileşimi PathSegment kullanılarak ve içinde PathGeometrybirden çok PathFigure nesne kullanılarak oluşturulabilir.

ArcSegment oluşturma

, ArcSegment iki nokta arasında eliptik bir yay oluşturur. Eliptik yay, başlangıç ve bitiş noktaları, x ve y yarıçapı, x ekseni döndürme faktörü, arkın 180 dereceden büyük olup olmaması gerektiğini belirten bir değer ve arkın çizildiği yönü açıklayan bir değer ile tanımlanır.

ArcSegment sınıfı aşağıdaki özellikleri tanımlar:

  • Point, türüne Pointgöre eliptik yay uç noktasını temsil eder. Bu özelliğin varsayılan değeri (0,0).
  • Size, türündedir Sizeve arkın x ve y yarıçapını temsil eder. Bu özelliğin varsayılan değeri (0,0).
  • RotationAngledoubletüründe, üç noktanın x ekseni etrafında döndürüldiği derece cinsinden miktarı temsil eder. Bu özelliğin varsayılan değeri 0'dır.
  • SweepDirection, türüne SweepDirectiongöre, arkın çizildiği yönü belirtir. Bu özelliğin varsayılan değeridir SweepDirection.CounterClockwise.
  • IsLargeArc, türündedir bool. Bu, yay değerinin 180 dereceden büyük olup olmayacağını gösterir. Bu özelliğin varsayılan değeridir false.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Not

sınıfı, ArcSegment yayının başlangıç noktası için bir özellik içermez. Yalnızca temsil ettiği yayının bitiş noktasını tanımlar. Yayının başlangıç noktası, öğesinin PathFigure eklendiği ArcSegment geçerli noktadır.

Numaralandırma SweepDirection aşağıdaki üyeleri tanımlar:

  • CounterClockwise, yayların saat yönünün tersine çizildiğini belirtir.
  • Clockwise, yayların saat yönünde çizildiğini belirtir.

Aşağıdaki örnekte bir Path nesnede oluşturma ArcSegment ve işleme işlemi gösterilmektedir:

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

Bu örnekte, (10,10) ile (200,100) arasında bir eliptik yay çizilir.

BezierSegment Oluşturma

A BezierSegment , iki nokta arasında bir küp Bezier eğrisi oluşturur. Kübik Bezier eğrisi dört noktayla tanımlanır: başlangıç noktası, bitiş noktası ve iki denetim noktası.

BezierSegment sınıfı aşağıdaki özellikleri tanımlar:

  • Point1, türündeki Pointeğrinin ilk denetim noktasını temsil eder. Bu özelliğin varsayılan değeri (0,0).
  • Point2, türündedir Pointve eğrinin ikinci denetim noktasını temsil eder. Bu özelliğin varsayılan değeri (0,0).
  • Point3, türündedir Pointve eğrinin bitiş noktasını temsil eder. Bu özelliğin varsayılan değeri (0,0).

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Not

sınıfı, BezierSegment eğrinin başlangıç noktası için bir özellik içermez. Eğrinin başlangıç noktası, öğesinin PathFigure eklendiği BezierSegment geçerli noktadır.

Kübik Bezier eğrisinin iki kontrol noktası mıknatıslar gibi davranır, aksi takdirde düz bir çizginin bir kısmını kendilerine doğru çeker ve bir eğri oluşturur. İlk denetim noktası eğrinin başlangıç bölümünü etkiler. İkinci denetim noktası eğrinin bitiş bölümünü etkiler. Eğrinin her iki denetim noktasından da geçmesi gerekmez. Bunun yerine, her denetim noktası çizginin kendi bölümünü kendisine doğru taşır, ancak kendi içinden taşımaz.

Aşağıdaki örnekte, bir Path nesnede oluşturma BezierSegment ve işleme işlemi gösterilmektedir:

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

Bu örnekte, (10,10) ile (300,10) bir küp Bezier eğrisi çizilmiştir. Eğrinin (100,0) ve (200,200) iki denetim noktası vardır:

Çizgi grafik bezier eğrisi gösterir.

LineSegment oluşturma

A LineSegment , iki nokta arasında bir çizgi oluşturur.

LineSegment sınıfı, satır kesiminin Point bitiş noktasını temsil eden türündeki Pointözelliğini tanımlar. Bu özelliğin varsayılan değeri (0,0) ve bir BindableProperty nesne tarafından desteklenir; bu da veri bağlamalarının hedefi olabileceği ve stillendirilebileceği anlamına gelir.

Not

sınıfı, LineSegment satırın başlangıç noktası için bir özellik içermez. Yalnızca bitiş noktasını tanımlar. Satırın başlangıç noktası, öğesinin PathFigure eklendiği LineSegment geçerli noktadır.

Aşağıdaki örnekte, bir Path nesnede nesne oluşturma ve işleme LineSegment gösterilmektedir:

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

Bu örnekte bir çizgi kesimi (10.100) ile (100.100) arasında ve (100.100) ile (100.50) arasında çizilir. Ayrıca, PathFigure IsClosed özelliği olarak ayarlandığından truekapatılır. Bu, bir üçgenin çizildiğine neden olur:

Çizgi grafik bir üçgen gösterir.

PolyBezierSegment oluşturma

A PolyBezierSegment , bir veya daha fazla kübik Bezier eğrisi oluşturur.

PolyBezierSegment sınıfı, türünü PointCollectiontanımlayan PolyBezierSegmentnoktaları temsil eden özelliğini tanımlarPoints. APointCollection, nesnelerden oluşan Point bir ObservableCollection öğedir. Bu özellik bir BindableProperty nesne tarafından desteklenir; bu da veri bağlamalarının hedefi olabileceği ve stillendirilebileceği anlamına gelir.

Not

sınıfı, PolyBezierSegment eğrinin başlangıç noktası için bir özellik içermez. Eğrinin başlangıç noktası, öğesinin PathFigure eklendiği PolyBezierSegment geçerli noktadır.

Aşağıdaki örnekte, bir Path nesnede oluşturma PolyBezierSegment ve işleme işlemi gösterilmektedir:

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

Bu örnekte iki PolyBezierSegment kübik Bezier eğrisi belirtir. İlk eğri , (10,10) ile (150,100) arasında denetim noktası (0,0) ve başka bir denetim noktası (100,0) şeklindedir. İkinci eğri (150.100) ile (300.10) arasında bir denetim noktası (150.0) ve başka bir denetim noktası (200,0) şeklindedir:

Çizgi grafik iki bağlı Bezier eğrisi gösterir.

PolyLineSegment oluşturma

A PolyLineSegment , bir veya daha fazla satır kesimi oluşturur.

PolyLineSegment sınıfı, türünü PointCollectiontanımlayan PolyLineSegmentnoktaları temsil eden özelliğini tanımlarPoints. APointCollection, nesnelerden oluşan Point bir ObservableCollection öğedir. Bu özellik bir BindableProperty nesne tarafından desteklenir; bu da veri bağlamalarının hedefi olabileceği ve stillendirilebileceği anlamına gelir.

Not

sınıfı, PolyLineSegment satırın başlangıç noktası için bir özellik içermez. Satırın başlangıç noktası, öğesinin PathFigure eklendiği PolyLineSegment geçerli noktadır.

Aşağıdaki örnekte, bir Path nesnede oluşturma PolyLineSegment ve işleme işlemi gösterilmektedir:

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

Bu örnekte, PolyLineSegment iki satır belirtir. İlk satır (10,10) ile (50,10) arasında, ikinci satır ise (50,10) ile (50,50) arasıdır:

Çizgi grafik, iki çizgiyi dik açıda gösterir.

PolyQuadraticBezierSegment oluşturma

A PolyQuadraticBezierSegment , bir veya daha fazla ikinci dereceden Bezier eğrisi oluşturur.

PolyQuadraticBezierSegment sınıfı, türünü PointCollectiontanımlayan PolyQuadraticBezierSegmentnoktaları temsil eden özelliğini tanımlarPoints. APointCollection, nesnelerden oluşan Point bir ObservableCollection öğedir. Bu özellik bir BindableProperty nesne tarafından desteklenir; bu da veri bağlamalarının hedefi olabileceği ve stillendirilebileceği anlamına gelir.

Not

sınıfı, PolyQuadraticBezierSegment eğrinin başlangıç noktası için bir özellik içermez. Eğrinin başlangıç noktası, öğesinin PathFigure eklendiği PolyQuadraticBezierSegment geçerli noktadır.

Aşağıdaki örnekte bir Path nesnede oluşturma PolyQuadraticBezierSegment ve işleme gösterilmektedir:

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

Bu örnekte iki PolyQuadraticBezierSegment Bezier eğrisi belirtir. İlk eğri (10,10) ile (150,50) ve denetim noktası (100,100) şeklindedir. İkinci eğri (100.100) ile (15.200) arasında ve denetim noktası (0.100) şeklindedir:

Çizgi grafik, birbirine bağlı iki örtüşen Bezier eğrisini gösterir.

QuadraticBezierSegment oluşturma

A QuadraticBezierSegment , iki nokta arasında ikinci dereceden bezier eğrisi oluşturur.

QuadraticBezierSegment sınıfı aşağıdaki özellikleri tanımlar:

  • Point1, türündedir Pointve eğrinin denetim noktasını temsil eder. Bu özelliğin varsayılan değeri (0,0).
  • Point2, türündedir Pointve eğrinin bitiş noktasını temsil eder. Bu özelliğin varsayılan değeri (0,0).

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Not

sınıfı, QuadraticBezierSegment eğrinin başlangıç noktası için bir özellik içermez. Eğrinin başlangıç noktası, öğesinin PathFigure eklendiği QuadraticBezierSegment geçerli noktadır.

Aşağıdaki örnekte, bir Path nesnede oluşturma QuadraticBezierSegment ve işleme işlemi gösterilmektedir:

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

Bu örnekte ikinci dereceden Bezier eğrisi (10,10) ile (300,10) bir eğri çizilmiştir. Eğrinin (200.200) bir denetim noktası vardır:

Çizgi grafik ikinci dereceden Bezier eğrisi gösterir.

Karmaşık geometriler oluşturma

Nesnelerin bir bileşimi PathSegment kullanılarak daha karmaşık geometriler oluşturulabilir. Aşağıdaki örnek, bir , ve ArcSegmentkullanarak BezierSegmentbir LineSegmentşekil oluşturur:

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

Bu örnekte, ilk olarak dört nokta kullanılarak tanımlanır BezierSegment . Örnek daha sonra bitiş noktası BezierSegment arasına tarafından belirtilen LineSegmentnoktaya çizilen bir LineSegmentekler. Son olarak, uç noktasından LineSegment tarafından ArcSegmentbelirtilen noktaya bir ArcSegment çizilir.

içinde birden çok PathFigure nesne PathGeometrykullanılarak daha da karmaşık geometriler oluşturulabilir. Aşağıdaki örnek, bazıları birden çok PathSegment nesne içeren yedi PathFigure nesneden bir PathGeometry oluşturur:

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

Bu örnekte, "Hello" sözcüğü tek ArcSegment bir nesneyle birlikte ve BezierSegment nesnelerinin LineSegment birleşimi kullanılarak çizilir:

Birden çok PathFigure nesnesi

Bileşik geometriler

Bileşik geometri nesneleri kullanılarak GeometryGroupoluşturulabilir. sınıfı bir GeometryGroup veya daha fazla Geometry nesneden bileşik geometri oluşturur. öğesine herhangi bir Geometry sayıda nesne eklenebilir GeometryGroup.

GeometryGroup sınıfı aşağıdaki özellikleri tanımlar:

  • Children, türünü GeometryCollectiontanımlayan GeomtryGroupnesneleri belirtir. AGeometryCollection, nesnelerden oluşan Geometry bir ObservableCollection öğedir.
  • FillRule, türündedir FillRuleve içindeki kesişen alanların GeometryGroup nasıl birleştirildiğine ilişkin bir ifadedir. Bu özelliğin varsayılan değeridir FillRule.EvenOdd.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Not

Children özelliği sınıfının özelliğidir ContentProperty GeometryGroup ve bu nedenle açıkça XAML'den ayarlanması gerekmez.

Numaralandırma hakkında FillRule daha fazla bilgi için bkz Xamarin.Forms . Şekiller: Doldurma kuralları.

Bileşik geometri çizmek için, gerekli Geometry nesneleri öğesinin GeometryGroupalt öğeleri olarak ayarlayın ve bunları bir Path nesneyle görüntüleyin. Aşağıdaki XAML bunun bir örneğini gösterir:

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

Bu örnekte, özdeş x yarıçapı ve y yarıçap koordinatlarına sahip ancak farklı merkez koordinatlarına sahip dört EllipseGeometry nesne birleştirilir. Bu, varsayılan EvenOdd doldurma kuralı nedeniyle iç kısımları turuncuyla doldurulmuş dört örtüşen daire oluşturur:

Çizgi grafik, bölgeleri doldurulmuş dört örtüşen daireyi gösterir.

RoundRectangleGeometry

Yuvarlak dikdörtgen geometrisi, yuvarlatılmış köşeleri olan bir dikdörtgenin veya karenin geometrisini temsil eder ve bir köşe yarıçapı ile göreli konumunu, yüksekliğini ve genişliğini belirten bir Rect yapı ile tanımlanır.

RoundRectangleGeometry sınıfından GeometryGroup türetilen sınıfı aşağıdaki özellikleri tanımlar:

  • CornerRadius, türündeki CornerRadiusgeometrinin köşe yarıçapıdır.
  • Rect, türündeki Rectdikdörtgenin boyutlarını temsil eder.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Not

tarafından RoundRectangleGeometry kullanılan doldurma kuralı şeklindedir FillRule.Nonzero. Doldurma kuralları hakkında daha fazla bilgi için bkz Xamarin.Forms . Şekiller: Doldurma kuralları.

Aşağıdaki örnekte, bir Path nesnede oluşturma RoundRectangleGeometry ve işleme işlemi gösterilmektedir:

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

Dikdörtgenin konumu ve boyutları bir Rect yapı tarafından tanımlanır. Bu örnekte konum (10,10), genişlik 150 ve yükseklik ise cihazdan bağımsız 100 birimdir. Buna ek olarak, dikdörtgen köşeler 5 cihazdan bağımsız birim yarıçapı ile yuvarlatılır.

Geometri ile kırpma

sınıfı VisualElement , bir Clip öğenin içeriğinin ana hattını tanımlayan türünde Geometrybir özelliğine sahiptir. Clip Özelliği bir Geometry nesne olarak ayarlandığında, yalnızca öğesinin içindeki Geometry alan görünür.

Aşağıdaki örnekte, bir nesnesinin bir Geometry için küçük resim bölgesi olarak nasıl kullanılacağı gösterilmektedir Image:

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

Bu örnekte, EllipseGeometry ve RadiusX RadiusY değerleri 100 ve Center değeri (180.180) bir Imageözelliğinin Clip özelliğine ayarlanır. Resmin yalnızca üç noktanın içinde yer alan bölümü görüntülenir:

ElipsGeometry ile Resim Kırpma

Not

Basit geometriler, yol geometrileri ve bileşik geometrilerin tümü nesneleri kırpmak VisualElement için kullanılabilir.

Diğer özellikler

GeometryHelper sınıfı aşağıdaki yardımcı yöntemleri sağlar:

  • FlattenGeometry, bir Geometry içine düzleştirir PathGeometry.
  • FlattenCubicBezier, bir küp Bezier eğrisini bir List<Point> koleksiyona düzleştirir.
  • FlattenQuadraticBezier, ikinci dereceden Bezier eğrisini bir List<Point> koleksiyona düzleştirir.
  • FlattenArc, eliptik bir yayı bir List<Point> koleksiyona düzleştirir.
  • Last updated on