GraphicsView

Telusuri sampel

.NET Multi-platform App UI (.NET MAUI) GraphicsView adalah kanvas grafis tempat grafik 2D dapat digambar menggunakan jenis dari Microsoft.Maui.Graphics namespace. Untuk informasi selengkapnya tentang Microsoft.Maui.Graphics, lihat Grafik.

GraphicsViewDrawable menentukan properti, jenis IDrawable, yang menentukan konten yang akan digambar. Properti ini didukung oleh BindableProperty, yang berarti dapat menjadi target pengikatan data, dan ditata.

GraphicsView mendefinisikan peristiwa berikut:

• StartHoverInteraction, dengan TouchEventArgs, yang dinaikkan ketika pointer memasuki area uji hit dari GraphicsView.
• MoveHoverInteraction, dengan TouchEventArgs, yang dinaikkan ketika pointer bergerak sementara penunjuk tetap berada dalam area uji hit dari GraphicsView.
• EndHoverInteraction, yang dinaikkan ketika pointer meninggalkan area uji hit dari GraphicsView.
• StartInteraction, dengan TouchEventArgs, yang dinaikkan ketika ditekan GraphicsView .
• DragInteraction, dengan TouchEventArgs, yang dinaikkan ketika diseret GraphicsView .
• EndInteraction, dengan TouchEventArgs, yang dimunculkan ketika pers yang menaikkan StartInteraction peristiwa dirilis.
• CancelInteraction, yang dinaikkan ketika pers yang melakukan kontak dengan kontak yang GraphicsView hilang.

Membuat GraphicsView

GraphicsView harus menentukan IDrawable objek yang menentukan konten yang akan digambar pada kontrol. Ini dapat dicapai dengan membuat objek yang berasal dari IDrawable, dan dengan menerapkan metodenya Draw :

namespace MyMauiApp
{
    public class GraphicsDrawable : IDrawable
    {
        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            // Drawing code goes here
        }      
    }
}

Metode Draw ini memiliki ICanvas argumen dan RectF . Argumen ICanvas adalah kanvas gambar tempat Anda menggambar objek grafis. Argumen RectF adalah struct yang berisi data tentang ukuran dan lokasi kanvas gambar. Untuk informasi selengkapnya tentang menggambar pada ICanvas, lihat Menggambar objek grafis.

Di XAML, IDrawable objek dapat dideklarasikan sebagai sumber daya dan kemudian dikonsumsi oleh dengan GraphicsView menentukan kuncinya sebagai nilai Drawable properti:

<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui
             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
             xmlns:drawable="clr-namespace:MyMauiApp"
             x:Class="MyMauiApp.MainPage">
    <ContentPage.Resources>
        <drawable:GraphicsDrawable x:Key="drawable" />
    </ContentPage.Resources>
    <VerticalStackLayout>
        <GraphicsView Drawable="{StaticResource drawable}"
                      HeightRequest="300"
                      WidthRequest="400" />
    </VerticalStackLayout>
</ContentPage>

Posisi dan ukuran objek grafis

Lokasi dan ukuran ICanvas pada halaman dapat ditentukan dengan memeriksa properti RectF argumen dalam Draw metode .

Struktur RectF menentukan properti berikut:

• Bottom, dari jenis float, yang mewakili koordinat y dari tepi bawah kanvas.
• Center, dari jenis PointF, yang menentukan koordinat pusat kanvas.
• Height, dari jenis float, yang mendefinisikan tinggi kanvas.
• IsEmpty, dari jenis bool, yang menunjukkan apakah kanvas memiliki ukuran dan lokasi nol.
• Left, dari jenis float, yang mewakili koordinat x dari tepi kiri kanvas.
• Location, dari jenis PointF, yang mendefinisikan koordinat sudut kiri atas kanvas.
• Right, dari jenis float, yang mewakili koordinat x dari tepi kanan kanvas.
• Size, dari jenis SizeF, yang mendefinisikan lebar dan tinggi kanvas.
• Top, dari jenis float, yang mewakili koordinat y dari tepi atas kanvas.
• Width, dari jenis float, yang mendefinisikan lebar kanvas.
• X, dari jenis float, yang mendefinisikan koordinat x dari sudut kiri atas kanvas.
• Y, dari jenis float, yang mendefinisikan koordinat y dari sudut kiri atas kanvas.

Properti ini dapat digunakan untuk memposisikan dan mengukur objek grafis pada ICanvas. Misalnya, objek grafis dapat ditempatkan di tengah Canvas dengan menggunakan Center.X nilai dan Center.Y sebagai argumen ke metode menggambar. Untuk informasi tentang menggambar pada ICanvas, lihat Menggambar objek grafis.

Membatalkan validasi kanvas

GraphicsView memiliki Invalidate metode yang menginformasikan kanvas bahwa ia perlu menggambar ulang dirinya sendiri. Metode ini harus dipanggil pada GraphicsView instans:

graphicsView.Invalidate();

.NET MAUI secara otomatis membatalkan GraphicsView sesuai kebutuhan oleh UI. Misalnya, ketika elemen pertama kali ditampilkan, terlihat, atau diungkapkan dengan memindahkan elemen dari atasnya, elemen akan digambar ulang. Satu-satunya waktu yang perlu Anda panggil Invalidate adalah ketika Anda ingin memaksa GraphicsView untuk menggambar ulang dirinya sendiri, seperti jika Anda telah mengubah kontennya saat masih terlihat.