Core Graphics — vad är det, arbetsprinciper och ramverk för 2D-grafik

Vad är Core Graphics?

Core Graphics (även känt som Quartz 2D) är ett ramverk som implementerar Apples 2D-grafikmotor. Det är baserat på det portabla grafikbiblioteket Quartz och använder en sidbaserad ritmodell (page-based), där varje åtgärd är ett kommando i en sekvens som påminner om att rita på papper. Core Graphics stöder kantutjämning, genomskinlighet (alpha compositing) och ICC-färgrymder.

Arkitekturen för Core Graphics är byggd kring grafikkontexten (CGContext), som kapslar in målenheten för utskrift — skärm, skrivare, PDF-dokument eller rasterbuffert. Kontexten hanterar aktuella inställningar: färg, linjebredd, transformation, klippområde och teckensnitt. Detta tillvägagångssätt säkerställer ett enhetligt API för olika utenheter utan att ändra ritkoden.

Core Graphics arbetar huvudsakligen på CPU:n, med en vektormodell (resolution-independent). Detta innebär att linjer och kurvor rastreras med enhetens aktuella upplösning vid rendering. Till skillnad från Metal kräver Core Graphics ingen explicit hantering av GPU-resurser — systemet tar hand om all optimering. För de flesta 2D-uppgifter (grafik, diagram, anpassade UI-element) är Core Graphics prestanda tillräcklig för att upprätthålla 60 FPS.

Arkitektur och huvudtyper

Core Graphics omfattar cirka 50 grundläggande typer (opaque types), var och en ansvarig för en specifik funktionalitet. Alla typer följer Core Foundations minneshanteringsregler: skapas via funktioner med Create i namnet, kräver anrop till CGRelease och är inte ARC-kompatibla i Objective-C (men Swift hanterar automatiskt minnet via annoteringar av CF_RETURNS_RETAINED).

Nyckeltyper i Core Graphics

CGContext — ritkontext, ramverkets centrala typ. CGPath — oföränderlig vektorkontur. CGColor — färg med angivelse av färgrymd. CGGradient — gradientfyllning. CGImage — rasterbild. CGLayer — optimerad offlinebuffert för upprepad ritning. CGDataProvider — datakälla för bilder. CGColorSpace — färgrymd (sRGB, Display P3, Gray).

Varje typ är utformad för minimal overhead: CGPath kan cachas och återanvändas mellan olika kontexter, CGColor omvandlas till GPU:s hårdvarurepresentation vid överföring, CGLayer lagrar förrenderat innehåll. En sådan arkitektur gör att Core Graphics kan arbeta effektivt både i enkla UI-uppgifter och i professionella grafiska redigerare.

CGPath: vektorkonturer och deras optimering

CGPath — ett oföränderligt objekt som beskriver en sekvens av geometriska segment: raka linjer, Bézier-kurvor, bågar och slutningar. Till skillnad från UIBezierPath innehåller CGPath inga ritmetoder — det lagrar bara geometrin. För ritning läggs CGPath till i kontexten (CGContextAddPath) och ritas sedan via strokePath eller fillPath. Oföränderlighet garanterar trådsäkerhet och möjlighet till cachning.

Skapa och optimera konturer

CGPathCreateMutable skapar en föränderlig bana (CGMutablePathRef) för stegvis konstruktion. Efter slutlig sammansättning omvandlas den till oföränderlig CGPathRef. Apple rekommenderar att minimera antalet punkter i CGPath — alltför komplexa konturer (mer än 1000 segment) saktar ner rastreringen. För optimering, använd CGPathCreateCopyBySimplifyingPath, som tar bort överflödiga kolinjära punkter.

För formanimering mellan två CGPaths kan du använda CABasicAnimation på egenskapen path hos CAShapeLayer. Begränsning: båda CGPaths måste ha samma antal segment (controls points). Funktionen CGPathApply gör det möjligt att gå igenom alla element i banan och jämföra deras struktur. Om segmenten inte matchar blir animationen ryckig — i detta fall använder du CADisplayLink för manuell interpolation av punkter.

// skapa föränderlig bana
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()

// konvertera till oföränderlig för säker cachning
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

Gradienter: CGGradient och CGShading

CGGradient — ett objekt som definierar en mjuk övergång mellan två eller fler färger längs en rak linje (linjär gradient) eller från mitten till kanterna (radiell gradient). CGGradient skapas med angivelse av färgrymd, en array av CGColorRef och en array av stoppositioner från 0.0 till 1.0. Efter skapande kan gradienten användas flera gånger i olika kontexter.

CGShading för avancerade gradienter

CGShading — en kraftfullare mekanism som gör det möjligt att definiera en funktion för färgändring längs en bana. Till skillnad från CGGradient som arbetar med en fast uppsättning färger, använder CGShading en callback-funktion (CGFunctionRef) som beräknar färgen vid varje punkt. Detta gör det möjligt att skapa komplexa gradienter med olinjära övergångar och sammansatta färgscheman.

För att rita en gradient inuti en figur krävs klippning (clip) på konturen av den figuren. Ordning: lägg till banan i kontexten, anropa CGContextClip, rita sedan gradienten. Utan klippning fyller gradienten hela kontexten. I iOS rekommenderas att använda CGGradient som ett enklare och mer prestandaeffektivt alternativ — CGShading är endast motiverat för icke-standardiserade färgändringsfunktioner.

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

Arbeta med bilder: CGImage och CGLayer

CGImage — en rasterbild i Core Graphics, som kan laddas från en fil, skapas programmatiskt eller hämtas från UIImage. CGImage innehåller pixeldata, information om färgrymd, storlek, bitdjup och data layout. Till skillnad från UIImage hanterar CGImage inte skalning för Retina — detta ansvar ligger hos utvecklaren via parametern scale.

CGLayer — optimering av upprepad ritning

CGLayer — en offlinebuffert för förhandsrastrering av statiskt innehåll. Om samma uppsättning grafiska kommandon ritas upprepade gånger (t.ex. bakgrundsmönster), rastrerar CGLayer det en gång och kopierar det sedan helt enkelt till kontexten. Enligt Apple-data kan användning av CGLayer påskynda upprepad ritning 2–5 gånger på CPU:n och upp till 10 gånger med hårdvaruacceleration.

För att ladda bilder, använd CGImageSource — ett kraftfullt API för att läsa metadata, miniatyrer och enskilda bildrutor från GIF/APNG. CGImageSource möjliggör progressiv laddning av bilder och hämtning av endast nödvändiga fragment. Vid arbete med stora bilder (som överstiger skärmstorleken) rekommenderas att skapa CGImageSource med alternativ för diskcachning och använda CGImageSourceCreateThumbnailAtIndex för att visa en förminskad version.

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

    // rita en gång
    layerCtx.setFillColor(UIColor.lightGray.cgColor)
    layerCtx.addEllipse(in: CGRect(origin: .zero, size: size))
    layerCtx.fillPath()
    return layer
}

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

Exempel på arbete med Core Graphics

Vi utvecklar en anpassad View för att visa en vattenstämpel på en bild med hjälp av Core Graphics. Vattenstämpeln innehåller halvgenomskinlig text och en vektorlogotyp som placeras ovanpå originalbilden. Koden demonstrerar arbete med CGContext, CGImage, text och genomskinlighet i en kontext.

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 }

        // rita bakgrundsbild
        UIImage(named: "background")?.draw(in: rect)

        // konfigurera vattenstämpelns genomskinlighet
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // halvgenomskinlig 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
        )

        // vektorikon (cirkel med kors) under texten
        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()
    }
}

I koden används viktiga funktioner i Core Graphics: saveGState/restoreGState för att isolera vattenstämpeleffekter från bakgrunden, translateBy och rotate för positionering och rotation, halvgenomskinlig text via withAlphaComponent och vektorikon via addEllipse och addLineTo. Hela vattenstämpeln ritas som en enda komposition efter bakgrundsbilden.

När du skapar vattenstämplar för foton i produktion är det viktigt att ta hänsyn till prestanda. Om bilden är större än skärmen, före applicering av vattenstämpeln, förminska den via CGImageSourceCreateThumbnailAtIndex. Core Graphics bearbetar alla operationer på CPU:n — för batchbearbetning av dussintals bilder, använd en bakgrundskö och CGBitmapContext för att undvika blockering av UI.