CGGradient: gradyan türleri ve oluşturulması

CGGradient Nedir?

CGGradient, Core Graphics'ta bir dizi rengi ve bunları bir gradyan geçişi boyunca karıştırma kurallarını kapsayan değişmez bir nesnedir. Dahili olarak CGGradient, bir CGColor dizisi, [0.0, 1.0] aralığında bir konum (locations) dizisi ve renklerin yorumlandığı CGColorSpace'e bir referans saklar. Her renk, gradyan ölçeğinde bir konumla ilişkilendirilir: konum 0.0 başlangıca, 1.0 geçişin sonuna karşılık gelir.

CGGradientCreateWithColors işlevi aracılığıyla bir CGGradient oluştururken, Core Graphics ara renk değerlerini önceden hesaplar. Bir gradyan, karmaşık çok renkli geçişlere izin veren isteğe bağlı sayıda renk durağı (color stop) içerebilir. Renk sayısı en az iki olmalıdır ve her renk, locations dizisinde bir konuma karşılık gelmelidir.

CGGradient mimarisi, Core Animation'daki CAGradientLayer gibi üst düzey API'lerden, doğrudan Core Graphics bağlamında çalışmasıyla ayrılır. Bu, çizim süreci üzerinde tam kontrol ve gradyanları diğer Quartz 2D işlemleriyle (kırpma maskeleri, gölgeler ve dönüşümler) birleştirme yeteneği sağlar.

Doğrusal ve Radyal Gradyanlar

Core Graphics iki tür gradyanı destekler: doğrusal (eksenel) ve radyal. Doğrusal bir gradyan, CGGradientCreateWithColors işleviyle oluşturulur ve CGContextDrawLinearGradient ile çizilir. Radyal bir gradyan aynı CGGradient yapısını gerektirir ancak CGContextDrawRadialGradient ile çizilir.

Doğrusal Gradyan (Eksenel)

Doğrusal gradyan, renk geçişini başlangıç noktası startPoint'ten bitiş noktası endPoint'e kadar düz bir çizgi boyunca uzatır. Renkler bu iki nokta arasında enterpole edilir ve bunların ötesindeki davranış genişletme seçenekleriyle kontrol edilir. Doğrusal gradyan, pürüzsüz arka planlar oluşturmak, metalik yüzeyleri simüle etmek ve arayüz öğelerinde renk geçişleri için idealdir.

Radyal Gradyan

Radyal gradyan, bir daireden diğerine renk geçişi oluşturur. Her daire bir merkez (startCenter / endCenter) ve bir yarıçap (startRadius / endRadius) ile tanımlanır. Renk, iç daireden dış daireye doğru enterpole edilir. Başlangıç yarıçapının 0 olduğu özel bir durumda, gradyan tek bir noktadan yayılır. Radyal gradyanlar, ışık kaynaklarını, mercekleri, gök cisimlerini ve spot ışığı efektlerini simüle etmek için kullanılır.

CGGradient Oluşturma: Renkler ve Konumlar

CGGradient yalnızca bir temel işlevle oluşturulur — CGGradientCreateWithColors. İşlev, bir CGColorSpace, bir CGColor dizisi (CFArray) ve bir CGFloat locations dizisi alır. Locations NULL ise, renkler gradyan ölçeği boyunca eşit olarak dağıtılır. Locations belirtilmişse, sayıları renk sayısıyla eşleşmelidir.

locations dizisi, her renk için durma noktalarını tanımlayan 0.0 ile 1.0 arasında değerler içerir. Değerler monoton bir şekilde artmalıdır. İlk değer 0.0'dan büyükse, başlangıçtan bu konuma kadar olan renk, 0.0 konumundaki renkten yansıtılır (ekstrapole edilir). Son değer 1.0'dan küçükse benzer şekilde. Bu davranış, çizim sırasında genişletme seçenekleri tarafından kontrol edilir.

Bir gradyan için renkler seçerken, renk uzayını dikkate almak önemlidir. Tek bir CGGradient'teki tüm renkler aynı CGColorSpace'e ait olmalıdır — Core Graphics, bileşenleri bu uzayda enterpole eder. Renkler farklı uzaylarda oluşturulmuşsa, önce CGColorCreateCopyByMatchingToColorSpace ile ortak bir uzaya dönüştürülmeleri gerekir.

Bağlamda Gradyan Çizme

Core Graphics, gradyan çizmek için iki işlev sağlar: doğrusal için CGContextDrawLinearGradient ve radyal için CGContextDrawRadialGradient. Her iki işlev de bir grafik bağlamı, bir CGGradient nesnesi, genişletme seçenekleri ve türe özgü geometrik parametreler alır. Çizim, geçerli kırpma maskesi ve bağlam dönüşümü dikkate alınarak gerçekleştirilir.

Genişletme Seçenekleri (Gradient Options)

Genişletme seçenekleri, gradyanın 0.0–1.0 konum aralığının ötesindeki davranışını kontrol eder. kCGGradientDrawsBeforeStartLocation sabiti, başlangıç konumundan önceki alanı ilk durağın rengiyle doldurur. kCGGradientDrawsAfterEndLocation son durağın rengiyle doldurur. Bu seçenekler bir bit maskesi aracılığıyla birleştirilebilir. Radyal gradyanlar için seçenekler, başlangıç ve bitiş yarıçaplarının ötesindeki alana uygulanır.

Dönüşümlerin Etkisi

Gradyan, geçerli grafik bağlamının koordinat sisteminde, dönüşümü (CTM — Geçerli Dönüşüm Matrisi) dikkate alınarak çizilir. Çizim işlevini çağırmadan önce CGContextTranslateCTM, CGContextScaleCTM veya CGContextRotateCTM uygulamak, gradyanın konumunu ve ölçeğini değiştirir. Bu, yeni nesneler oluşturmadan farklı alanlar için tek bir CGGradient'in yeniden kullanılmasına olanak tanır.

Seçenekler: Genişletme, Yumuşatma ve Maskeleme

Core Graphics, gradyanları kontrol etmek için birkaç ek mekanizma sağlar: kenar yumuşatma (antialiasing), kırpma maskesi (clipping mask) aracılığıyla maskeleme ve saydamlık efektleriyle birleştirme. Kenar yumuşatma, grafik bağlamında varsayılan olarak etkindir ve CGContextSetShouldAntialias aracılığıyla kontrol edilir.

Kırpma maskesi, gradyan çizim alanını isteğe bağlı bir şekille sınırlamaya olanak tanır. CGContextDrawLinearGradient çağırmadan önce, CGContextBeginPath, CGContextAddPath ve CGContextClip aracılığıyla bir yol tanımlanmalıdır. Gradyan yalnızca bu yol tarafından sınırlanan alanın içinde çizilir. Bu, gradyan simgeleri, düğmeler ve ilerleme çubukları oluşturmak için yaygın olarak kullanılır.

Gradyan genişletme bir diğer önemli parametredir. kCGGradientDrawsBeforeStartLocation kullanıldığında, Core Graphics startPoint'ten önceki tüm alan üzerinde ilk durağın rengini yansıtır. Bu seçenek olmadan, gradyanın dışındaki alan doldurulmamış (saydam) kalır. Her iki seçeneğin birleşimi, startPoint ve endPoint içinde olsa bile grafik bağlamının tüm dikdörtgeninin bir gradyanla doldurulmasını sağlar.

Swift Kod Örnekleri

CGGradient ve Core Graphics kullanarak iOS'ta gradyan oluşturma ve çizme ile ilgili pratik örneklere bakalım.

Üç Renkli Doğrusal Gradyan

Bu örnek, üç renk (mavi, yeşil, kırmızı) ile bir doğrusal gradyan oluşturur ve bunu bir UIView'in köşegeni boyunca çizer. Locations dizisi renkleri eşit olmayan şekilde dağıtır: mavi 0.0'dan 0.3'e, yeşil 0.6'da, kırmızı 0.6'dan 1.0'a.

func drawLinearGradient(in ctx: CGContext,
                          rect: CGRect) {
    let colors = [
        UIColor.blue.cgColor,
        UIColor.green.cgColor,
        UIColor.red.cgColor
    ] as CFArray

    let locations: [CGFloat] = [0.0, 0.6, 1.0]
    let space = CGColorSpaceCreateDeviceRGB()

    guard let gradient = CGGradientCreateWithColors(
        space, colors, locations
    ) else { return }

    let start = CGPoint(x: 0, y: 0)
    let end = CGPoint(x: rect.width,
                         y: rect.height)

    ctx.drawLinearGradient(gradient,
        start: start, end: end,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

Parlama Efektli Radyal Gradyan

Bu örnek, bir parlama efektini simüle eden radyal gradyan çizer. Sıfır yarıçaplı başlangıç noktası, parlamanın merkezini tanımlar ve dış daire, solma sınırını tanımlar. Bu efekt, arayüz öğelerini veya etkinlik göstergelerini vurgulamak için kullanılır.

func drawRadialGlow(in ctx: CGContext,
                     center: CGPoint) {
    let colors = [
        UIColor.white.cgColor,
        UIColor.orange.cgColor,
        UIColor.clear.cgColor
    ] as CFArray
    let locations: [CGFloat] = [0.0, 0.4, 1.0]

    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(), colors, locations)

    ctx.drawRadialGradient(gradient,
        startCenter: center, startRadius: 0,
        endCenter: center, endRadius: 100,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

Kırpma Maskeli Gradyan

Bu örnekte, gradyan bir kırpma yolu aracılığıyla dairesel bir alanla sınırlandırılmıştır. Gradyanı çizmeden önce, geçerli bağlam maskesi haline gelen dairesel bir yol tanımlanır. Gradyan yalnızca dairenin içindeki alanı doldurarak bir gradyan simgesi efekti oluşturur.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Creating circular clip path
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Drawing gradient inside clip mask
    let colors = [UIColor.magenta.cgColor,
                    UIColor.cyan.cgColor]
    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(),
        colors as CFArray, nil)

    ctx.drawLinearGradient(gradient,
        start: CGPoint(x: 0, y: 0),
        end: CGPoint(x: rect.width,
                     y: rect.height),
        options: [.drawsBeforeStartLocation])
}