Grafik

Telusuri sampel

.NET Multi-platform App UI (.NET MAUI) menyediakan kanvas grafis lintas platform tempat grafik 2D dapat digambar menggunakan jenis dari Microsoft.Maui.Graphics namespace layanan. Kanvas ini mendukung menggambar dan melukis bentuk dan gambar, menyusun operasi, dan transformasi objek grafis.

Ada banyak kesamaan antara fungsionalitas yang disediakan oleh Microsoft.Maui.Graphics, dan fungsionalitas yang disediakan oleh bentuk dan kuas .NET MAUI. Namun, masing-masing ditujukan untuk skenario yang berbeda:

• Microsoft.Maui.Graphics fungsionalitas harus dikonsumsi pada kanvas gambar, memungkinkan grafis berkinerja digambar, dan memberikan pendekatan yang nyaman untuk menulis kontrol berbasis grafis. Misalnya, kontrol yang mereplikasi profil kontribusi GitHub dapat lebih mudah diimplementasikan menggunakan Microsoft.Maui.Graphics daripada dengan menggunakan bentuk MAUI .NET.
• Bentuk MAUI .NET dapat dikonsumsi langsung di halaman, dan kuas dapat dikonsumsi oleh semua kontrol. Fungsionalitas ini disediakan untuk membantu Anda menghasilkan UI yang menarik.

Untuk informasi selengkapnya tentang bentuk MAUI .NET, lihat Bentuk.

Gambar grafik

Di .NET MAUI, GraphicsView memungkinkan konsumsi Microsoft.Maui.Graphics fungsionalitas. GraphicsViewDrawable menentukan properti, jenis IDrawable, yang menentukan konten yang akan digambar oleh kontrol. Untuk menentukan konten yang akan digambar, Anda harus membuat objek yang berasal dari IDrawable, dan 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.

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>

Untuk informasi selengkapnya tentang GraphicsView, lihat GraphicsView.

Kanvas gambar

Kontrol GraphicsView menyediakan akses ke ICanvas objek, melalui objeknya IDrawable , di mana properti dapat diatur dan metode yang dipanggil untuk menggambar objek grafis. Untuk informasi tentang menggambar pada ICanvas, lihat Menggambar objek grafis.

ICanvas menentukan properti berikut yang memengaruhi tampilan objek yang digambar pada kanvas:

• Alpha, dari jenis float, menunjukkan keburaman objek.
• Antialias, dari jenis bool, menentukan apakah anti-aliasing diaktifkan.
• BlendMode, dari jenis BlendMode, mendefinisikan mode campuran, yang menentukan apa yang terjadi ketika objek dirender di atas objek yang ada.
• DisplayScale, dari jenis float, mewakili faktor penskalaan untuk menskalakan UI dengan pada kanvas.
• FillColor, dari jenis Color, menunjukkan warna yang digunakan untuk melukis interior objek.
• Font, dari jenis IFont, menentukan font saat menggambar teks.
• FontColor, dari jenis Color, menentukan warna font saat menggambar teks.
• FontSize, dari jenis float, menentukan ukuran font saat menggambar teks.
• MiterLimit, dari jenis float, menentukan batas panjang miter gabungan garis dalam objek.
• StrokeColor, dari jenis Color, menunjukkan warna yang digunakan untuk melukis kerangka objek.
• StrokeDashOffset, dari jenis float, menentukan jarak dalam pola tanda hubung di mana tanda hubung dimulai.
• StrokeDashPattern, dari jenis float[], menentukan pola tanda hubung dan celah yang digunakan untuk menguraikan objek.
• StrokeLineCap, dari jenis LineCap, menjelaskan bentuk di awal dan akhir garis.
• StrokeLineJoin, dari jenis LineJoin, menentukan jenis gabungan yang digunakan di puncak bentuk.
• StrokeSize, dari jenis float, menunjukkan lebar kerangka objek.

Secara default, set ICanvasStrokeSize ke 1, StrokeColor ke hitam, StrokeLineJoin ke LineJoin.Miter, dan StrokeLineCap ke LineJoin.Cap.

Status kanvas gambar

Kanvas gambar di setiap platform memiliki kemampuan untuk mempertahankan keadaannya. Ini memungkinkan Anda mempertahankan status grafis saat ini, dan memulihkannya jika diperlukan.

Namun, tidak semua elemen kanvas adalah elemen dari status grafis. Status grafik tidak termasuk objek gambar, seperti jalur, dan objek cat, seperti gradien. Elemen umum status grafis pada setiap platform mencakup data goresan dan isi, dan data font.

Status grafis masing-masing ICanvas dapat dimanipulasi dengan metode berikut:

• SaveState, yang menyimpan status grafik saat ini.
• RestoreState, yang mengatur status grafik ke status yang terakhir disimpan.
• ResetState, yang mengatur ulang status grafik ke nilai defaultnya.

Catatan

Status yang dipertahankan oleh metode ini bergantung pada platform.