Core Graphics — nedir, çalışma prensipleri ve 2D grafikler için framework

Core Graphics Nedir?

Core Graphics (Quartz 2D olarak da bilinir), Apple'ın 2D grafik motorunu uygulayan bir framework'tür. Quartz taşınabilir grafik kütüphanesine dayanır ve her eylemin kağıda çizmeye benzer bir sıradaki komut olduğu sayfa tabanlı bir çizim modeli kullanır. Core Graphics, kenar yumuşatma, şeffaflık (alfa birleştirme) ve ICC renk uzaylarını destekler.

Core Graphics mimarisi, hedef çıktı aygıtını (ekran, yazıcı, PDF belgesi veya raster tampon) kapsülleyen bir grafik bağlamı (CGContext) etrafında inşa edilmiştir. Bağlam, geçerli ayarları yönetir: renk, çizgi kalınlığı, dönüşüm, kırpma alanı ve yazı tipleri. Bu yaklaşım, çizim kodunu değiştirmeden farklı çıktı aygıtları için birleşik bir API sağlar.

Core Graphics öncelikle CPU'da çalışır ve vektör modelini (çözünürlükten bağımsız) kullanır. Bu, çizgilerin ve eğrilerin çizim sırasında geçerli aygıt çözünürlüğünde rasterleştirildiği anlamına gelir. Metal'den farklı olarak, Core Graphics açık GPU kaynak yönetimi gerektirmez — sistem tüm optimizasyonu halleder. Çoğu 2D görev için (grafikler, çizelgeler, özel UI öğeleri), Core Graphics'ın performansı 60 FPS'yi korumak için yeterlidir.

Mimari ve Ana Tipler

Core Graphics, her biri belirli bir işlevsellikten sorumlu olan yaklaşık 50 temel tipi (opak tipler) içerir. Tüm tipler Core Foundation bellek yönetimi kurallarına uyar: adında Create bulunan işlevler aracılığıyla oluşturulur, CGRelease çağrısı gerektirir ve Objective-C'de ARC uyumlu değildir (ancak Swift, CF_RETURNS_RETAINED ek açıklamaları aracılığıyla belleği otomatik olarak yönetir).

Core Graphics'ın Ana Tipleri

CGContext — çizim bağlamı, framework'ün merkezi tipi. CGPath — değişmez bir vektör yolu. CGColor — belirtilen renk uzayında bir renk. CGGradient — gradyan dolgu. CGImage — bir raster görüntü. CGLayer — tekrarlayan çizim için optimize edilmiş çevrimdışı tampon. CGDataProvider — görüntüler için veri kaynağı. CGColorSpace — bir renk uzayı (sRGB, Display P3, Gray).

Her tip minimum ek yük için tasarlanmıştır: CGPath önbelleğe alınabilir ve farklı bağlamlar arasında yeniden kullanılabilir, CGColor iletildiğinde GPU donanım temsiline dönüştürülür, CGLayer önceden rasterleştirilmiş içeriği saklar. Bu mimari, Core Graphics'ın hem basit UI görevlerinde hem de profesyonel grafik düzenleyicilerinde verimli bir şekilde çalışmasını sağlar.

CGPath: Vektör Yolları ve Optimizasyonu

CGPath, geometrik segmentlerin bir dizisini tanımlayan değişmez bir nesnedir: düz çizgiler, Bezier eğrileri, yaylar ve kapanışlar. UIBezierPath'ten farklı olarak, CGPath çizim yöntemleri içermez — yalnızca geometriyi depolar. Çizmek için CGPath bağlama eklenir (CGContextAddPath) ve ardından strokePath veya fillPath aracılığıyla render edilir. Değişmezlik, iş parçacığı güvenliğini ve önbellekleme yeteneğini garanti eder.

Yolların Oluşturulması ve Optimizasyonu

CGPathCreateMutable, adım adım oluşturma için değişebilir bir yol (CGMutablePathRef) oluşturur. Son montajdan sonra değişmez bir CGPathRef'e dönüştürülür. Apple, CGPath'teki nokta sayısını en aza indirmeyi önerir — çok karmaşık yollar (1000 segmentten fazla) rasterleştirmeyi yavaşlatır. Optimizasyon için, gereksiz eşdoğrusal noktaları kaldıran CGPathCreateCopyBySimplifyingPath'i kullanın.

İki CGPath nesnesi arasında şekil animasyonu için CAShapeLayer'ın path özelliğinde CABasicAnimation kullanabilirsiniz. Sınırlama: her iki CGPath de aynı sayıda segmente (kontrol noktası) sahip olmalıdır. CGPathApply işlevi, yolun tüm öğelerini dolaşmanıza ve yapılarını karşılaştırmanıza olanak tanır. Segmentler eşleşmezse, animasyon sarsak olacaktır — bu durumda, manuel nokta enterpolasyonu için CADisplayLink kullanın.

// değişebilir yol oluştur
let mutablePath = CGMutablePath()
mutablePath.moveTo(to: CGPoint(x: 0, y: 0))
mutablePath.addLine(to: CGPoint(x: 100, y: 0))
mutablePath.addLine(to: CGPoint(x: 100, y: 100))
mutablePath.closeSubpath()

// güvenli önbellek için değişmeze dönüştür
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

Gradyanlar: CGGradient ve CGShading

CGGradient, düz bir çizgi boyunca (doğrusal gradyan) veya merkezden dışarıya (radyal gradyan) iki veya daha fazla renk arasında yumuşak bir geçiş tanımlayan bir nesnedir. CGGradient, belirtilen bir renk uzayı, bir CGColorRef dizisi ve 0.0'dan 1.0'a kadar durma konumları dizisi ile oluşturulur. Oluşturulduktan sonra, gradyan farklı bağlamlarda birden çok kez yeniden kullanılabilir.

Gelişmiş Gradyanlar için CGShading

CGShading, bir yol boyunca renk değiştirme işlevi tanımlamaya izin veren daha güçlü bir mekanizmadır. Sabit bir renk kümesiyle çalışan CGGradient'ın aksine, CGShading her noktada rengi hesaplayan bir geri çağırma işlevi (CGFunctionRef) kullanır. Bu, doğrusal olmayan geçişler ve bileşik renk şemalarıyla karmaşık gradyanlar oluşturmayı sağlar.

Bir şeklin içine gradyan çizmek için, o şeklin yolu üzerinde bir kırpma (clip) gereklidir. Sıra: yolu bağlama ekleyin, CGContextClip'i çağırın, ardından gradyanı çizin. Kırpma olmadan, gradyan tüm bağlamı doldurur. iOS'ta CGGradient daha basit ve daha performanslı seçenek olarak önerilir — CGShading yalnızca özel renk işlevleri için uygundur.

func drawGradient(ctx: CGContext, rect: CGRect) {
    let colors = [UIColor.red.cgColor, UIColor.blue.cgColor] as CFArray
    guard let gradient = CGGradient(
        colorsSpace: CGColorSpaceCreateDeviceRGB(),
        colors: colors,
        locations: [0.0, 1.0]
    ) else { return }

    ctx.saveGState()
    ctx.addEllipse(in: rect)
    ctx.clip()
    ctx.drawLinearGradient(
        gradient,
        start: CGPoint(x: rect.midX, y: rect.minY),
        end: CGPoint(x: rect.midX, y: rect.maxY),
        options: []
    )
    ctx.restoreGState()
}

Görüntülerle Çalışma: CGImage ve CGLayer

CGImage, Core Graphics'ta bir dosyadan yüklenebilen, programlı olarak oluşturulabilen veya UIImage'dan elde edilebilen bir raster görüntüdür. CGImage, piksel verileri, renk uzayı bilgisi, boyut, bit derinliği ve veri düzenini içerir. UIImage'den farklı olarak, CGImage Retina ölçeklendirmesini yönetmez — bu sorumluluk scale parametresi aracılığıyla geliştiriciye aittir.

CGLayer — Tekrarlayan Çizimin Optimizasyonu

CGLayer, statik içeriğin önceden rasterleştirilmesi için çevrimdışı bir tampondur. Aynı çizim komutları kümesi tekrar tekrar yürütülürse (örneğin, bir arka plan deseni), CGLayer bunu bir kez rasterleştirir ve ardından bağlama kopyalar. Apple'a göre, CGLayer kullanımı tekrarlayan çizimi CPU'da 2–5 kat ve donanım hızlandırmasıyla 10 kata kadar hızlandırabilir.

Görüntü yüklemek için CGImageSource'u kullanın — GIF/APNG'den meta verileri, küçük resimleri ve tek tek kareleri okumak için güçlü bir API. CGImageSource, aşamalı yüklemeye ve yalnızca gerekli parçaların alınmasına izin verir. Büyük görüntülerle (ekran boyutunu aşan) çalışırken, disk önbelleği olan bir CGImageSource oluşturulması ve küçültülmüş bir sürümü görüntülemek için CGImageSourceCreateThumbnailAtIndex kullanılması önerilir.

func createLayer(ctx: CGContext, size: CGSize) -> CGLayer? {
    guard let layer = CGLayer(ctx, size: size, auxiliaryInfo: nil) else { return nil }
    let layerCtx = layer.context !

    // bir kez çiz
    layerCtx.setFillColor(UIColor.lightGray.cgColor)
    layerCtx.addEllipse(in: CGRect(origin: .zero, size: size))
    layerCtx.fillPath()
    return layer
}

// draw() içinde kullanım
for i in 0..<20 {
    ctx.draw(layer, at: CGPoint(x: CGFloat(i) * 30, y: 0))
}

Core Graphics ile Kod Örneği

Core Graphics kullanarak bir görüntü üzerinde filigran görüntülemek için özel bir View oluşturalım. Filigran şunları içerir: orijinal görüntünün üzerine yerleştirilmiş yarı saydam metin ve bir vektör logosu. Kod, tek bir bağlamda CGContext, CGImage, metin ve şeffaflıkla çalışmayı gösterir.

class WatermarkView: UIView {

    private let watermarkText = "IT Sectr"
    private let watermarkOpacity: CGFloat = 0.3

    override func draw(_ rect: CGRect) {
        guard let ctx = UIGraphicsGetCurrentContext() else { return }

        // arka plan görüntüsünü çiz
        UIImage(named: "background")?.draw(in: rect)

        // filigran şeffaflığını yapılandır
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // yarı saydam metin
        let attributes: NSAttributedString.Attributes = [
            .font: UIFont.boldSystemFont(ofSize: 48),
            .foregroundColor: UIColor.white.withAlphaComponent(watermarkOpacity)
        ]
        let textSize = watermarkText.size(withAttributes: attributes)
        watermarkText.draw(
            at: CGPoint(x: -textSize.width / 2, y: -textSize.height / 2),
            withAttributes: attributes
        )

        // metnin altında vektör simgesi (çarpı işaretli daire)
        ctx.setStrokeColor(UIColor.white.withAlphaComponent(watermarkOpacity).cgColor)
        ctx.setLineWidth(3)
        ctx.addEllipse(in: CGRect(x: -25, y: -75, width: 50, height: 50))
        ctx.strokePath()
        ctx.moveTo(x: -15, y: -50)
        ctx.addLineTo(x: 15, y: -50)
        ctx.moveTo(x: 0, y: -65)
        ctx.addLineTo(x: 0, y: -35)
        ctx.strokePath()

        ctx.restoreGState()
    }
}

Kod, Core Graphics'ın temel özelliklerini kullanır: filigran efektlerini arka plandan ayırmak için saveGState/restoreGState, konumlandırma ve döndürme için translateBy ve rotate, withAlphaComponent aracılığıyla yarı saydam metin ve addEllipse ve addLineTo aracılığıyla vektör simgesi. Tüm filigran, arka plan görüntüsünden sonra tek bir kompozisyon olarak çizilir.

Üretimde fotoğraflar için filigran oluştururken performansı dikkate almak önemlidir. Görüntü ekrandan büyükse, filigranı uygulamadan önce CGImageSourceCreateThumbnailAtIndex kullanarak küçültün. Core Graphics tüm işlemleri CPU'da halleder — düzinelerce görüntünün toplu işlenmesi için, UI'yı bloke etmekten kaçınmak üzere bir arka plan kuyruğu ve CGBitmapContext kullanın.