Bagikan melalui

Geometri

  • Artikel

Browse sample. Telusuri sampel

Kelas .NET Multi-platform App UI (.NET MAUI), Geometry dan kelas yang berasal darinya, memungkinkan Anda untuk menggambarkan geometri bentuk 2D. Geometry objek bisa sederhana, seperti persegi panjang dan lingkaran, atau komposit, dibuat dari dua objek geometri atau lebih. Selain itu, geometri yang lebih kompleks dapat dibuat yang mencakup busur dan kurva.

Kelas Geometry ini adalah kelas induk untuk beberapa kelas yang menentukan berbagai kategori geometri:

  • EllipseGeometry, yang mewakili geometri elips atau lingkaran.
  • GeometryGroup, yang mewakili kontainer yang dapat menggabungkan beberapa objek geometri ke dalam satu objek.
  • LineGeometry, yang mewakili geometri garis.
  • PathGeometry, yang mewakili geometri bentuk kompleks yang dapat terdiri dari busur, kurva, elipsis, garis, dan persegi panjang.
  • RectangleGeometry, yang mewakili geometri persegi panjang atau persegi.

Catatan

Ada juga RoundRectangleGeometry kelas yang berasal dari GeometryGroup kelas . Untuk informasi selengkapnya, lihat RoundRectangleGeometry.

Kelas Geometry dan Shape tampak mirip, karena keduanya menggambarkan bentuk 2D, tetapi memiliki perbedaan penting. Kelas Geometry berasal dari BindableObject kelas , sementara Shape kelas berasal dari View kelas . Oleh karena itu, Shape objek dapat merender diri mereka sendiri dan berpartisipasi dalam sistem tata letak, sementara Geometry objek tidak dapat. Meskipun Shape objek lebih mudah digunakan daripada Geometry objek, Geometry objek lebih serbaguna. Shape Saat objek digunakan untuk merender grafik 2D, Geometry objek dapat digunakan untuk menentukan wilayah geometrik untuk grafik 2D, dan menentukan wilayah untuk kliping.

Kelas berikut memiliki properti yang dapat diatur ke Geometry objek:

Kelas yang berasal dari Geometry kelas dapat dikelompokkan ke dalam tiga kategori: geometri sederhana, geometri jalur, dan geometri komposit.

Geometri sederhana

Kelas geometri sederhana adalah EllipseGeometry, , LineGeometrydan RectangleGeometry. Mereka digunakan untuk membuat bentuk geometris dasar, seperti lingkaran, garis, dan persegi panjang. Bentuk yang sama ini, serta bentuk yang lebih kompleks, dapat dibuat menggunakan PathGeometry atau dengan menggabungkan objek geometri bersama-sama, tetapi kelas-kelas ini memberikan pendekatan yang lebih sederhana untuk menghasilkan bentuk geometris dasar ini.

ElipsisGeometry

Geometri elips mewakili geometri atau elips atau lingkaran, dan didefinisikan oleh titik tengah, radius x, dan radius y.

Kelas EllipseGeometry menentukan properti berikut:

  • Center, dari jenis Point, yang mewakili titik tengah geometri.
  • RadiusX, dari jenis double, yang mewakili nilai x-radius dari geometri. Nilai default properti ini adalah 0,0.
  • RadiusY, dari jenis double, yang mewakili nilai y-radius dari geometri. Nilai default properti ini adalah 0,0.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Contoh berikut menunjukkan cara membuat dan merender EllipseGeometry dalam Path objek:

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

Dalam contoh ini, pusat EllipseGeometry diatur ke (50.50) dan radius x dan y-radius keduanya diatur ke 50. Ini menciptakan lingkaran merah dengan diameter 100 unit independen perangkat, yang interiornya dicat biru:

EllipseGeometry.

LineGeometry

Geometri garis mewakili geometri garis, dan didefinisikan dengan menentukan titik awal garis dan titik akhir.

Kelas LineGeometry menentukan properti berikut:

  • StartPoint, dari jenis Point, yang mewakili titik awal baris.
  • EndPoint, dari jenis Point, yang mewakili titik akhir baris.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Contoh berikut menunjukkan cara membuat dan merender LineGeometry dalam Path objek:

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

Dalam contoh ini, digambar LineGeometry dari (10.20) hingga (100.130):

LineGeometry.

Catatan

Fill Mengatur properti Path yang merender LineGeometry tidak akan berpengaruh, karena garis tidak memiliki interior.

Persegi PanjangGeometry

Geometri persegi panjang mewakili geometri persegi panjang atau persegi panjang, dan didefinisikan dengan Rect struktur yang menentukan posisi relatifnya serta tinggi dan lebarnya.

Kelas RectangleGeometry mendefinisikan Rect properti, jenis Rect, yang mewakili dimensi persegi panjang. Properti ini didukung oleh BindableProperty objek, yang berarti dapat menjadi target pengikatan data, dan ditata.

Contoh berikut menunjukkan cara membuat dan merender RectangleGeometry dalam Path objek:

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

Posisi dan dimensi persegi panjang didefinisikan oleh Rect struktur. Dalam contoh ini, posisinya adalah (10.10), lebarnya adalah 150, dan tingginya adalah 100 unit independen perangkat:

RectangleGeometry.

Geometri jalur

Geometri jalur menggambarkan bentuk kompleks yang dapat terdiri dari busur, kurva, elipsis, garis, dan persegi panjang.

Kelas PathGeometry menentukan properti berikut:

  • Figures, dari jenis PathFigureCollection, yang mewakili kumpulan PathFigure objek yang menjelaskan konten jalur.
  • FillRule, dari jenis FillRule, yang menentukan bagaimana area persimpangan yang terkandung dalam geometri digabungkan. Nilai default properti ini adalah FillRule.EvenOdd.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Untuk informasi selengkapnya tentang FillRule enumerasi, lihat .NET MAUI Shapes: Isi aturan.

Catatan

Properti Figures adalah ContentProperty kelas PathGeometry , sehingga tidak perlu diatur secara eksplisit dari XAML.

PathGeometry Terdiri dari kumpulan PathFigure objek, dengan masing-masing PathFigure menggambarkan bentuk dalam geometri. Masing-masing terdiri dari satu atau beberapa PathSegment objek, yang masing-masing PathFigure menggambarkan segmen bentuk. Ada banyak jenis segmen:

Semua kelas di atas berasal dari kelas abstrak PathSegment .

Segmen dalam digabungkan PathFigure menjadi satu bentuk geometris dengan titik akhir setiap segmen menjadi titik awal segmen berikutnya. Properti StartPoint menentukan PathFigure titik dari mana segmen pertama digambar. Setiap segmen berikutnya dimulai di titik akhir segmen sebelumnya. Misalnya, garis vertikal dari 10,50 ke 10,150 dapat didefinisikan dengan mengatur StartPoint properti ke 10,50 dan membuat LineSegment dengan Point pengaturan properti :10,150

<Path Stroke="Black">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="10,50">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <LineSegment Point="10,150" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

Geometri yang lebih kompleks dapat dibuat dengan menggunakan kombinasi PathSegment objek, dan dengan menggunakan beberapa PathFigure objek dalam PathGeometry.

Membuat ArcSegment

Membuat ArcSegment busur elips antara dua titik. Busur elips didefinisikan oleh titik awal dan akhir, x- dan y-radius, faktor rotasi sumbu x, nilai yang menunjukkan apakah busur harus lebih besar dari 180 derajat, dan nilai yang menjelaskan arah di mana busur digambar.

Kelas ArcSegment menentukan properti berikut:

  • Point, dari jenis Point, yang mewakili titik akhir busur elips. Nilai default properti ini adalah (0,0).
  • Size, dari jenis Size, yang mewakili x- dan y-radius busur. Nilai default properti ini adalah (0,0).
  • RotationAngle, dari jenis double, yang mewakili jumlah dalam derajat di mana elips diputar di sekitar sumbu x. Nilai default properti ini adalah 0.
  • SweepDirection, dari jenis SweepDirection, yang menentukan arah di mana busur digambar. Nilai default properti ini adalah SweepDirection.CounterClockwise.
  • IsLargeArc, dari jenis bool, yang menunjukkan apakah busur harus lebih besar dari 180 derajat. Nilai default properti ini adalah false.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Catatan

Kelas ArcSegment tidak berisi properti untuk titik awal busur. Ini hanya mendefinisikan titik akhir busur yang diwakilinya. Titik awal busur adalah titik PathFigure ArcSegment saat ini yang ditambahkan.

Enumerasi SweepDirection menentukan anggota berikut:

  • CounterClockwise, yang menentukan bahwa busur digambar dalam arah berlawanan arah searah jajar.
  • Clockwise, yang menentukan bahwa busur digambar dalam arah searah jajaran jam.

Contoh berikut menunjukkan cara membuat dan merender ArcSegment dalam Path objek:

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

Dalam contoh ini, busur elips ditarik dari (10.10) hingga (200.100).

Membuat BezierSegment

Sebuah BezierSegment membuat kurva Bezier kubik di antara dua titik. Kurva Bezier kubik didefinisikan oleh empat poin: titik awal, titik akhir, dan dua titik kontrol.

Kelas BezierSegment menentukan properti berikut:

  • Point1, dari jenis Point, yang mewakili titik kontrol pertama kurva. Nilai default properti ini adalah (0,0).
  • Point2, dari jenis Point, yang mewakili titik kontrol kedua kurva. Nilai default properti ini adalah (0,0).
  • Point3, dari jenis Point, yang mewakili titik akhir kurva. Nilai default properti ini adalah (0,0).

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Catatan

Kelas BezierSegment tidak berisi properti untuk titik awal kurva. Titik awal kurva adalah titik PathFigure BezierSegment saat ini yang ditambahkan.

Dua titik kontrol kurva Bezier kubik berulah seperti magnet, menarik bagian dari apa yang sebaliknya akan menjadi garis lurus menuju diri mereka sendiri dan menghasilkan kurva. Titik kontrol pertama memengaruhi bagian awal kurva. Titik kontrol kedua memengaruhi bagian akhir kurva. Kurva tidak selalu melewati salah satu titik kontrol. Sebaliknya, setiap titik kontrol memindahkan bagian garisnya ke arah itu sendiri, tetapi tidak melalui dirinya sendiri.

Contoh berikut menunjukkan cara membuat dan merender BezierSegment dalam Path objek:

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

Dalam contoh ini, kurva Bezier kubik digambar dari (10.10) hingga (300.10). Kurva memiliki dua titik kontrol pada (100.0) dan (200.200):

Line graphic shows a Bezier curve.

Membuat LineSegment

Membuat LineSegment garis di antara dua titik.

Kelas LineSegment mendefinisikan Point properti, jenis Point, yang mewakili titik akhir segmen garis. Nilai default properti ini adalah (0,0), dan didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Catatan

Kelas LineSegment tidak berisi properti untuk titik awal baris. Ini hanya mendefinisikan titik akhir. Titik awal garis adalah titik PathFigure LineSegment saat ini yang ditambahkan.

Contoh berikut menunjukkan cara membuat dan merender LineSegment objek dalam Path objek:

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

Dalam contoh ini, segmen garis ditarik dari (10.100) ke (100.100), dan dari (100.100) ke (100.50). Selain itu, PathFigure ditutup karena propertinya IsClosed diatur ke true. Ini menghasilkan segitiga yang digambar:

Line graphic shows a triangle.

Membuat PolyBezierSegment

Membuat PolyBezierSegment satu atau beberapa kurva Bezier kubik.

Kelas PolyBezierSegment mendefinisikan Points properti, jenis PointCollection, yang mewakili titik yang menentukan PolyBezierSegment. A PointCollection adalah ObservableCollection Point objek. Properti ini didukung oleh BindableProperty objek, yang berarti dapat menjadi target pengikatan data, dan ditata.

Catatan

Kelas PolyBezierSegment tidak berisi properti untuk titik awal kurva. Titik awal kurva adalah titik PathFigure PolyBezierSegment saat ini yang ditambahkan.

Contoh berikut menunjukkan cara membuat dan merender PolyBezierSegment dalam Path objek:

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

Dalam contoh ini, PolyBezierSegment menentukan dua kurva Bezier kubik. Kurva pertama adalah dari (10.10) hingga (150.100) dengan titik kontrol (0,0), dan titik kontrol lain (100,0). Kurva kedua adalah dari (150.100) hingga (300.10) dengan titik kontrol (150,0) dan titik kontrol lain (200,0):

Line graphic shows two connected Bezier curves.

Membuat PolyLineSegment

Membuat PolyLineSegment satu atau beberapa segmen garis.

Kelas PolyLineSegment mendefinisikan Points properti, jenis PointCollection, yang mewakili titik yang menentukan PolyLineSegment. A PointCollection adalah ObservableCollection Point objek. Properti ini didukung oleh BindableProperty objek, yang berarti dapat menjadi target pengikatan data, dan ditata.

Catatan

Kelas PolyLineSegment tidak berisi properti untuk titik awal baris. Titik awal garis adalah titik PathFigure PolyLineSegment saat ini yang ditambahkan.

Contoh berikut menunjukkan cara membuat dan merender PolyLineSegment dalam Path objek:

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

Dalam contoh ini, PolyLineSegment menentukan dua baris. Baris pertama adalah dari (10.10) hingga (50.10), dan baris kedua adalah dari (50.10) hingga (50.50):

Line graphic shows two lines at a right angle.

Membuat PolyQuadraticBezierSegment

Membuat PolyQuadraticBezierSegment satu atau beberapa kurva Bezier kuadrat.

Kelas PolyQuadraticBezierSegment mendefinisikan Points properti, jenis PointCollection, yang mewakili titik yang menentukan PolyQuadraticBezierSegment. A PointCollection adalah ObservableCollection Point objek. Properti ini didukung oleh BindableProperty objek, yang berarti dapat menjadi target pengikatan data, dan ditata.

Catatan

Kelas PolyQuadraticBezierSegment tidak berisi properti untuk titik awal kurva. Titik awal kurva adalah titik PathFigure PolyQuadraticBezierSegment saat ini yang ditambahkan.

Contoh berikut menunjukkan untuk membuat dan merender PolyQuadraticBezierSegment dalam Path objek:

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

Dalam contoh ini, PolyQuadraticBezierSegment menentukan dua kurva Bezier. Kurva pertama adalah dari (10.10) hingga (150.50) dengan titik kontrol pada (100.100). Kurva kedua adalah dari (100.100) hingga (15.200) dengan titik kontrol pada (0.100):

Line graphic shows two connected overlapping Bezier curves.

Membuat QuadraticBezierSegment

Membuat QuadraticBezierSegment kurva Bezier kuadrat di antara dua titik.

Kelas QuadraticBezierSegment menentukan properti berikut:

  • Point1, dari jenis Point, yang mewakili titik kontrol kurva. Nilai default properti ini adalah (0,0).
  • Point2, dari jenis Point, yang mewakili titik akhir kurva. Nilai default properti ini adalah (0,0).

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Catatan

Kelas QuadraticBezierSegment tidak berisi properti untuk titik awal kurva. Titik awal kurva adalah titik PathFigure QuadraticBezierSegment saat ini yang ditambahkan.

Contoh berikut menunjukkan cara membuat dan merender QuadraticBezierSegment dalam Path objek:

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

Dalam contoh ini, kurva Bezier kuadrat digambar dari (10.10) hingga (300.10). Kurva memiliki titik kontrol pada (200.200):

Line graphic shows a quadratic Bezier curve.

Membuat geometri kompleks

Geometri yang lebih kompleks dapat dibuat dengan menggunakan kombinasi PathSegment objek. Contoh berikut membuat bentuk menggunakan BezierSegment, , LineSegmentdan 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>

Dalam contoh ini, pertama-tama BezierSegment didefinisikan menggunakan empat poin. Contoh kemudian menambahkan LineSegment, yang digambar di antara titik BezierSegment akhir ke titik yang ditentukan oleh LineSegment. Akhirnya, digambar ArcSegment dari titik LineSegment akhir ke titik yang ditentukan oleh ArcSegment.

Geometri yang lebih kompleks dapat dibuat dengan menggunakan beberapa PathFigure objek dalam PathGeometry. Contoh berikut membuat PathGeometry dari tujuh PathFigure objek, beberapa di antaranya berisi beberapa PathSegment objek:

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

Dalam contoh ini, kata "Hello" digambar menggunakan kombinasi LineSegment objek dan BezierSegment , bersama dengan satu ArcSegment objek:

Multiple PathFigure objects.

Geometri komposit

Objek geometri komposit dapat dibuat menggunakan GeometryGroup. Kelas GeometryGroup membuat geometri komposit dari satu atau beberapa Geometry objek. Sejumlah Geometry objek dapat ditambahkan ke GeometryGroup.

Kelas GeometryGroup menentukan properti berikut:

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Catatan

Properti Children adalah ContentProperty kelas GeometryGroup , sehingga tidak perlu diatur secara eksplisit dari XAML.

Untuk informasi selengkapnya tentang FillRule enumerasi, lihat Mengisi aturan.

Untuk menggambar geometri komposit, atur objek yang diperlukan Geometry sebagai turunan dari GeometryGroup, dan tampilkan dengan Path objek. XAML berikut menunjukkan contoh ini:

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

Dalam contoh ini, empat EllipseGeometry objek dengan koordinat x-radius dan y-radius yang identik, tetapi dengan koordinat pusat yang berbeda, digabungkan. Ini menciptakan empat lingkaran yang tumpang tindih, yang interiornya diisi oranye karena aturan pengisian default EvenOdd :

Line graphic shows four overlapping circles with regions filled.

RoundRectangleGeometry

Geometri persegi bulat mewakili geometri persegi panjang, atau persegi panjang, dengan sudut bulat, dan didefinisikan oleh radius sudut dan Rect struktur yang menentukan posisi relatifnya serta tinggi dan lebarnya.

Kelas RoundRectangleGeometry , yang berasal dari GeometryGroup kelas , mendefinisikan properti berikut:

  • CornerRadius, dari jenis CornerRadius, yang merupakan radius sudut geometri.
  • Rect, dari jenis Rect, yang mewakili dimensi persegi panjang.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Catatan

Aturan isian yang RoundRectangleGeometry digunakan oleh adalah FillRule.Nonzero. Untuk informasi selengkapnya tentang aturan isian, lihat Mengisi aturan.

Contoh berikut menunjukkan cara membuat dan merender RoundRectangleGeometry dalam Path objek:

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

Posisi dan dimensi persegi panjang didefinisikan oleh Rect struktur. Dalam contoh ini, posisinya adalah (10.10), lebarnya adalah 150, dan tingginya adalah 100 unit independen perangkat. Selain itu, sudut persegi panjang dibulatkan dengan radius 5 unit independen perangkat.

Klip dengan Geometri

Kelas VisualElement memiliki Clip properti, jenis Geometry, yang mendefinisikan kerangka konten elemen. Clip Ketika properti diatur ke Geometry objek, hanya area yang berada di dalam wilayah yang Geometry akan terlihat.

Contoh berikut menunjukkan cara menggunakan Geometry objek sebagai wilayah klip untuk Image:

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

Dalam contoh ini, EllipseGeometry dengan RadiusX nilai dan RadiusY 100, dan Center nilai (180.180) diatur ke Clip properti dari Image. Hanya bagian gambar yang berada di dalam area elips yang akan ditampilkan:

Clip an Image with an EllipseGeometry.

Catatan

Geometri sederhana, geometri jalur, dan geometri komposit semuanya dapat digunakan untuk mengklip VisualElement objek.

Fitur lainnya

Kelas ini GeometryHelper menyediakan metode pembantu berikut: