Core Graphics — co to je, principy fungování a framework pro 2D grafiku

Co je Core Graphics?

Core Graphics (také známý jako Quartz 2D) je framework implementující 2D grafický engine Apple. Je založen na přenosné grafické knihovně Quartz a používá model kreslení založený na stránce (page-based), kde každá akce je příkaz v sekvenci připomínající kreslení na papír. Core Graphics podporuje anti-aliasing, průhlednost (alpha compositing) a ICC barevné prostory.

Architektura Core Graphics je postavena kolem grafického kontextu (CGContext), který zapouzdřuje cílové výstupní zařízení — obrazovku, tiskárnu, PDF dokument nebo rastrový buffer. Kontext spravuje aktuální nastavení: barvu, tloušťku čáry, transformaci, ořezovou oblast a fonty. Tento přístup zajišťuje jednotné API pro různá výstupní zařízení bez změny kódu kreslení.

Core Graphics pracuje převážně na CPU, využívá vektorový model (resolution-independent). To znamená, že čáry a křivky jsou rasterizovány s aktuálním rozlišením zařízení při vykreslování. Na rozdíl od Metalu, Core Graphics nevyžaduje explicitní správu GPU zdrojů — veškerou optimalizaci přebírá systém. Pro většinu 2D úloh (grafika, diagramy, vlastní UI prvky) je výkon Core Graphics dostačující pro udržení 60 FPS.

Architektura a hlavní typy

Core Graphics zahrnuje přibližně 50 základních typů (opaque types), z nichž každý je zodpovědný za určitou funkcionalitu. Všechny typy dodržují pravidla správy paměti Core Foundation: vytvářejí se pomocí funkcí s Create v názvu, vyžadují volání CGRelease a nejsou ARC-kompatibilní v Objective-C (nicméně Swift automaticky spravuje paměť pomocí anotací CF_RETURNS_RETAINED).

Klíčové typy Core Graphics

CGContext — kontext kreslení, centrální typ frameworku. CGPath — neměnný vektorový obrys. CGColor — barva s určením barevného prostoru. CGGradient — přechodová výplň. CGImage — rastrový obrázek. CGLayer — optimalizovaný offline buffer pro opakované kreslení. CGDataProvider — zdroj dat pro obrázky. CGColorSpace — barevný prostor (sRGB, Display P3, Gray).

Každý typ je navržen pro minimální režii: CGPath může být ukládán do mezipaměti a znovu používán mezi různými kontexty, CGColor se při přenosu převádí do hardwarové reprezentace GPU, CGLayer ukládá předem rasterizovaný obsah. Taková architektura umožňuje Core Graphics efektivně pracovat jak v jednoduchých UI úlohách, tak v profesionálních grafických editorech.

CGPath: vektorové obrysy a jejich optimalizace

CGPath — neměnný objekt popisující sekvenci geometrických segmentů: přímek, Bézierových křivek, oblouků a uzavření. Na rozdíl od UIBezierPath, CGPath neobsahuje metody kreslení — ukládá pouze geometrii. Pro kreslení se CGPath přidá do kontextu (CGContextAddPath) a poté se kreslí pomocí strokePath nebo fillPath. Neměnnost zaručuje bezpečnost vláken a možnost ukládání do mezipaměti.

Vytváření a optimalizace obrysů

CGPathCreateMutable vytváří měnitelnou cestu (CGMutablePathRef) pro postupnou stavbu. Po konečném sestavení se přemění na neměnný CGPathRef. Apple doporučuje minimalizovat počet bodů v CGPath — příliš složité obrysy (více než 1000 segmentů) zpomalují rasterizaci. Pro optimalizaci použijte CGPathCreateCopyBySimplifyingPath, který odstraňuje nadbytečné kolineární body.

Pro animaci tvaru mezi dvěma CGPath lze použít CABasicAnimation na vlastnosti path CAShapeLayer. Omezení: oba CGPath musí mít stejný počet segmentů (controls points). Funkce CGPathApply umožňuje projít všechny prvky cesty a porovnat jejich strukturu. Pokud segmenty nesouhlasí, animace bude trhavá — v tomto případě použijte CADisplayLink pro ruční interpolaci bodů.

// vytvoř měnitelnou cestu
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()

// převeď na neměnnou pro bezpečné ukládání do mezipaměti
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

Přechody: CGGradient a CGShading

CGGradient — objekt definující plynulý přechod mezi dvěma nebo více barvami podél přímky (lineární přechod) nebo od středu k okrajům (radiální přechod). CGGradient se vytváří s určením barevného prostoru, pole CGColorRef a pole pozic zastavení od 0.0 do 1.0. Po vytvoření lze přechod opakovaně používat v různých kontextech.

CGShading pro pokročilé přechody

CGShading — výkonnější mechanismus umožňující definovat funkci změny barvy podél cesty. Na rozdíl od CGGradient, který pracuje s pevnou sadou barev, CGShading používá callback funkci (CGFunctionRef) vypočítávající barvu v každém bodě. To umožňuje vytvářet složité přechody s nelineárními přechody a složitými barevnými schématy.

Pro kreslení přechodu uvnitř obrazce je nutný clip na obrys tohoto obrazce. Pořadí: přidejte cestu do kontextu, zavolejte CGContextClip, poté nakreslete přechod. Bez clipu přechod vyplní celý kontext. V iOS se doporučuje používat CGGradient jako jednodušší a výkonnější variantu — CGShading je ospravedlnitelný pouze pro nestandardní funkce změny barvy.

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

Práce s obrázky: CGImage a CGLayer

CGImage — rastrový obrázek v Core Graphics, který lze načíst ze souboru, vytvořit programově nebo získat z UIImage. CGImage obsahuje pixelová data, informace o barevném prostoru, velikosti, bitové hloubce a uspořádání dat. Na rozdíl od UIImage, CGImage nespravuje škálování pro Retina — tuto odpovědnost přebírá vývojář prostřednictvím parametru scale.

CGLayer — optimalizace opakovaného kreslení

CGLayer — offline buffer pro předběžnou rasterizaci statického obsahu. Pokud se stejná sada grafických příkazů kreslí opakovaně (např. vzor pozadí), CGLayer jej rasterizuje jednou a poté jednoduše kopíruje do kontextu. Podle údajů Apple může použití CGLayer urychlit opakované kreslení 2–5krát na CPU a až 10krát s hardwarovou akcelerací.

Pro načítání obrázků používejte CGImageSource — výkonné API pro čtení metadat, miniatur a jednotlivých snímků z GIF/APNG. CGImageSource umožňuje progresivní načítání obrázku a získání pouze potřebných fragmentů. Při práci s velkými obrázky (přesahujícími velikost obrazovky) se doporučuje vytvořit CGImageSource s možností ukládání do mezipaměti na disku a použít CGImageSourceCreateThumbnailAtIndex pro zobrazení zmenšené verze.

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

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

// použití v draw()
for i in 0..<20 {
    ctx.draw(layer, at: CGPoint(x: CGFloat(i) * 30, y: 0))
}

Příklad práce s Core Graphics

Vyvineme vlastní View pro zobrazení vodoznaku na obrázku pomocí Core Graphics. Vodoznak obsahuje poloprůhledný text a vektorové logo umístěné přes původní obrázek. Kód demonstruje práci s CGContext, CGImage, textem a průhledností v jednom kontextu.

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 }

        // kresli obrázek pozadí
        UIImage(named: "background")?.draw(in: rect)

        // nakonfiguruj průhlednost vodoznaku
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // poloprůhledný text
        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
        )

        // vektorová ikona (kruh s křížem) pod textem
        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()
    }
}

V kódu jsou použity klíčové možnosti Core Graphics: saveGState/restoreGState pro izolaci efektů vodoznaku od pozadí, translateBy a rotate pro pozicování a rotaci, poloprůhledný text přes withAlphaComponent a vektorová ikona přes addEllipse a addLineTo. Celý vodoznak je kreslen jako jedna kompozice po obrázku pozadí.

Při vytváření vodoznaků pro fotografie v produkci je důležité zohlednit výkon. Pokud je obrázek větší než obrazovka, před aplikací vodoznaku jej zmenšete pomocí CGImageSourceCreateThumbnailAtIndex. Core Graphics zpracovává všechny operace na CPU — pro dávkové zpracování desítek obrázků používejte frontu na pozadí a CGBitmapContext, abyste předešli blokování UI.