Core Graphics — ano ito, mga prinsipyo ng paggana at framework para sa 2D graphics

Ano ang Core Graphics?

Core Graphics (kilala rin bilang Quartz 2D) ay isang framework na nagpapatupad ng 2D graphics engine ng Apple. Ito ay batay sa portable graphics library na Quartz at gumagamit ng page-based drawing model, kung saan ang bawat aksyon ay isang utos sa isang pagkakasunod-sunod na kahawig ng pagguhit sa papel. Sinusuportahan ng Core Graphics ang anti-aliasing, transparency (alpha compositing) at ICC color spaces.

Ang arkitektura ng Core Graphics ay binuo sa paligid ng graphics context (CGContext), na nagnecapsulate ng target na output device — screen, printer, PDF document o raster buffer. Pinamamahalaan ng konteksto ang kasalukuyang mga setting: kulay, kapal ng linya, pagbabago, lugar ng pag-clip at mga font. Ang ganitong approach ay nagsisiguro ng pare-parehong API para sa iba't ibang output device nang hindi binabago ang drawing code.

Ang Core Graphics ay pangunahing gumagana sa CPU, gamit ang vector model (resolution-independent). Nangangahulugan ito na ang mga linya at kurba ay nirarasterize sa kasalukuyang resolution ng device sa panahon ng rendering. Hindi tulad ng Metal, ang Core Graphics ay hindi nangangailangan ng malinaw na pamamahala ng mga GPU resources — ang system ang pumapangalawa sa lahat ng pag-optimize. Para sa karamihan ng 2D na gawain (graphics, diagram, custom UI elements), ang performance ng Core Graphics ay sapat upang mapanatili ang 60 FPS.

Arkitektura at mga pangunahing uri

Core Graphics ay may kasamang humigit-kumulang 50 batayang uri (opaque types), bawat isa ay responsable para sa isang partikular na functionality. Lahat ng uri ay sumusunod sa mga patakaran ng pamamahala ng memorya ng Core Foundation: nilikha sa pamamagitan ng mga function na may Create sa pangalan, nangangailangan ng pagtawag sa CGRelease, at hindi ARC-compatible sa Objective-C (gayunpaman, awtomatikong pinamamahalaan ng Swift ang memorya sa pamamagitan ng mga anotasyon ng CF_RETURNS_RETAINED).

Mga pangunahing uri ng Core Graphics

CGContext — konteksto ng pagguhit, sentral na uri ng framework. CGPath — hindi nababagong vector contour. CGColor — kulay na may specipikasyon ng espasyo ng kulay. CGGradient — gradient fill. CGImage — raster na imahe. CGLayer — na-optimize na offline buffer para sa paulit-ulit na pagguhit. CGDataProvider — pinagmulan ng data para sa mga imahe. CGColorSpace — espasyo ng kulay (sRGB, Display P3, Gray).

Ang bawat uri ay idinisenyo para sa minimal na overhead: ang CGPath ay maaaring i-cache at magamit muli sa pagitan ng iba't ibang konteksto, ang CGColor ay na-convert sa hardware representation ng GPU kapag inilipat, ang CGLayer ay nag-iimbak ng pre-rasterized na nilalaman. Ang ganitong arkitektura ay nagpapahintulot sa Core Graphics na gumana nang mahusay kapwa sa mga simpleng UI gawain at sa mga propesyonal na graphics editor.

CGPath: vector contour at ang kanilang pag-optimize

CGPath — hindi nababagong bagay na naglalarawan ng pagkakasunod-sunod ng mga geometric segment: tuwid na linya, Bézier curves, arko at pagsasara. Hindi tulad ng UIBezierPath, ang CGPath ay hindi naglalaman ng mga drawing method — ito ay nag-iimbak lamang ng geometry. Para sa pagguhit, ang CGPath ay idinagdag sa konteksto (CGContextAddPath) at pagkatapos ay iguguhit sa pamamagitan ng strokePath o fillPath. Ang hindi pagbabago ay garantiya ng kaligtasan ng thread at posibilidad ng caching.

Paglikha at pag-optimize ng mga contour

CGPathCreateMutable ay lumilikha ng nababagong path (CGMutablePathRef) para sa unti-unting pagbuo. Pagkatapos ng huling pag-assemble, ito ay na-convert sa hindi nababagong CGPathRef. Inirerekomenda ng Apple na bawasan ang bilang ng mga punto sa CGPath — ang sobrang kumplikadong contour (higit sa 1000 segment) ay nagpapabagal sa rasterization. Para sa pag-optimize, gamitin ang CGPathCreateCopyBySimplifyingPath, na nag-aalis ng mga redundant na collinear point.

Para sa animation ng hugis sa pagitan ng dalawang CGPath, maaari mong gamitin ang CABasicAnimation sa property na path ng CAShapeLayer. Limitasyon: ang parehong CGPath ay dapat magkaroon ng parehong bilang ng mga segment (controls points). Ang function na CGPathApply ay nagpapahintulot na lakbayin ang lahat ng elemento ng path at ihambing ang kanilang istraktura. Kung hindi tugma ang mga segment, ang animation ay kakalog — sa kasong ito, gamitin ang CADisplayLink para sa manu-manong interpolation ng mga punto.

// lumikha ng nababagong path
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()

// convert sa hindi nababago para sa ligtas na caching
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

Gradient: CGGradient at CGShading

CGGradient — bagay na tumutukoy ng maayos na transition sa pagitan ng dalawa o higit pang kulay sa kahabaan ng isang tuwid na linya (linear gradient) o mula sa gitna patungo sa mga gilid (radial gradient). Ang CGGradient ay nilikha na may specipikasyon ng espasyo ng kulay, array ng CGColorRef at array ng mga stop position mula 0.0 hanggang 1.0. Pagkatapos malikha, ang gradient ay maaaring gamitin nang maraming beses sa iba't ibang konteksto.

CGShading para sa mga advanced na gradient

CGShading — mas malakas na mekanismo na nagpapahintulot sa pagtukoy ng function ng pagbabago ng kulay sa kahabaan ng path. Hindi tulad ng CGGradient na gumagana sa isang nakapirming set ng mga kulay, ang CGShading ay gumagamit ng callback function (CGFunctionRef) na kumukwenta ng kulay sa bawat punto. Ito ay nagpapahintulot sa paglikha ng mga kumplikadong gradient na may non-linear transition at compound color scheme.

Para sa pagguhit ng gradient sa loob ng isang hugis, kinakailangan ang clip sa contour ng hugis na iyon. Order: idagdag ang path sa konteksto, tawagan ang CGContextClip, pagkatapos ay iguhit ang gradient. Kung walang clip, pinupuno ng gradient ang buong konteksto. Sa iOS, inirerekomenda na gamitin ang CGGradient bilang mas simple at mas performant na opsyon — ang CGShading ay makatwiran lamang para sa hindi karaniwang mga function ng pagbabago ng kulay.

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

Pagtatrabaho sa mga imahe: CGImage at CGLayer

CGImage — raster na imahe sa Core Graphics, na maaaring i-load mula sa file, likhain nang programmatically o makuha mula sa UIImage. Ang CGImage ay naglalaman ng pixel data, impormasyon tungkol sa espasyo ng kulay, laki, bit depth at layout ng data. Hindi tulad ng UIImage, ang CGImage ay hindi namamahala ng scaling para sa Retina — ang responsibilidad na ito ay nasa developer sa pamamagitan ng parameter na scale.

CGLayer — pag-optimize ng paulit-ulit na pagguhit

CGLayer — offline buffer para sa pre-rasterization ng static na nilalaman. Kung ang parehong set ng mga graphics command ay iguguhit nang paulit-ulit (halimbawa, pattern ng background), irarasterize ito ng CGLayer nang isang beses at pagkatapos ay kokopyahin lamang sa konteksto. Ayon sa data ng Apple, ang paggamit ng CGLayer ay maaaring mapabilis ang paulit-ulit na pagguhit ng 2–5 beses sa CPU at hanggang 10 beses na may hardware acceleration.

Para sa pag-load ng mga imahe, gamitin ang CGImageSource — malakas na API para sa pagbabasa ng metadata, thumbnail at indibidwal na frame mula sa GIF/APNG. Ang CGImageSource ay nagpapahintulot ng progresibong pag-load ng imahe at pagkuha lamang ng mga kinakailangang fragment. Kapag nagtatrabaho sa malalaking imahe (lampas sa laki ng screen), inirerekomenda na lumikha ng CGImageSource na may opsyon sa disk caching at gamitin ang CGImageSourceCreateThumbnailAtIndex para sa pagpapakita ng pinababang bersyon.

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

    // gumuhit nang isang beses
    layerCtx.setFillColor(UIColor.lightGray.cgColor)
    layerCtx.addEllipse(in: CGRect(origin: .zero, size: size))
    layerCtx.fillPath()
    return layer
}

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

Halimbawa ng pagtatrabaho sa Core Graphics

Gagawa kami ng custom na View para sa pagpapakita ng watermark sa isang imahe gamit ang Core Graphics. Ang watermark ay may kasamang semi-transparent na teksto at vector logo na nakapatong sa orihinal na imahe. Ang code ay nagpapakita ng pagtatrabaho sa CGContext, CGImage, teksto at transparency sa isang konteksto.

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 }

        // gumuhit ng background na imahe
        UIImage(named: "background")?.draw(in: rect)

        // i-configure ang transparency ng watermark
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // semi-transparent na teksto
        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
        )

        // vector icon (bilog na may krus) sa ilalim ng teksto
        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()
    }
}

Sa code, ginamit ang mga pangunahing kakayahan ng Core Graphics: saveGState/restoreGState para sa paghihiwalay ng mga epekto ng watermark mula sa background, translateBy at rotate para sa pagpoposisyon at pag-ikot, semi-transparent na teksto sa pamamagitan ng withAlphaComponent at vector icon sa pamamagitan ng addEllipse at addLineTo. Ang buong watermark ay iguguhit bilang isang komposisyon pagkatapos ng background na imahe.

Sa paggawa ng mga watermark para sa mga larawan sa produksyon, mahalagang isaalang-alang ang performance. Kung ang imahe ay mas malaki kaysa sa screen, bago ilapat ang watermark, paliitin ito sa pamamagitan ng CGImageSourceCreateThumbnailAtIndex. Ang Core Graphics ay nagpoproseso ng lahat ng operasyon sa CPU — para sa batch processing ng dose-dosenang mga imahe, gumamit ng background queue at CGBitmapContext upang maiwasan ang pag-block ng UI.