Core Graphics — шта је то, принципи рада и фрејмворк за 2D графику

Шта је Core Graphics?

Core Graphics (такође познат као Quartz 2D) је фрејмворк који имплементира 2D графички мотор компаније Apple. Заснован је на преносивој графичкој библиотеци Quartz и користи модел цртања заснован на страници (page-based), где је свака акција команда у секвенци која подсећа на цртање на папиру. Core Graphics подржава антиалиасинг, провидност (alpha compositing) и ICC простор боја.

Архитектура Core Graphics-а изграђена је око графичког контекста (CGContext), који енкапсулира циљни излазни уређај — екран, штампач, PDF документ или растерски бафер. Контекст управља тренутним подешавањима: бојом, дебљином линије, трансформацијом, облашћу одсецања и фонтовима. Овакав приступ обезбеђује уједначен API за различите излазне уређаје без промене кода за цртање.

Core Graphics ради претежно на CPU-у, користећи векторски модел (resolution-independent). То значи да се линије и криве растеризују тренутном резолуцијом уређаја приликом рендеровања. За разлику од Metal-а, Core Graphics не захтева експлицитно управљање GPU ресурсима — систем преузима сву оптимизацију. За већину 2D задатака (графика, дијаграми, прилагођени UI елементи), перформансе Core Graphics-а су довољне за одржавање 60 FPS.

Архитектура и основни типови

Core Graphics укључује око 50 основних типова (opaque types), од којих је сваки одговоран за одређену функционалност. Сви типови следе правила управљања меморијом Core Foundation-а: креирају се кроз функције са Create у називу, захтевају позив CGRelease и нису ARC-компатибилни у Objective-C-у (међутим Swift аутоматски управља меморијом кроз анотације CF_RETURNS_RETAINED).

Кључни типови Core Graphics-а

CGContext — контекст цртања, централни тип фрејмворка. CGPath — непроменљиви векторски контур. CGColor — боја са наведеним простором боја. CGGradient — градијентно попуњавање. CGImage — растерска слика. CGLayer — оптимизовани офлајн бафер за понављајуће цртање. CGDataProvider — извор података за слике. CGColorSpace — простор боја (sRGB, Display P3, Gray).

Сваки тип је дизајниран за минимални оверхед: CGPath може бити кеширан и поново коришћен између различитих контекста, CGColor се претвара у хардверску репрезентацију GPU-а приликом преноса, CGLayer чува претходно растеризовани садржај. Оваква архитектура омогућава Core Graphics-у да ефикасно ради како у једноставним UI задацима, тако и у професионалним графичким едиторима.

CGPath: векторски контури и њихова оптимизација

CGPath — непроменљиви објекат који описује секвенцу геометријских сегмената: правих линија, Безијеових кривих, лукова и затварања. За разлику од UIBezierPath-а, CGPath не садржи методе цртања — он само чува геометрију. За цртање, CGPath се додаје у контекст (CGContextAddPath) и затим црта кроз strokePath или fillPath. Непроменљивост гарантује безбедност нити и могућност кеширања.

Креирање и оптимизација контура

CGPathCreateMutable креира променљиву путању (CGMutablePathRef) за фазну изградњу. Након завршног склапања, претвара се у непроменљиви CGPathRef. Apple препоручује минимизирање броја тачака у CGPath-у — превише сложени контури (више од 1000 сегмената) успоравају растеризацију. За оптимизацију користите CGPathCreateCopyBySimplifyingPath, који уклања сувишне колинеарне тачке.

За анимацију облика између два CGPath-а можете користити CABasicAnimation на својству path CAShapeLayer-а. Ограничење: оба CGPath морају имати исти број сегмената (controls points). Функција CGPathApply омогућава пролазак кроз све елементе путање и поређење њихове структуре. Ако се сегменти не поклапају, анимација ће бити трзава — у овом случају користите CADisplayLink за ручну интерполацију тачака.

// креирај променљиву путању
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()

// конвертуј у непроменљиву за безбедно кеширање
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

Градијенти: CGGradient и CGShading

CGGradient — објекат који дефинише глатки прелаз између две или више боја дуж праве линије (линеарни градијент) или од центра ка ивицама (радијални градијент). CGGradient се креира уз навођење простора боја, низа CGColorRef и низа позиција заустављања од 0.0 до 1.0. Након креирања, градијент се може вишеструко користити у различитим контекстима.

CGShading за напредне градијенте

CGShading — моћнији механизам који омогућава дефинисање функције промене боје дуж путање. За разлику од CGGradient-а који ради са фиксним сетом боја, CGShading користи callback функцију (CGFunctionRef) која израчунава боју у свакој тачки. Ово омогућава креирање сложених градијената са нелинеарним прелазима и сложеним шемама боја.

За цртање градијента унутар фигуре потребан је клип (clip) на контур те фигуре. Редослед: додајте путању у контекст, позовите CGContextClip, затим нацртајте градијент. Без клипа, градијент попуњава цео контекст. У iOS-у се препоручује коришћење CGGradient-а као једноставније и перформантније опције — CGShading је оправдан само за нестандардне функције промене боје.

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

Рад са сликама: CGImage и CGLayer

CGImage — растерска слика у Core Graphics-у, која се може учитати из датотеке, креирати програмски или добити из UIImage-а. CGImage садржи пиксел податке, информације о простору боја, величини, дубини бита и распореду података. За разлику од UIImage-а, CGImage не управља скалирањем за Retina — ову одговорност преузима програмер кроз параметар scale.

CGLayer — оптимизација понављајућег цртања

CGLayer — офлајн бафер за претходну растеризацију статичког садржаја. Ако се исти скуп графичких команди црта више пута (нпр. шара позадине), CGLayer га растеризује једном и затим једноставно копира у контекст. Према Apple подацима, коришћење CGLayer-а може убрзати понављајуће цртање 2–5 пута на CPU-у и до 10 пута са хардверским убрзањем.

За учитавање слика користите CGImageSource — моћан API за читање метаподатака, минијатура и појединачних оквира из GIF/APNG-а. CGImageSource омогућава прогресивно учитавање слике и добијање само потребних фрагмената. При раду са великим сликама (које премашују величину екрана) препоручује се креирање CGImageSource-а са опцијом кеширања на диску и коришћење CGImageSourceCreateThumbnailAtIndex за приказ умањене верзије.

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

    // цртај једном
    layerCtx.setFillColor(UIColor.lightGray.cgColor)
    layerCtx.addEllipse(in: CGRect(origin: .zero, size: size))
    layerCtx.fillPath()
    return layer
}

// употреба у draw()
for i in 0..<20 {
    ctx.draw(layer, at: CGPoint(x: CGFloat(i) * 30, y: 0))
}

Пример рада са Core Graphics

Развићемо прилагођени View за приказ воденог жига на слици користећи Core Graphics. Водени жиг укључује полупровидан текст и векторски лого постављени преко оригиналне слике. Код демонстрира рад са CGContext, CGImage, текстом и провидношћу у једном контексту.

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 }

        // цртај позадинску слику
        UIImage(named: "background")?.draw(in: rect)

        // конфигуриши провидност воденог жига
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // полупровидан текст
        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
        )

        // векторска икона (круг са крстом) испод текста
        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()
    }
}

У коду су коришћене кључне могућности Core Graphics-а: saveGState/restoreGState за изолацију ефеката воденог жига од позадине, translateBy и rotate за позиционирање и ротацију, полупровидан текст кроз withAlphaComponent и векторска икона кроз addEllipse и addLineTo. Цео водени жиг се црта као једна композиција након позадинске слике.

При креирању водених жигова за фотографије у продукцији важно је узети у обзир перформансе. Ако је слика већа од екрана, пре наношења воденог жига смањите је кроз CGImageSourceCreateThumbnailAtIndex. Core Graphics обрађује све операције на CPU-у — за серијску обраду десетина слика користите позадински ред и CGBitmapContext да бисте избегли блокирање UI-ја.