Core Graphics — wat is het, werkingsprincipes en framework voor 2D-graphics

Wat is Core Graphics?

Core Graphics (ook bekend als Quartz 2D) is een framework dat de 2D-grafische motor van Apple implementeert. Het is gebaseerd op de draagbare grafische bibliotheek Quartz en gebruikt een paginagebaseerd tekenmodel (page-based), waarbij elke actie een commando is in een reeks die doet denken aan tekenen op papier. Core Graphics ondersteunt anti-aliasing, transparantie (alpha compositing) en ICC-kleurruimten.

De architectuur van Core Graphics is gebouwd rond de grafische context (CGContext), die het doeluitvoerapparaat inkapselt — scherm, printer, PDF-document of rasterbuffer. De context beheert de huidige instellingen: kleur, lijnbreedte, transformatie, clipgebied en lettertypen. Deze benadering zorgt voor een uniforme API voor verschillende uitvoerapparaten zonder de teken code te wijzigen.

Core Graphics werkt voornamelijk op de CPU en gebruikt een vectormodel (resolution-independent). Dit betekent dat lijnen en curven worden gerasterd met de huidige resolutie van het apparaat tijdens het renderen. In tegenstelling tot Metal vereist Core Graphics geen expliciet beheer van GPU-bronnen — het systeem neemt alle optimalisatie over. Voor de meeste 2D-taken (grafieken, diagrammen, aangepaste UI-elementen) is de prestaties van Core Graphics voldoende om 60 FPS te handhaven.

Architectuur en belangrijkste typen

Core Graphics omvat ongeveer 50 basistypen (opaque types), die elk verantwoordelijk zijn voor een specifieke functionaliteit. Alle typen volgen de regels voor geheugenbeheer van Core Foundation: ze worden gemaakt via functies met Create in de naam, vereisen een aanroep van CGRelease en zijn niet ARC-compatibel in Objective-C (maar Swift beheert het geheugen automatisch via CF_RETURNS_RETAINED annotaties).

Belangrijkste typen van Core Graphics

CGContext — tekencontext, het centrale type van het framework. CGPath — onveranderlijke vectorcontour. CGColor — kleur met specificatie van de kleurruimte. CGGradient — gradiëntvulling. CGImage — rasterafbeelding. CGLayer — geoptimaliseerde offline buffer voor herhaaldelijk tekenen. CGDataProvider — gegevensbron voor afbeeldingen. CGColorSpace — kleurruimte (sRGB, Display P3, Gray).

Elk type is ontworpen voor minimale overhead: CGPath kan worden gecachet en hergebruikt tussen verschillende contexten, CGColor wordt bij overdracht omgezet naar de hardwareweergave van de GPU, CGLayer slaat vooraf gerasterde inhoud op. Een dergelijke architectuur stelt Core Graphics in staat om efficiënt te werken, zowel in eenvoudige UI-taken als in professionele grafische editors.

CGPath: vectorcontouren en hun optimalisatie

CGPath — een onveranderlijk object dat een reeks geometrische segmenten beschrijft: rechte lijnen, Bézier-curven, bogen en sluitingen. In tegenstelling tot UIBezierPath bevat CGPath geen tekenmethoden — het slaat alleen de geometrie op. Om te tekenen wordt CGPath aan de context toegevoegd (CGContextAddPath) en vervolgens getekend via strokePath of fillPath. Onveranderlijkheid garandeert threadveiligheid en de mogelijkheid tot caching.

Aanmaken en optimaliseren van contouren

CGPathCreateMutable maakt een veranderlijk pad (CGMutablePathRef) voor gefaseerde opbouw. Na de definitieve montage wordt het omgezet in een onveranderlijke CGPathRef. Apple raadt aan om het aantal punten in CGPath te minimaliseren — te complexe contouren (meer dan 1000 segmenten) vertragen de rastering. Gebruik voor optimalisatie CGPathCreateCopyBySimplifyingPath, dat overbodige collineaire punten verwijdert.

Voor vormanimatie tussen twee CGPaths kunt u CABasicAnimation gebruiken op de eigenschap path van CAShapeLayer. Beperking: beide CGPaths moeten hetzelfde aantal segmenten hebben (controls points). De functie CGPathApply maakt het mogelijk om alle elementen van het pad te doorlopen en hun structuur te vergelijken. Als de segmenten niet overeenkomen, zal de animatie schokkerig zijn — gebruik in dat geval CADisplayLink voor handmatige interpolatie van punten.

// maak veranderlijk pad
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()

// converteer naar onveranderlijk voor veilig cachen
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

Gradiënten: CGGradient en CGShading

CGGradient — een object dat een vloeiende overgang definieert tussen twee of meer kleuren langs een rechte lijn (lineaire gradiënt) of van het midden naar de randen (radiale gradiënt). CGGradient wordt gemaakt met opgave van de kleurruimte, een array van CGColorRef en een array van stopposities van 0.0 tot 1.0. Na aanmaak kan de gradiënt meerdere keren worden gebruikt in verschillende contexten.

CGShading voor geavanceerde gradiënten

CGShading — een krachtiger mechanisme waarmee een functie voor kleurverandering langs een pad kan worden gedefinieerd. In tegenstelling tot CGGradient, dat werkt met een vaste set kleuren, gebruikt CGShading een callback-functie (CGFunctionRef) die de kleur op elk punt berekent. Dit maakt het mogelijk om complexe gradiënten te maken met niet-lineaire overgangen en samengestelde kleurschema's.

Voor het tekenen van een gradiënt binnen een vorm is clipping op de contour van die vorm vereist. Volgorde: voeg het pad toe aan de context, roep CGContextClip aan en teken vervolgens de gradiënt. Zonder clipping vult de gradiënt de hele context. In iOS wordt aanbevolen om CGGradient te gebruiken als eenvoudigere en performantere optie — CGShading is alleen gerechtvaardigd voor niet-standaard kleurveranderingsfuncties.

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

Werken met afbeeldingen: CGImage en CGLayer

CGImage — een rasterafbeelding in Core Graphics, die kan worden geladen uit een bestand, programmatisch kan worden gemaakt of kan worden verkregen uit UIImage. CGImage bevat pixelgegevens, informatie over kleurruimte, grootte, bitdiepte en gegevensindeling. In tegenstelling tot UIImage beheert CGImage geen schaling voor Retina — deze verantwoordelijkheid ligt bij de ontwikkelaar via de parameter scale.

CGLayer — optimalisatie van herhaaldelijk tekenen

CGLayer — een offline buffer voor voorafgaande rastering van statische inhoud. Als dezelfde set grafische opdrachten herhaaldelijk wordt getekend (bijvoorbeeld een achtergrondpatroon), rastert CGLayer het eenmalig en kopieert het vervolgens eenvoudig naar de context. Volgens Apple-gegevens kan het gebruik van CGLayer herhaaldelijk tekenen 2–5 keer versnellen op de CPU en tot 10 keer met hardwareversnelling.

Gebruik voor het laden van afbeeldingen CGImageSource — een krachtige API voor het lezen van metadata, miniaturen en afzonderlijke frames uit GIF/APNG. CGImageSource maakt progressief laden van afbeeldingen mogelijk en het ophalen van alleen de benodigde fragmenten. Bij het werken met grote afbeeldingen (groter dan het scherm) wordt aanbevolen om CGImageSource te maken met een optie voor schijfcaching en CGImageSourceCreateThumbnailAtIndex te gebruiken voor het weergeven van een verkleinde versie.

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

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

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

Voorbeeld van werken met Core Graphics

We ontwikkelen een aangepaste View voor het weergeven van een watermerk op een afbeelding met behulp van Core Graphics. Het watermerk bevat halfdoorzichtige tekst en een vectorlogo dat over de originele afbeelding wordt geplaatst. De code demonstreert het werken met CGContext, CGImage, tekst en transparantie in één context.

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 }

        // teken achtergrondafbeelding
        UIImage(named: "background")?.draw(in: rect)

        // configureer watermerktransparantie
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // halfdoorzichtige tekst
        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
        )

        // vectorpictogram (cirkel met kruis) onder de tekst
        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()
    }
}

In de code worden de belangrijkste mogelijkheden van Core Graphics gebruikt: saveGState/restoreGState voor het isoleren van watereffecten van de achtergrond, translateBy en rotate voor positionering en rotatie, halfdoorzichtige tekst via withAlphaComponent en een vectorpictogram via addEllipse en addLineTo. Het gehele watermerk wordt getekend als één compositie na de achtergrondafbeelding.

Bij het maken van watermerken voor foto's in productie is het belangrijk om rekening te houden met prestaties. Als de afbeelding groter is dan het scherm, verklein deze dan vóór het toepassen van het watermerk via CGImageSourceCreateThumbnailAtIndex. Core Graphics verwerkt alle bewerkingen op de CPU — voor batchverwerking van tientallen afbeeldingen gebruikt u een achtergrondwachtrij en CGBitmapContext om blokkering van de UI te voorkomen.