CGGradient: apa itu, jenis gradien dan pembuatannya

Apa itu CGGradient?

CGGradient — adalah objek yang tidak dapat diubah dalam Core Graphics, yang merangkum sekumpulan warna dan aturan pencampurannya di sepanjang transisi gradien. Secara internal, CGGradient menyimpan larik CGColor, larik posisi (locations) dalam rentang [0.0, 1.0], dan referensi ke CGColorSpace tempat warna ditafsirkan. Setiap warna terikat pada posisi pada skala gradien: posisi 0.0 sesuai dengan awal, 1.0 — akhir transisi.

Saat membuat CGGradient melalui fungsi CGGradientCreateWithColors, Core Graphics melakukan pra-komputasi nilai antara warna. Gradien dapat berisi jumlah perhentian warna (color stops) yang sembarang, memungkinkan pembuatan transisi multiwarna yang kompleks. Jumlah warna harus setidaknya dua, dan setiap warna harus memiliki posisi yang sesuai dalam larik locations.

Arsitektur CGGradient berbeda dari API tingkat lebih tinggi seperti CAGradientLayer dari Core Animation karena bekerja langsung dalam konteks grafis Core Graphics. Ini memberikan kontrol penuh atas proses menggambar dan kemampuan untuk menggabungkan gradien dengan operasi Quartz 2D lainnya — masker kliping, bayangan, dan transformasi.

Gradien linear dan radial

Core Graphics mendukung dua jenis gradien: linear (axial) dan radial (radial). Gradien linear dibuat oleh fungsi CGGradientCreateWithColors dan digambar melalui CGContextDrawLinearGradient. Gradien radial memerlukan struktur CGGradient yang sama, tetapi digambar melalui CGContextDrawRadialGradient.

Gradien linear (Axial)

Gradien linear meregangkan transisi warna sepanjang garis lurus dari titik awal startPoint ke titik akhir endPoint. Warna diinterpolasi antara dua titik ini, dan di luar batasnya, perilaku dikendalikan oleh opsi perpanjangan. Gradien linear sangat ideal untuk membuat latar belakang halus, simulasi permukaan logam, dan transisi warna pada elemen antarmuka.

Gradien radial (Radial)

Gradien radial menciptakan transisi warna dari satu lingkaran ke lingkaran lainnya. Setiap lingkaran ditentukan oleh pusat (startCenter / endCenter) dan radius (startRadius / endRadius). Warna diinterpolasi dari lingkaran dalam ke lingkaran luar. Kasus khusus — ketika radius awal adalah 0: gradien menyebar dari satu titik. Gradien radial digunakan untuk simulasi sumber cahaya, lensa, benda langit, dan efek spotlight.

Membuat CGGradient: warna dan posisi

CGGradient hanya dibuat oleh satu fungsi dasar — CGGradientCreateWithColors. Fungsi ini menerima CGColorSpace, larik CGColor (CFArray), dan larik CGFloat locations. Jika locations adalah NULL, warna didistribusikan secara merata di sepanjang skala gradien. Jika locations ditentukan, panjangnya harus sesuai dengan jumlah warna.

Larik locations berisi nilai dari 0.0 hingga 1.0, yang menentukan titik perhentian setiap warna. Nilai harus meningkat secara monoton. Jika nilai pertama lebih besar dari 0.0, warna dari awal hingga posisi ini diekstrapolasi dari warna pada posisi 0.0. Demikian pula untuk nilai terakhir yang kurang dari 1.0. Perilaku ini dikendalikan oleh opsi perpanjangan saat menggambar.

Saat memilih warna untuk gradien, penting untuk mempertimbangkan ruang warna. Semua warna dalam satu CGGradient harus termasuk dalam CGColorSpace yang sama — Core Graphics melakukan interpolasi komponen dalam ruang ini. Jika warna dibuat di ruang yang berbeda, warna tersebut harus dikonversi terlebih dahulu ke ruang yang sama melalui CGColorCreateCopyByMatchingToColorSpace.

Menggambar gradien dalam konteks

Core Graphics menyediakan dua fungsi untuk menggambar gradien: CGContextDrawLinearGradient untuk linear dan CGContextDrawRadialGradient untuk radial. Kedua fungsi menerima konteks grafis, objek CGGradient, opsi perpanjangan, dan parameter geometris spesifik jenis. Penggambaran dilakukan dengan mempertimbangkan masker kliping saat ini (clip) dan transformasi konteks.

Opsi perpanjangan (Gradient Options)

Opsi perpanjangan mengontrol perilaku gradien di luar rentang posisi 0.0–1.0. Konstanta kCGGradientDrawsBeforeStartLocation mengisi area sebelum posisi awal dengan warna perhentian pertama. kCGGradientDrawsAfterEndLocation — dengan warna perhentian terakhir. Opsi ini dapat dikombinasikan melalui masker bit. Untuk gradien radial, opsi diterapkan ke area di luar radius awal dan akhir.

Pengaruh transformasi

Gradien digambar dalam sistem koordinat konteks grafis saat ini dengan mempertimbangkan transformasinya (CTM — Current Transformation Matrix). Penerapan CGContextTranslateCTM, CGContextScaleCTM, atau CGContextRotateCTM sebelum memanggil fungsi menggambar mengubah posisi dan skala gradien. Ini memungkinkan penggunaan kembali satu CGGradient untuk area yang berbeda tanpa membuat objek baru.

Opsi: perpanjangan, anti-aliasing, dan masking

Core Graphics menyediakan beberapa mekanisme tambahan untuk mengelola gradien: anti-aliasing, masking melalui masker kliping (clipping mask), dan kombinasi dengan efek transparansi. Anti-aliasing diaktifkan secara default dalam konteks grafis dan dikendalikan melalui CGContextSetShouldAntialias.

Masker kliping memungkinkan pembatasan area penggambaran gradien ke bentuk sembarang. Sebelum memanggil CGContextDrawLinearGradient, kontur harus ditentukan melalui CGContextBeginPath, CGContextAddPath, dan CGContextClip. Gradien hanya akan digambar di dalam area yang dibatasi oleh kontur ini. Ini banyak digunakan untuk membuat ikon gradien, tombol, dan bilah kemajuan.

Perpanjangan gradien (extend) — parameter penting lainnya. Saat menggunakan kCGGradientDrawsBeforeStartLocation, Core Graphics mengekstrapolasi warna perhentian pertama ke seluruh area hingga startPoint. Tanpa opsi ini, area di luar gradien tetap tidak terisi (transparan). Kombinasi kedua opsi memastikan bahwa seluruh persegi panjang konteks grafis akan diisi dengan gradien, bahkan jika startPoint dan endPoint berada di dalamnya.

Contoh kode dalam Swift

Mari kita lihat contoh praktis pembuatan dan penggambaran gradien di iOS menggunakan CGGradient dan Core Graphics.

Gradien linear dengan tiga warna

Contoh membuat gradien linear dengan tiga warna (biru, hijau, merah) dan menggambarnya secara diagonal di UIView. Larik locations mendistribusikan warna secara tidak merata: biru dari 0.0 hingga 0.3, hijau di 0.6, merah dari 0.6 hingga 1.0.

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])
}

Gradien radial dengan efek cahaya

Contoh menggambar gradien radial yang mensimulasikan cahaya. Titik awal dengan radius nol menentukan pusat cahaya, dan lingkaran luar — batas redaman. Efek semacam itu digunakan untuk penerangan elemen antarmuka atau indikator aktivitas.

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])
}

Gradien dengan masker kliping

Dalam contoh ini, gradien dibatasi ke area melingkar melalui kontur kliping. Sebelum menggambar gradien, jalur melingkar ditentukan yang menjadi masker konteks saat ini. Gradien hanya mengisi area di dalam lingkaran, menciptakan efek ikon gradien.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Membuat jalur kliping melingkar
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Menggambar gradien di dalam masker kliping
    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])
}