SkiaSharp — Xamarin’de 2D Çizim İşlemleri

Selamlar.

Xamarin geliştiricilerin sayısı gün geçtikçe artıyor ama önem verilmeyen arayüz gibi bir kısım var. Kabul edelim hepimiz Forms uygulaması geliştirirken UI tarafı yüzünden sıkıntı çekiyoruz. Çünkü kullanıcıların ilgisini çeken kısım uygulamanın arayüzü. Bu sebeple UI kısmına daha fazla ağırlık vermek durumundayız. XAML yada .cs kısmını yazarken istediğimiz şekilleri tam olarak elde edememek ise ayrı bir durum (Örneğin altıgen, elips kullanmak vs).

Ben bu durumu daha önce tasarımcı olarak çalıştığım için Photoshop veya Illustator’da tasarlayıp projeye bir resim olarak atıyor, istediğim UI şeklini bu şekilde sağlıyordum. Ama farkettim ki bu bizi nativelikten uzaklaştırıyor, daha çok eski html mantığına dönüştürüyor (Resmi koy, linkini ekle gibi).

Xamarin geliştiricileri bunu da düşünüp bize Google’ın Skia Kütüphanesi tarafından desteklenen 2D çizimler için bir API sunuyor. SkiaSharp ile istediğimiz çizimleri yapmamız mümkün. Hem bu şekilde uygulamamız resimlerle boğulmamış, boyut artmamış oluyor hem de nativelik durumundan uzaklaştırılmamış oluyor.

Üstelik SkiaSharp ile geliştirdiğiniz herhangi bir çizim tüm platformlarda sorunsuz, hızlı bir şekilde çalışabiliyor. O halde uygulamaya geçelim :)

Öncelikle SkiaSharp.Views.Forms‘u NuGetten tüm katmanlara ekliyoruz.

Daha sonra çizim için SkiaSharp’ı XAML tarafında kullanabilmek için xmlns tanımlamasını yapıyoruz.

Sıra geldi çizim yapacağımız kısmı XAML tarafta tanımlamaya :)

<ContentPage.Content>
<Grid>
// Burada onPaint metodunu çizime başlaması için vermemiz gerekiyor.
// Metodun içini ne çizmek istiyorsak ona göre dolduracağız.
<forms:SKCanvasView PaintSurface="SKCanvasView_OnPaintSurface" />
</Grid>
</ContentPage.Content>

Sayfanın .cs tarafına gelip SKCanvasView_OnPaintSurface metodunu yazıyoruz.

private void SKCanvasView_OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
}

Sıra geldi içini doldurmaya. Ben SkiaSharp ile Visual Studio’nun logosunu çizeceğim. Daha önce Illustrator kullananlar bilirler. Eğer siz pen aracı ile 3 noktayı işaretlerseniz o noktaların arasında kalan bölge doldurulur. Ben de bu mantıkta CubicTo ve LineTo metodlarıyla çizimi gerçekleştireceğim. Buradaki CubicTo metodunu köşe kısımlarına ovallik vermek ve fill işlemi için kullandım, istediğinize göre farklı şekillerde kullanabilirsiniz.

Önce logonun ana kısmını, sonra üzerine iç kısmını çizdim.

Vee sonuç :)

SkiaSharp ile daha birçok çizimi gerçekleştirebilmemiz mümkün. SKPath sınıfının ArcTo, ConicTo, QuadTo gibi metodlarını kullanarak çizim işlemlerinizi yapabilir, FingerPrinting ile kullanıcıdan çizim alma vs. gibi işlemleri de gerçekleştirebilirsiniz.

Konuyla alakalı daha detaylı bilgiye buradan ulaşabilirsiniz.
Ayrıca projenin kaynak dosyalarını buradan inceleyebilirsiniz.

Görüşmek üzere :)