Bagikan melalui


Grafik SkiaSharp di Xamarin.Forms

Menggunakan SkiaSharp untuk grafik 2D di aplikasi Anda Xamarin.Forms

SkiaSharp adalah sistem grafis 2D untuk .NET dan C# yang didukung oleh mesin grafis Skia sumber terbuka yang digunakan secara ekstensif dalam produk Google. Anda dapat menggunakan SkiaSharp dalam aplikasi Anda Xamarin.Forms untuk menggambar grafik vektor 2D, bitmap, dan teks.

Panduan ini mengasumsikan bahwa Anda terbiasa dengan Xamarin.Forms pemrograman.

SkiaSharp Preliminaries

SkiaSharp untuk Xamarin.Forms dimas sebagai paket NuGet. Setelah membuat Xamarin.Forms solusi di Visual Studio atau Visual Studio untuk Mac, Anda dapat menggunakan manajer paket NuGet untuk mencari paket SkiaSharp.Views.Forms dan menambahkannya ke solusi Anda. Jika Anda memeriksa bagian Referensi dari setiap proyek setelah menambahkan SkiaSharp, Anda dapat melihat bahwa berbagai pustaka SkiaSharp telah ditambahkan ke setiap proyek dalam solusi.

Jika aplikasi Anda Xamarin.Forms menargetkan iOS, edit file Info.plist-nya untuk mengubah target penyebaran minimum ke iOS 8.0.

Di halaman C# apa pun yang menggunakan SkiaSharp, Anda harus menyertakan using direktif untuk SkiaSharp namespace layanan, yang mencakup semua kelas, struktur, dan enumerasi SkiaSharp yang akan Anda gunakan dalam pemrograman grafis Anda. Anda juga akan menginginkan using direktif untuk SkiaSharp.Views.Forms namespace layanan untuk kelas khusus untuk Xamarin.Forms. Ini adalah namespace layanan yang jauh lebih kecil, dengan kelas yang paling penting adalah SKCanvasView. Kelas ini berasal dari Xamarin.FormsView kelas dan menghosting output grafis SkiaSharp Anda.

Penting

Namespace SkiaSharp.Views.Forms juga berisi SKGLView kelas yang berasal dari View tetapi menggunakan OpenGL untuk merender grafik. Untuk tujuan kesederhanaan, panduan ini membatasi dirinya untuk SKCanvasView, tetapi menggunakan SKGLView sebagai gantinya sangat mirip.

Dasar-Dasar Menggambar SkiaSharp

Beberapa gambar grafis paling sederhana yang dapat Anda gambar dengan SkiaSharp adalah lingkaran, oval, dan persegi panjang. Dalam menampilkan angka-angka ini, Anda akan belajar tentang koordinat, ukuran, dan warna SkiaSharp. Tampilan teks dan bitmap lebih kompleks, tetapi artikel ini juga memperkenalkan teknik tersebut.

Garis dan Jalur SkiaSharp

Jalur grafis adalah serangkaian garis lurus dan kurva yang terhubung. Jalur dapat di-stroke, diisi, atau keduanya. Artikel ini mencakup banyak aspek gambar garis, termasuk ujung dan gabungan goresan, dan garis putus-putus dan putus-putus, tetapi berhenti pendek dari geometri kurva.

Transformasi SkiaSharp

Transformasi memungkinkan objek grafis diterjemahkan secara seragam, diskalakan, diputar, atau condong. Artikel ini juga menunjukkan bagaimana Anda dapat menggunakan matriks transformasi 3 demi 3 standar untuk membuat transformasi non-affine dan menerapkan transformasi ke jalur.

Kurva dan Jalur SkiaSharp

Eksplorasi jalur berlanjut dengan menambahkan kurva ke objek jalur, dan mengeksploitasi fitur jalur kuat lainnya. Anda akan melihat bagaimana Anda dapat menentukan seluruh jalur dalam string teks ringkas, cara menggunakan efek jalur, dan cara menggali internal jalur.

Bitmap SkiaSharp

Bitmap adalah array bit persegi panjang yang sesuai dengan piksel perangkat tampilan. Seri artikel ini menunjukkan cara memuat, menyimpan, menampilkan, membuat, menggambar, menganimasikan, dan mengakses bit bitmap SkiaSharp.

Efek SkiaSharp

Efek adalah properti yang mengubah tampilan normal grafik, termasuk gradien linier dan melingkar, ubin bitmap, mode campuran, kabur, dan lainnya.