UIBezierPath: nedir, çizim yöntemleri ve nasıl çalışır

UIBezierPath Nedir?

UIBezierPath, NSObject'ten miras alan ve NSCopying, NSSecureCoding uygulayan UIKit framework sınıfıdır. Vektör yolları oluşturmak ve çizmek için üst düzey bir Objective-C/Swift API sağlar. Dahili olarak, UIBezierPath bir CGPathRef (Core Graphics nesnesi) referansı saklar, ancak çizim, geometri değişikliği ve stil yönetimi için kullanışlı yöntemler ekler.

UIBezierPath'in CGPath'i doğrudan kullanmaya göre ana avantajı yerleşik çizim yöntemleridir. Bir UIBezierPath örneğinde fill() veya stroke() çağırmak, bağlamı otomatik olarak yapılandırır ve yolu çizer. Sınıf ayrıca lineWidth, lineCapStyle, lineJoinStyle, miterLimit ve flatness özelliklerini destekleyerek stilleri depolamak için ayrı bir nesne olmadan görünümü kontrol etmeyi sağlar.

UIBezierPath, çoğu iOS uygulamasında UIView içinde özel çizim için kullanılır: basit simgelerden karmaşık animasyonlu grafiklere kadar. UIView sınıfının draw(_:) yöntemi, geliştiricilerin UIBezierPath oluşturup çizdiği ana yerdir. Sınıf, Core Animation ile tamamen uyumludur ve CAShapeLayer ile CABasicAnimation aracılığıyla yol animasyonu için kullanılabilir.

Düz çizgiler ve dikdörtgenler

move(to:) yöntemi, çizmeden yolun başlangıç noktasını belirtilen koordinatlara taşır. Bu, herhangi bir segment oluşturmadan önce zorunlu bir çağrıdır. addLine(to:) mevcut konumdan belirtilen noktaya düz bir segment ekler. close() yöntemi, son noktadan son move(to:)'nun ilk noktasına bir çizgi çizerek konturu kapatır.

Köşeleri yuvarlatılmış dikdörtgenler

UIBezierPath hazır şekiller için birkaç kullanışlı başlatıcı sağlar. init(rect:) bir dikdörtgen oluşturur, init(roundedRect:cornerRadius:) köşeleri yuvarlatılmış bir dikdörtgen oluşturur. UIRectCorner parametresi, yalnızca seçilen köşelerin (topLeft ve bottomRight gibi) yuvarlatılmasına izin verir ve diğerlerini düz bırakır. Bu, özel düğmeler ve kartlar oluşturmak için yaygın olarak kullanılır.

init(ovalIn:) belirtilen dikdörtgenin içine yazılmış bir elips oluşturur. Dikdörtgen bir kare ise elips bir daireye dönüşür. init(roundedRect:byRoundingCorners:cornerRadii:) en esnek seçenektir ve her köşe için farklı yarıçaplar ayarlamaya izin verir. Bu başlatıcı iOS 6'da tanıtılmıştır ve yuvarlatılmış kaplar oluşturmak için standart olmaya devam etmektedir.

let path = UIBezierPath()
path.move(to: CGPoint(x: 50, y: 50))
path.addLine(to: CGPoint(x: 200, y: 50))
path.addLine(to: CGPoint(x: 200, y: 150))
path.addLine(to: CGPoint(x: 125, y: 200))
path.addLine(to: CGPoint(x: 50, y: 150))
path.close()

Bezier eğrileri: ikinci dereceden ve kübik

addQuadCurve(to:controlPoint:) bir kontrol noktasına sahip ikinci dereceden bir Bezier eğrisi ekler. Bu tür eğri, hesaplamaları en aza indirmek gerektiğinde basit yumuşak bükümler için kullanılır. İkinci dereceden bir eğri her zaman bir paraboldür ve başlangıç, kontrol ve bitiş noktalarının oluşturduğu üçgenin içinde olması garanti edilir.

Kübik Bezier eğrileri

addCurve(to:controlPoint1:controlPoint2:) iki kontrol noktasına sahip kübik bir Bezier eğrisi ekler. Kübik eğriler tüm modern vektör düzenleyicilerinde ve TrueType yazı tiplerinde kullanılır. İki kontrol noktası, hassas şekil kontrolü için daha fazla serbestlik derecesi sağlar. Bu yöntem, organik ve karmaşık konturlar oluşturmak için önerilir.

Eğriler oluşturulurken süreklilik ilkesini korumak önemlidir segmentlerin bağlantı noktasındaki yumuşaklık. C1 sürekliliği (teğet) için, sonraki eğrinin kontrol noktası bir öncekinin kontrol noktasıyla aynı çizgide olmalıdır. C2 sürekliliği (eğrilik) için, aynı sayıda kontrol noktasına sahip iki UIBezierPath arasında animasyon yapılırken CAShapeLayer'da otomatik olarak sağlanan daha karmaşık koordinasyon gereklidir.

Yaylar ve daireler

addArc(withCenter:radius:startAngle:endAngle:clockwise:) belirtilen parametrelerle bir daire yayı ekler. Açılar, daire merkezine göre radyan cinsinden belirtilir. Sıfır açısı sağa doğru yönü (saat yüzünde 3 yönü) temsil eder. clockwise parametresi yönü belirler: true saat yönünde, false saat yönünün tersine. Yaylar, daire grafikleri, hız göstergeleri ve etkileşimli ilerleme halkaları için vazgeçilmezdir.

Daireler ve sektörler

Tam bir daire için startAngle = 0 ve endAngle = .pi * 2 kullanın. Bir sektör oluşturmak için (daire grafiğinin parçası olarak), merkeze addLine(to:) ve close() ile birlikte addArc kullanın. UIBezierPath'in yerleşik bir addCircle yöntemi yoktur bir daire, kare bir dikdörtgenle init(ovalIn:) aracılığıyla veya tam açıyla addArc aracılığıyla oluşturulur.

addArc(withCenter:radius:startAngle:endAngle:clockwise:) yöntemi, mevcut konum eşleşmiyorsa otomatik olarak yayın başlangıç noktasına move(to:) gerçekleştirir. Mevcut konum farklıysa, onunla yayın başlangıcı arasında düz bir çizgi çizilir. Bu davranış, her yeni konturdan önce açık bir move(to:) gerektiren Core Graphics'tan farklıdır.

let center = CGPoint(x: 150, y: 150)
let slice = UIBezierPath()
slice.move(to: center)
slice.addArc(
    withCenter: center,
    radius: 100,
    startAngle: 0,
    endAngle: .pi * 0.75,
    clockwise: true
)
slice.close()

Yolun doldurulması ve konturlanması

fill(), mevcut fillColor veya setFill() aracılığıyla grafik bağlamında ayarlanan renkle yolun iç alanını doldurur. Kendi kendini kesen yollar için doldurma kuralı usesEvenOddFillRule özelliği tarafından belirlenir. true ise, çift-tek kuralı kullanılır: bir noktadan çıkan ışın konturu tek sayıda kesiyorsa, nokta şeklin içinde kabul edilir.

Kontur ayarları

stroke(), mevcut lineWidth, lineCapStyle ve lineJoinStyle ayarlarıyla yol konturunu çizer. lineCapStyle açık segment uçlarının şeklini tanımlar: .butt (düz kesim), .round (yarım daire), .square (çıkıntılı kare). lineJoinStyle köşe birleşimlerinin şeklini tanımlar: .miter (keskin), .round (yuvarlak), .bevel (pahlı).

Kesikli çizgiler için setLineDash(_:count:phase:) özelliği kullanılır. Alternatif çizgi ve boşluk uzunlukları, eleman sayısı ve başlangıç fazından oluşan bir dizi alır. Çizgi oluşturma, yol rasterleştirme sırasında gerçekleştirilir karmaşık desenler konturun geometrik karmaşıklığını artırmaz. CAShapeLayer, baştan sona bir “çizim” efekti için strokeEnd özelliğinin animasyonunu destekler.

override func draw(_ rect: CGRect) {
    let path = UIBezierPath(ovalIn: CGRect(x: 50, y: 50, width: 200, height: 200))
    UIColor.blue.setFill()
    UIColor.black.setStroke()
    path.lineWidth = 4
    path.fill()
    path.stroke()
}

Karmaşık şekil oluşturma örneği

UIBezierPath kullanarak halka şeklinde özel bir ilerleme göstergesi oluşturalım. Halka, farklı kontur renklerine sahip aynı yarıçapta iki yaydan oluşur. İlk yay gri renkte tam bir dairedir (arka plan), ikincisi ilerlemeyi gösteren bir segmenttir. Animasyon için CAShapeLayer ve CABasicAnimation kullanılır.

class RingView: UIView {

    private let progressLayer = CAShapeLayer()

    override func layoutSubviews() {
        super.layoutSubviews()
        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = bounds.width * 0.4
        let lineWidth: CGFloat = 12

        let backgroundRing = UIBezierPath()
        backgroundRing.addArc(withCenter: center, radius: radius,
                          startAngle: -.pi / 2, endAngle: .pi * 1.5, clockwise: true)

        progressLayer.path = backgroundRing.cgPath
        progressLayer.strokeColor = UIColor.systemBlue.cgColor
        progressLayer.lineWidth = lineWidth
        progressLayer.lineCap = .round
        progressLayer.fillColor = UIColor.clear.cgColor
        progressLayer.strokeEnd = 0
        layer.addSublayer(progressLayer)
    }

    func animateProgress(to value: CGFloat) {
        CABasicAnimation(keyPath: "strokeEnd").apply {
            $0.toValue = value
            $0.duration = 1.5
            $0.timingFunction = CAMediaTimingFunction(name: .easeOut)
            progressLayer.add($0, forKey: nil)
        }
        progressLayer.strokeEnd = value
    }
}

Bu örnekte, UIBezierPath dairesel bir kontur oluşturmak için kullanılır ve daha sonra cgPath özelliği aracılığıyla CAShapeLayer'a aktarılır. strokeEnd'in 0'dan 1'e animasyonu, halkanın dolmasını görselleştirir. Bu yaklaşım, yükleniyor göstergelerinde, fitness takipçilerinde ve ilerleme widget'larında kullanılır. layoutSubviews yöntemi, View boyutu değiştiğinde yolun yeniden oluşturulmasını garanti eder.

lineCap = .round yaya yuvarlak uçlar ekleyerek göstergeye daha düzenli bir görünüm kazandırır. strokeEnd özelliği, CAShapeLayer'ın animasyon yapılabilir bir özelliğidir ve her karede tüm konturun yeniden çizilmesini gerektirmez. Animasyon tamamen Core Animation aracılığıyla GPU'da çalışır ve CPU'ya yük bindirmeden 60 FPS sağlar.