SwiftUI’ da Şekil Çizimi
Custom Shape
SwiftUI ile birlikte hazır olarak gelen bazı şekiller mevcut ancak bunlar her zaman işimizi görmeyebilir.
Kendi şeklimizi oluşturmak isteyebiliriz. Durum böyle ise SwiftUI bizden Shape
Protokolünü entegre etmemizi bekliyor.
Shape Protocol
func path(in rect: CGRect) -> Path
Bu basit protokol sadece bu metodu doğrulamamızı bekliyor. Yani belirli bir frame (in rect: CGRect)
içinde, bir çizim yapmamız bekleniyor.
Path
çizmek için kullanabileceğimiz metodlara Xcode içerisinden de bakabilirsiniz, bir kısmını buraya yansıtmış olayım ve akabinde işe koyulalım.
Bu metodlardan bazılarını (meşhurları) kullanarak bir kaç şekil çizelim.
- Pac - Man ᗧ
rect
, bu şekli barındıracak frame
i temsil eder.
move
metodu, çizime başlamak istediğimiz noktayı belirlememizi sağlar. Şeklin merkezinden başlayacağımız için, başlangıç noktamızı buraya taşıdık.
2. addArc
metodu ise, parametrelerden de anlayabileceğiniz üzere, belirli bir merkez, yarıçap ve başlangıç, bitiş açılarına göre bir çember çizmemiz için yardımcı olacak.
3. closeSubpath
metodu da, şekil çiziminde, son kaldığımız yer ile başlangıç noktamızı (move diyerek belirlemiştik) birleştirir.
Böyle bir görsel elde etmek için, 270˚ lik açı verebiliriz ve akabinde 45˚ şeklimizi çevirebiliriz.
Daha iyi anlaşılması açısından, endAngle
parametresinin etkisini şu GIF ile takip edebiliriz.
GIF’ teki açılar (0, 90..) dikkatinizi çekmiş olabilir, bunlar varsayılan (default) açılar, çizim yaparken bunları dikkate almalısınız (clockwise parametresine göre).
- Balon
Curve: Kavis, Eğim anlamlarına geliyor.
Balon şekli çiziminde de addCurve
metodunu deneyimlemiş olduk.
Burada özet olarak, bulunduğumuz (başlangıç) noktadan, hedef noktaya ilerlerken, belirlediğimiz 2 kontrol noktasına göre hedefe (to point) varılır.
(Balonumuzun biraz daha tombik olması için de bu kontrol noktalarıyla oynayabiliriz.)
Ek olarak, Path’ in bu kontrol noktalardan geçeceğinin garantisi yok, sadece bu noktalara göre şekillendiğini bilelim. Zaten doğrudan kontrol noktasına gitmesini isteseydik bu amaçla addLine
metodunu kullanırdık.
Şu görsel kavramamız için daha yardımcı olabilir.
- Üçgen
addLine
kullanımına da değinmek amacıyla son olarak da üçgen çizelim.
Çizgi (Line) çizimlerinde, sadece nokta belirlememiz yeterli olduğundan en kolay metodun bu olduğunu düşünüyorum.
Burada ekstra olarak strokedPath
metodunu kullandığımız dikkatinizi çekmiştir. Bu da bizden bir StrokeStyle
parametresi istiyor, örnek olması açısından bir kaç parametresini doldurdum. Bu parametreler ile oynayarak çizgilerin kesişim noktalarının nasıl değiştiğini gözlemleyebilirsiniz.
Border, Fill, Stroke örnekleri
Kod örneğinin çıktısı, sırasıyla görselde paylaşılmıştır.
fill
ve stroke
metodlarının Shape
ler için olduğunu belirtelim. View
leri de kapsamak adına, overlay
kullanımının daha tercih edilebilir olduğunu düşünüyorum.
Yazıyı uzatmamak adına, ihtiyacınıza binaen yukarıdaki örneklere göre ya da referans olarak aşağıdaki bir kaç siteye de bakabilirsiniz.
Ekstra
Shape
protokolü, Animatable
protokolünü de içeriyor.
Bu protokol ile SwiftUI’ a Shape
imizin hangi parametresi (ya da parametreleri) için animasyon konfigürasyonu yapabileceğini söyleyebiliriz.
PacMan çizimimiz için hızlıca kullanalım, hatırlarsanız endAngle
parametresini kullanarak GIF’te hazırlamıştık. PacMan’ e şu kodu eklememiz yeterli.
AnimatableData hakkında şu yazı da faydalı olacaktır.
Aşağıdaki repositoryleri inceleyip, Shape
’ ler ile alakalı başka örneklere de göz atabilirsiniz.