Core Graphics — was ist das, Funktionsprinzipien und Framework für 2D-Grafiken

Was ist Core Graphics?

Core Graphics (auch bekannt als Quartz 2D) ist ein Framework, das Apples 2D-Grafik-Engine implementiert. Es basiert auf der portablen Grafikbibliothek Quartz und verwendet ein seitenbasiertes Zeichenmodell, bei dem jede Aktion ein Befehl in einer Sequenz ist, die an das Zeichnen auf Papier erinnert. Core Graphics unterstützt Antialiasing, Transparenz (Alpha-Compositing) und ICC-Farbräume.

Die Architektur von Core Graphics ist um einen Grafikkontext (CGContext) herum aufgebaut, der das Zielausgabegerät kapselt — Bildschirm, Drucker, PDF-Dokument oder Rasterpuffer. Der Kontext verwaltet die aktuellen Einstellungen: Farbe, Linienstärke, Transformation, Ausschnittsbereich und Schriftarten. Dieser Ansatz bietet eine einheitliche API für verschiedene Ausgabegeräte, ohne den Zeichencode zu ändern.

Core Graphics arbeitet hauptsächlich auf der CPU und verwendet ein Vektormodell (auflösungsunabhängig). Das bedeutet, dass Linien und Kurven beim Zeichnen mit der aktuellen Geräteauflösung gerastert werden. Anders als Metal erfordert Core Graphics keine explizite GPU-Ressourcenverwaltung — das System übernimmt die gesamte Optimierung. Für die meisten 2D-Aufgaben (Grafiken, Diagramme, benutzerdefinierte UI-Elemente) ist die Leistung von Core Graphics ausreichend, um 60 FPS zu halten.

Architektur und wichtige Typen

Core Graphics umfasst etwa 50 Basistypen (undurchsichtige Typen), die jeweils für eine bestimmte Funktionalität verantwortlich sind. Alle Typen folgen den Speicherverwaltungsregeln von Core Foundation: Sie werden durch Funktionen mit Create im Namen erstellt, erfordern einen Aufruf von CGRelease und sind in Objective-C nicht ARC-kompatibel (Swift verwaltet den Speicher jedoch automatisch über CF_RETURNS_RETAINED-Annotationen).

Wichtige Typen von Core Graphics

CGContext — der Zeichenkontext, der zentrale Typ des Frameworks. CGPath — ein unveränderlicher Vektorpfad. CGColor — eine Farbe mit einem angegebenen Farbraum. CGGradient — eine Verlaufsfüllung. CGImage — ein Rasterbild. CGLayer — ein optimierter Offline-Puffer für wiederholtes Zeichnen. CGDataProvider — eine Datenquelle für Bilder. CGColorSpace — ein Farbraum (sRGB, Display P3, Gray).

Jeder Typ ist auf minimalen Overhead ausgelegt: CGPath kann zwischen verschiedenen Kontexten zwischengespeichert und wiederverwendet werden, CGColor wird beim Übergeben in eine GPU-Hardware-Darstellung umgewandelt, CGLayer speichert vorgerasterte Inhalte. Diese Architektur ermöglicht es Core Graphics, sowohl in einfachen UI-Aufgaben als auch in professionellen Grafikeditoren effizient zu arbeiten.

CGPath: Vektorpfade und ihre Optimierung

CGPath ist ein unveränderliches Objekt, das eine Folge geometrischer Segmente beschreibt: gerade Linien, Bezier-Kurven, Bögen und Schließungen. Im Gegensatz zu UIBezierPath enthält CGPath keine Zeichenmethoden — es speichert nur die Geometrie. Zum Zeichnen wird CGPath zum Kontext hinzugefügt (CGContextAddPath) und dann über strokePath oder fillPath gerendert. Die Unveränderlichkeit gewährleistet Thread-Sicherheit und Caching-Fähigkeit.

Erstellung und Optimierung von Pfaden

CGPathCreateMutable erstellt einen veränderlichen Pfad (CGMutablePathRef) für die schrittweise Konstruktion. Nach dem endgültigen Zusammenbau wird er in einen unveränderlichen CGPathRef umgewandelt. Apple empfiehlt, die Anzahl der Punkte in CGPath zu minimieren — zu komplexe Pfade (mehr als 1000 Segmente) verlangsamen die Rasterung. Verwenden Sie zur Optimierung CGPathCreateCopyBySimplifyingPath, das redundante kollineare Punkte entfernt.

Für die Formanimation zwischen zwei CGPath-Objekten können Sie CABasicAnimation auf der path-Eigenschaft von CAShapeLayer verwenden. Einschränkung: Beide CGPath müssen die gleiche Anzahl von Segmenten (Kontrollpunkte) haben. Die Funktion CGPathApply ermöglicht es, alle Elemente des Pfades zu durchlaufen und ihre Struktur zu vergleichen. Wenn die Segmente nicht übereinstimmen, wird die Animation ruckeln — in diesem Fall verwenden Sie CADisplayLink für die manuelle Punktinterpolation.

// veränderlichen Pfad erstellen
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()

// zur sicheren Zwischenspeicherung in unveränderlichen umwandeln
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

Verläufe: CGGradient und CGShading

CGGradient ist ein Objekt, das einen sanften Übergang zwischen zwei oder mehr Farben entlang einer geraden Linie (linearer Verlauf) oder von der Mitte nach außen (radialer Verlauf) definiert. CGGradient wird mit einem angegebenen Farbraum, einem Array von CGColorRef und einem Array von Stoppositionen von 0,0 bis 1,0 erstellt. Nach der Erstellung kann der Verlauf in verschiedenen Kontexten mehrfach wiederverwendet werden.

CGShading für fortgeschrittene Verläufe

CGShading ist ein leistungsfähigerer Mechanismus, der es ermöglicht, eine Farbänderungsfunktion entlang eines Pfades zu definieren. Im Gegensatz zu CGGradient, das mit einem festen Satz von Farben arbeitet, verwendet CGShading eine Callback-Funktion (CGFunctionRef), die die Farbe an jedem Punkt berechnet. Dies ermöglicht komplexe Verläufe mit nichtlinearen Übergängen und zusammengesetzten Farbschemata.

Um einen Verlauf innerhalb einer Form zu zeichnen, ist ein Clip auf den Pfad dieser Form erforderlich. Die Reihenfolge: Pfad zum Kontext hinzufügen, CGContextClip aufrufen, dann den Verlauf zeichnen. Ohne Clip füllt der Verlauf den gesamten Kontext. Unter iOS wird CGGradient als einfachere und leistungsfähigere Option empfohlen — CGShading ist nur für benutzerdefinierte Farbfunktionen gerechtfertigt.

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

Arbeit mit Bildern: CGImage und CGLayer

CGImage ist ein Rasterbild in Core Graphics, das aus einer Datei geladen, programmatisch erstellt oder von UIImage bezogen werden kann. CGImage enthält Pixeldaten, Farbrauminformationen, Größe, Bittiefe und Datenanordnung. Im Gegensatz zu UIImage verwaltet CGImage keine Retina-Skalierung — diese Verantwortung liegt beim Entwickler über den scale-Parameter.

CGLayer — Optimierung wiederholten Zeichnens

CGLayer ist ein Offline-Puffer zum Vorrasterisieren statischer Inhalte. Wenn derselbe Satz von Zeichenbefehlen wiederholt ausgeführt wird (z. B. ein Hintergrundmuster), rastert CGLayer ihn einmal und kopiert ihn dann einfach in den Kontext. Laut Apple kann die Verwendung von CGLayer wiederholtes Zeichnen um das 2- bis 5-fache auf der CPU und bis zu 10-fach mit Hardwarebeschleunigung beschleunigen.

Verwenden Sie zum Laden von Bildern CGImageSource — eine leistungsstarke API zum Lesen von Metadaten, Miniaturansichten und Einzelbildern aus GIF/APNG. CGImageSource ermöglicht progressives Laden und das Abrufen nur der erforderlichen Fragmente. Bei der Arbeit mit großen Bildern (die die Bildschirmgröße überschreiten) wird empfohlen, eine CGImageSource mit Festplatten-Cache zu erstellen und CGImageSourceCreateThumbnailAtIndex zum Anzeigen einer verkleinerten Version zu verwenden.

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

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

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

Codebeispiel mit Core Graphics

Lassen Sie uns eine benutzerdefinierte View zum Anzeigen eines Wasserzeichens auf einem Bild mit Core Graphics erstellen. Das Wasserzeichen umfasst halbtransparenten Text und ein Vektor-Logo, die über das Originalbild gelegt werden. Der Code demonstriert die Arbeit mit CGContext, CGImage, Text und Transparenz in einem einzigen 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 }

        // Hintergrundbild zeichnen
        UIImage(named: "background")?.draw(in: rect)

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

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

        // Vektor-Symbol (Kreis mit Kreuz) unter dem Text
        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()
    }
}

Der Code verwendet wichtige Core Graphics-Funktionen: saveGState/restoreGState zum Isolieren von Wasserzeicheneffekten vom Hintergrund, translateBy und rotate für Positionierung und Drehung, halbtransparenten Text über withAlphaComponent und ein Vektor-Icon über addEllipse und addLineTo. Das gesamte Wasserzeichen wird als eine einzige Komposition nach dem Hintergrundbild gezeichnet.

Beim Erstellen von Wasserzeichen für Fotos in der Produktion ist es wichtig, die Leistung zu berücksichtigen. Wenn das Bild größer als der Bildschirm ist, verkleinern Sie es mit CGImageSourceCreateThumbnailAtIndex, bevor Sie das Wasserzeichen anwenden. Core Graphics verarbeitet alle Operationen auf der CPU — für die Stapelverarbeitung Dutzender Bilder verwenden Sie eine Hintergrundwarteschlange und CGBitmapContext, um eine Blockierung der UI zu vermeiden.