Core Graphics — apa itu, prinsip kerja dan framework untuk grafis 2D

Apa itu Core Graphics?

Core Graphics (juga dikenal sebagai Quartz 2D) adalah framework yang mengimplementasikan mesin grafis 2D Apple. Ini didasarkan pada pustaka grafis portabel Quartz dan menggunakan model menggambar berbasis halaman (page-based), di mana setiap tindakan adalah perintah dalam urutan yang menyerupai menggambar di atas kertas. Core Graphics mendukung anti-aliasing, transparansi (alpha compositing) dan ruang warna ICC.

Arsitektur Core Graphics dibangun di sekitar konteks grafis (CGContext), yang mengenkapsulasi perangkat keluaran target — layar, printer, dokumen PDF atau buffer raster. Konteks mengelola pengaturan saat ini: warna, ketebalan garis, transformasi, area kliping dan font. Pendekatan ini memastikan API yang seragam untuk perangkat keluaran yang berbeda tanpa mengubah kode gambar.

Core Graphics bekerja terutama pada CPU, menggunakan model vektor (resolution-independent). Ini berarti garis dan kurva dirasterisasi pada resolusi perangkat saat ini selama rendering. Tidak seperti Metal, Core Graphics tidak memerlukan pengelolaan sumber daya GPU secara eksplisit — sistem mengambil alih semua optimalisasi. Untuk sebagian besar tugas 2D (grafik, diagram, elemen UI kustom), performa Core Graphics cukup untuk mempertahankan 60 FPS.

Arsitektur dan tipe utama

Core Graphics mencakup sekitar 50 tipe dasar (opaque types), masing-masing bertanggung jawab atas fungsionalitas tertentu. Semua tipe mengikuti aturan manajemen memori Core Foundation: dibuat melalui fungsi dengan Create dalam nama, memerlukan panggilan CGRelease, dan tidak kompatibel dengan ARC di Objective-C (namun Swift secara otomatis mengelola memori melalui anotasi CF_RETURNS_RETAINED).

Tipe kunci Core Graphics

CGContext — konteks menggambar, tipe pusat framework. CGPath — kontur vektor yang tidak dapat diubah. CGColor — warna dengan spesifikasi ruang warna. CGGradient — isian gradien. CGImage — gambar raster. CGLayer — buffer offline yang dioptimalkan untuk menggambar berulang. CGDataProvider — sumber data untuk gambar. CGColorSpace — ruang warna (sRGB, Display P3, Gray).

Setiap tipe dirancang untuk overhead minimal: CGPath dapat di-cache dan digunakan kembali di berbagai konteks, CGColor diubah menjadi representasi perangkat keras GPU saat ditransfer, CGLayer menyimpan konten yang telah dirasterisasi sebelumnya. Arsitektur semacam itu memungkinkan Core Graphics bekerja secara efisien baik dalam tugas UI sederhana maupun di editor grafis profesional.

CGPath: kontur vektor dan optimalisasinya

CGPath — objek yang tidak dapat diubah yang menggambarkan urutan segmen geometris: garis lurus, kurva Bézier, busur dan penutupan. Tidak seperti UIBezierPath, CGPath tidak berisi metode menggambar — ia hanya menyimpan geometri. Untuk menggambar, CGPath ditambahkan ke konteks (CGContextAddPath) dan kemudian digambar melalui strokePath atau fillPath. Ketidakberubahan menjamin keamanan thread dan kemungkinan caching.

Membuat dan mengoptimalkan kontur

CGPathCreateMutable membuat jalur yang dapat diubah (CGMutablePathRef) untuk pembangunan bertahap. Setelah perakitan akhir, ia diubah menjadi CGPathRef yang tidak dapat diubah. Apple merekomendasikan untuk meminimalkan jumlah titik di CGPath — kontur yang terlalu kompleks (lebih dari 1000 segmen) memperlambat rasterisasi. Untuk optimalisasi, gunakan CGPathCreateCopyBySimplifyingPath, yang menghapus titik colinear yang berlebihan.

Untuk animasi bentuk antara dua CGPath, Anda dapat menggunakan CABasicAnimation pada properti path dari CAShapeLayer. Batasan: kedua CGPath harus memiliki jumlah segmen yang sama (controls points). Fungsi CGPathApply memungkinkan untuk menelusuri semua elemen jalur dan membandingkan strukturnya. Jika segmen tidak cocok, animasi akan tersendat — dalam hal ini, gunakan CADisplayLink untuk interpolasi manual titik.

// buat jalur yang dapat diubah
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()

// konversi ke tidak dapat diubah untuk caching aman
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

Gradien: CGGradient dan CGShading

CGGradient — objek yang mendefinisikan transisi mulus antara dua atau lebih warna di sepanjang garis lurus (gradien linier) atau dari pusat ke tepi (gradien radial). CGGradient dibuat dengan menentukan ruang warna, array CGColorRef dan array posisi berhenti dari 0.0 hingga 1.0. Setelah dibuat, gradien dapat digunakan beberapa kali di konteks yang berbeda.

CGShading untuk gradien lanjutan

CGShading — mekanisme yang lebih kuat yang memungkinkan pendefinisian fungsi perubahan warna di sepanjang jalur. Tidak seperti CGGradient yang bekerja dengan serangkaian warna tetap, CGShading menggunakan fungsi callback (CGFunctionRef) yang menghitung warna di setiap titik. Ini memungkinkan pembuatan gradien kompleks dengan transisi non-linier dan skema warna gabungan.

Untuk menggambar gradien di dalam bentuk, diperlukan kliping pada kontur bentuk tersebut. Urutan: tambahkan jalur ke konteks, panggil CGContextClip, lalu gambar gradien. Tanpa kliping, gradien mengisi seluruh konteks. Di iOS, disarankan untuk menggunakan CGGradient sebagai opsi yang lebih sederhana dan lebih performan — CGShading hanya dibenarkan untuk fungsi perubahan warna yang tidak standar.

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

Bekerja dengan gambar: CGImage dan CGLayer

CGImage — gambar raster di Core Graphics, yang dapat dimuat dari file, dibuat secara terprogram atau diperoleh dari UIImage. CGImage berisi data piksel, informasi ruang warna, ukuran, kedalaman bit dan tata letak data. Tidak seperti UIImage, CGImage tidak mengelola penskalaan untuk Retina — tanggung jawab ini berada pada pengembang melalui parameter scale.

CGLayer — optimalisasi menggambar berulang

CGLayer — buffer offline untuk rasterisasi awal konten statis. Jika kumpulan perintah grafis yang sama digambar berulang kali (misalnya pola latar belakang), CGLayer merasterisasinya sekali dan kemudian hanya menyalinnya ke konteks. Menurut data Apple, penggunaan CGLayer dapat mempercepat gambar berulang 2–5 kali pada CPU dan hingga 10 kali dengan akselerasi perangkat keras.

Untuk memuat gambar, gunakan CGImageSource — API yang kuat untuk membaca metadata, thumbnail dan bingkai individual dari GIF/APNG. CGImageSource memungkinkan pemuatan gambar secara progresif dan hanya mengambil fragmen yang diperlukan. Saat bekerja dengan gambar besar (melebihi ukuran layar), disarankan untuk membuat CGImageSource dengan opsi caching disk dan menggunakan CGImageSourceCreateThumbnailAtIndex untuk menampilkan versi yang diperkecil.

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

    // gambar sekali
    layerCtx.setFillColor(UIColor.lightGray.cgColor)
    layerCtx.addEllipse(in: CGRect(origin: .zero, size: size))
    layerCtx.fillPath()
    return layer
}

// penggunaan di draw()
for i in 0..<20 {
    ctx.draw(layer, at: CGPoint(x: CGFloat(i) * 30, y: 0))
}

Contoh bekerja dengan Core Graphics

Kami akan mengembangkan View kustom untuk menampilkan tanda air pada gambar menggunakan Core Graphics. Tanda air mencakup teks semi-transparan dan logo vektor yang ditempatkan di atas gambar asli. Kode mendemonstrasikan bekerja dengan CGContext, CGImage, teks dan transparansi dalam satu konteks.

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 }

        // gambar gambar latar belakang
        UIImage(named: "background")?.draw(in: rect)

        // konfigurasi transparansi tanda air
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // teks semi-transparan
        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
        )

        // ikon vektor (lingkaran dengan salib) di bawah teks
        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()
    }
}

Dalam kode, kemampuan kunci Core Graphics digunakan: saveGState/restoreGState untuk mengisolasi efek tanda air dari latar belakang, translateBy dan rotate untuk penentuan posisi dan rotasi, teks semi-transparan melalui withAlphaComponent dan ikon vektor melalui addEllipse dan addLineTo. Seluruh tanda air digambar sebagai satu komposisi setelah gambar latar belakang.

Saat membuat tanda air untuk foto dalam produksi, penting untuk mempertimbangkan performa. Jika gambar lebih besar dari layar, sebelum menerapkan tanda air, perkecil melalui CGImageSourceCreateThumbnailAtIndex. Core Graphics memproses semua operasi di CPU — untuk pemrosesan batch puluhan gambar, gunakan antrian latar belakang dan CGBitmapContext untuk menghindari pemblokiran UI.