Core Graphics — mi ez, működési elvek és keretrendszer 2D grafikához

Mi az a Core Graphics?

Core Graphics (más néven Quartz 2D) egy keretrendszer, amely az Apple 2D grafikus motorját valósítja meg. A hordozható Quartz grafikus könyvtáron alapul, és oldal alapú rajzolási modellt (page-based) használ, ahol minden művelet egy parancs egy sorozatban, amely a papírra rajzolásra emlékeztet. A Core Graphics támogatja az anti-aliasingot, az átlátszóságot (alpha compositing) és az ICC színtereket.

A Core Graphics architektúrája a grafikus kontextus (CGContext) köré épül, amely beágyazza a célkimeneti eszközt — képernyő, nyomtató, PDF dokumentum vagy raszteres puffer. A kontextus kezeli az aktuális beállításokat: szín, vonalvastagság, transzformáció, vágási terület és betűtípusok. Ez a megközelítés egységes API-t biztosít a különböző kimeneti eszközökhöz a rajzolási kód megváltoztatása nélkül.

A Core Graphics főként a CPU-n működik, vektoros modellt (resolution-independent) használva. Ez azt jelenti, hogy a vonalak és görbék a megjelenítés során az eszköz aktuális felbontásával raszterizálódnak. Ellentétben a Metal-lel, a Core Graphics nem igényel explicit GPU-erőforrás kezelést — a rendszer átvesz minden optimalizálást. A legtöbb 2D feladathoz (grafika, diagramok, egyedi UI elemek) a Core Graphics teljesítménye elegendő a 60 FPS fenntartásához.

Architektúra és fő típusok

Core Graphics körülbelül 50 alapvető típust (opaque types) tartalmaz, amelyek mindegyike egy adott funkcióért felelős. Minden típus követi a Core Foundation memóriakezelési szabályait: Create nevű függvényekkel jön létre, CGRelease hívást igényel, és nem ARC-kompatibilis Objective-C-ben (bár a Swift automatikusan kezeli a memóriát CF_RETURNS_RETAINED annotációkon keresztül).

A Core Graphics kulcsfontosságú típusai

CGContext — rajzolási kontextus, a keretrendszer központi típusa. CGPath — megváltoztathatatlan vektoros kontúr. CGColor — szín a színtér megadásával. CGGradient — gradiens kitöltés. CGImage — raszteres kép. CGLayer — optimalizált offline puffer ismétlődő rajzoláshoz. CGDataProvider — adatforrás képekhez. CGColorSpace — színtér (sRGB, Display P3, Gray).

Minden típus minimális többletterhelésre tervezett: a CGPath gyorsítótárazható és újrafelhasználható különböző kontextusok között, a CGColor átvitelkor a GPU hardveres reprezentációjává alakul, a CGLayer előre raszterizált tartalmat tárol. Ez az architektúra lehetővé teszi a Core Graphics számára, hogy hatékonyan működjön mind egyszerű UI feladatokban, mind professzionális grafikus szerkesztőkben.

CGPath: vektoros kontúrok és optimalizálásuk

CGPath — egy megváltoztathatatlan objektum, amely geometriai szegmensek sorozatát írja le: egyenes vonalak, Bézier-görbék, ívek és zárások. Ellentétben az UIBezierPath-vel, a CGPath nem tartalmaz rajzolási metódusokat — csak a geometriát tárolja. Rajzoláshoz a CGPath hozzáadásra kerül a kontextushoz (CGContextAddPath), majd a strokePath vagy fillPath segítségével rajzolódik ki. A megváltoztathatatlanság garantálja a szálbiztonságot és a gyorsítótárazási lehetőséget.

Kontúrok létrehozása és optimalizálása

CGPathCreateMutable létrehoz egy változtatható útvonalat (CGMutablePathRef) a szakaszos felépítéshez. A végső összeállítás után megváltoztathatatlan CGPathRef-é alakul. Az Apple javasolja a pontok számának minimalizálását a CGPath-ben — a túl bonyolult kontúrok (több mint 1000 szegmens) lassítják a raszterizálást. Optimalizáláshoz használja a CGPathCreateCopyBySimplifyingPath függvényt, amely eltávolítja a felesleges kollineáris pontokat.

Két CGPath közötti alakzat animációhoz használhatja a CABasicAnimation-t a CAShapeLayer path tulajdonságán. Korlátozás: mindkét CGPath-nek azonos számú szegmenssel kell rendelkeznie (controls points). A CGPathApply függvény lehetővé teszi az útvonal összes elemének bejárását és szerkezetük összehasonlítását. Ha a szegmensek nem egyeznek, az animáció szaggatott lesz — ebben az esetben használja a CADisplayLink-et a pontok manuális interpolációjához.

// változtatható útvonal létrehozása
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()

// átalakítás megváltoztathatatlanná biztonságos gyorsítótárazáshoz
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

Gradiensek: CGGradient és CGShading

CGGradient — egy objektum, amely sima átmenetet definiál két vagy több szín között egy egyenes mentén (lineáris gradiens) vagy a középponttól a szélek felé (radiális gradiens). A CGGradient a színtér, egy CGColorRef tömb és egy 0.0-tól 1.0-ig tartó megállási pozíció tömb megadásával jön létre. Létrehozás után a gradiens többször használható különböző kontextusokban.

CGShading fejlett gradiensekhez

CGShading — egy erősebb mechanizmus, amely lehetővé teszi a színváltozási függvény meghatározását egy útvonal mentén. Ellentétben a CGGradient-tel, amely fix színkészlettel dolgozik, a CGShading egy visszahívási függvényt (CGFunctionRef) használ, amely minden pontban kiszámítja a színt. Ez lehetővé teszi összetett gradiensek létrehozását nemlineáris átmenetekkel és összetett színsémákkal.

A gradiens rajzolásához egy alakzaton belül clip szükséges az alakzat kontúrján. Sorrend: adja hozzá az útvonalat a kontextushoz, hívja meg a CGContextClip-et, majd rajzolja ki a gradienst. Clip nélkül a gradiens kitölti a teljes kontextust. iOS-ben ajánlott a CGGradient használata egyszerűbb és hatékonyabb lehetőségként — a CGShading csak nem szabványos színváltozási függvények esetén indokolt.

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

Képek kezelése: CGImage és CGLayer

CGImage — raszteres kép a Core Graphics-ban, amely betölthető fájlból, programozottan létrehozható vagy UIImage-ből nyerhető. A CGImage pixeleket, színtér-információt, méretet, bitmélységet és adatelrendezést tartalmaz. Ellentétben az UIImage-lel, a CGImage nem kezeli a Retina méretezést — ezt a felelősséget a fejlesztő veszi át a scale paraméteren keresztül.

CGLayer — ismétlődő rajzolás optimalizálása

CGLayer — offline puffer statikus tartalom előzetes raszterizálásához. Ha ugyanaz a grafikus parancskészlet többször rajzolódik ki (pl. háttérminta), a CGLayer egyszer raszterizálja, majd egyszerűen bemásolja a kontextusba. Az Apple adatai szerint a CGLayer használata 2–5-szörösére gyorsíthatja az ismétlődő rajzolást CPU-n és akár 10-szeresére hardveres gyorsítással.

Képek betöltéséhez használja a CGImageSource-t — egy hatékony API-t metaadatok, miniatűrök és egyes képkockák olvasásához GIF/APNG formátumból. A CGImageSource lehetővé teszi a kép progresszív betöltését és csak a szükséges részek lekérését. Nagy képekkel (képernyőméretet meghaladó) való munka során ajánlott lemezgyorsítótárazási opcióval rendelkező CGImageSource létrehozása és a CGImageSourceCreateThumbnailAtIndex használata a kicsinyített változat megjelenítéséhez.

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

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

// használat a draw()-ban
for i in 0..<20 {
    ctx.draw(layer, at: CGPoint(x: CGFloat(i) * 30, y: 0))
}

Példa Core Graphics használatra

Kifejlesztünk egy egyedi View-t vízjel megjelenítéséhez egy képen Core Graphics segítségével. A vízjel tartalmaz félig átlátszó szöveget és vektoros logót, amely az eredeti kép fölé kerül. A kód bemutatja a CGContext, CGImage, szöveg és átlátszóság kezelését egy kontextusban.

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 }

        // háttérkép rajzolása
        UIImage(named: "background")?.draw(in: rect)

        // vízjel átlátszóságának beállítása
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // félig átlátszó szöveg
        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
        )

        // vektoros ikon (kör kereszttel) a szöveg alatt
        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()
    }
}

A kódban a Core Graphics kulcsfontosságú képességei kerülnek felhasználásra: saveGState/restoreGState a vízjel hatásainak elkülönítésére a háttértől, translateBy és rotate a pozicionáláshoz és forgatáshoz, félig átlátszó szöveg a withAlphaComponent segítségével és vektoros ikon az addEllipse és addLineThrough használatával. Az egész vízjel egyetlen kompozícióként rajzolódik ki a háttérkép után.

A vízjelek készítésekor fotókhoz éles környezetben fontos figyelembe venni a teljesítményt. Ha a kép nagyobb, mint a képernyő, a vízjel alkalmazása előtt kicsinyítse le a CGImageSourceCreateThumbnailAtIndex segítségével. A Core Graphics minden műveletet a CPU-n dolgoz fel — tucatnyi kép kötegelt feldolgozásához használjon háttérsort és CGBitmapContext-et az UI blokkolásának elkerüléséhez.