CGGradient: Was es ist, Verlaufstypen und ihre Erstellung

Was ist CGGradient?

CGGradient ist ein unveränderliches Objekt in Core Graphics, das eine Reihe von Farben und Regeln zu deren Mischung entlang eines Verlaufsübergangs kapselt. Intern speichert CGGradient ein Array von CGColor, ein Array von Positionen (locations) im Bereich [0.0, 1.0] und einen Verweis auf den CGColorSpace, in dem die Farben interpretiert werden. Jede Farbe ist mit einer Position auf der Verlaufsskala verknüpft: Position 0.0 entspricht dem Beginn, 1.0 dem Ende des Übergangs.

Beim Erstellen eines CGGradient über die Funktion CGGradientCreateWithColors berechnet Core Graphics die Zwischenfarbwerte vor. Ein Verlauf kann eine beliebige Anzahl von Farbstopps enthalten, was komplexe mehrfarbige Übergänge ermöglicht. Die Anzahl der Farben muss mindestens zwei betragen, und jede Farbe muss einer Position im locations-Array entsprechen.

Die Architektur von CGGradient unterscheidet sich von höherwertigen APIs wie CAGradientLayer aus Core Animation dadurch, dass sie direkt im Core Graphics-Kontext arbeitet. Dies bietet vollständige Kontrolle über den Zeichenprozess und die Möglichkeit, Verläufe mit anderen Quartz 2D-Operationen zu kombinieren — Clip-Masken, Schatten und Transformationen.

Lineare und radiale Verläufe

Core Graphics unterstützt zwei Arten von Verläufen: linear (axial) und radial. Ein linearer Verlauf wird mit der Funktion CGGradientCreateWithColors erstellt und mit CGContextDrawLinearGradient gezeichnet. Ein radialer Verlauf benötigt die gleiche CGGradient-Struktur, wird aber mit CGContextDrawRadialGradient gezeichnet.

Linearer Verlauf (Axial)

Linearer Verlauf dehnt den Farbübergang entlang einer geraden Linie vom Startpunkt startPoint zum Endpunkt endPoint aus. Die Farben werden zwischen diesen beiden Punkten interpoliert, und das Verhalten außerhalb wird durch die Erweiterungsoptionen gesteuert. Ein linearer Verlauf ist ideal für die Erstellung glatter Hintergründe, die Simulation von Metalloberflächen und Farbübergänge in Oberflächenelementen.

Radialer Verlauf

Radialer Verlauf erzeugt einen Farbübergang von einem Kreis zu einem anderen. Jeder Kreis wird durch einen Mittelpunkt (startCenter / endCenter) und einen Radius (startRadius / endRadius) definiert. Die Farbe wird vom inneren Kreis zum äußeren Kreis interpoliert. Ein Spezialfall ist, wenn der Anfangsradius 0 ist: Der Verlauf strahlt von einem einzelnen Punkt aus. Radiale Verläufe werden zur Simulation von Lichtquellen, Linsen, Himmelskörpern und Spotlicht-Effekten verwendet.

CGGradient erstellen: Farben und Positionen

CGGradient wird mit nur einer Basisfunktion erstellt — CGGradientCreateWithColors. Die Funktion nimmt einen CGColorSpace, ein Array von CGColor (CFArray) und ein Array von CGFloat locations entgegen. Wenn locations NULL ist, werden die Farben gleichmäßig entlang der Verlaufsskala verteilt. Wenn locations angegeben sind, muss ihre Anzahl mit der Anzahl der Farben übereinstimmen.

Das locations-Array enthält Werte von 0.0 bis 1.0, die die Stoppunkte für jede Farbe definieren. Die Werte müssen monoton steigen. Wenn der erste Wert größer als 0.0 ist, wird die Farbe vom Anfang bis zu dieser Position aus der Farbe an Position 0.0 extrapoliert. Analog für den letzten Wert kleiner als 1.0. Dieses Verhalten wird durch die Erweiterungsoptionen beim Zeichnen gesteuert.

Bei der Auswahl von Farben für einen Verlauf ist es wichtig, den Farbraum zu berücksichtigen. Alle Farben in einem einzigen CGGradient müssen zum selben CGColorSpace gehören — Core Graphics interpoliert Komponenten in diesem Raum. Wenn Farben in verschiedenen Räumen erstellt wurden, müssen sie zunächst mit CGColorCreateCopyByMatchingToColorSpace in einen gemeinsamen Raum konvertiert werden.

Einen Verlauf im Kontext zeichnen

Core Graphics bietet zwei Funktionen zum Zeichnen eines Verlaufs: CGContextDrawLinearGradient für lineare und CGContextDrawRadialGradient für radiale. Beide Funktionen akzeptieren einen Grafikkontext, ein CGGradient-Objekt, Erweiterungsoptionen und typspezifische geometrische Parameter. Das Zeichnen erfolgt unter Berücksichtigung der aktuellen Clip-Maske und der Kontexttransformation.

Erweiterungsoptionen (Gradient Options)

Erweiterungsoptionen steuern das Verhalten des Verlaufs außerhalb des Positionsbereichs 0.0–1.0. Die Konstante kCGGradientDrawsBeforeStartLocation füllt den Bereich vor der Startposition mit der Farbe des ersten Stopps. kCGGradientDrawsAfterEndLocation füllt mit der Farbe des letzten Stopps. Diese Optionen können über eine Bitmaske kombiniert werden. Für radiale Verläufe gelten die Optionen für den Bereich außerhalb der Start- und Endradien.

Auswirkung von Transformationen

Der Verlauf wird im Koordinatensystem des aktuellen Grafikkontexts unter Berücksichtigung seiner Transformation (CTM — Current Transformation Matrix) gezeichnet. Die Anwendung von CGContextTranslateCTM, CGContextScaleCTM oder CGContextRotateCTM vor dem Aufruf der Zeichenfunktion ändert die Position und Skalierung des Verlaufs. Dies ermöglicht die Wiederverwendung eines einzelnen CGGradient für verschiedene Bereiche, ohne neue Objekte zu erstellen.

Optionen: Erweiterung, Glättung und Maskierung

Core Graphics bietet mehrere zusätzliche Mechanismen zur Steuerung von Verläufen: Kantenglättung (Antialiasing), Maskierung durch eine Clip-Maske und Kombination mit Transparenzeffekten. Kantenglättung ist standardmäßig im Grafikkontext aktiviert und wird über CGContextSetShouldAntialias gesteuert.

Clip-Maske ermöglicht es, den Zeichenbereich des Verlaufs auf eine beliebige Form zu beschränken. Vor dem Aufruf von CGContextDrawLinearGradient muss ein Pfad über CGContextBeginPath, CGContextAddPath und CGContextClip definiert werden. Der Verlauf wird nur innerhalb des durch diesen Pfad begrenzten Bereichs gezeichnet. Dies wird häufig zum Erstellen von Verlaufsymbolen, Schaltflächen und Fortschrittsbalken verwendet.

Verlaufserweiterung ist ein weiterer wichtiger Parameter. Bei Verwendung von kCGGradientDrawsBeforeStartLocation extrapoliert Core Graphics die Farbe des ersten Stopps über den gesamten Bereich vor startPoint. Ohne diese Option bleibt der Bereich außerhalb des Verlaufs ungefüllt (transparent). Die Kombination beider Optionen stellt sicher, dass das gesamte Rechteck des Grafikkontexts mit einem Verlauf gefüllt wird, auch wenn startPoint und endPoint darin liegen.

Swift-Codebeispiele

Sehen wir uns praktische Beispiele zum Erstellen und Zeichnen von Verläufen in iOS mit CGGradient und Core Graphics an.

Linearer Verlauf mit drei Farben

Dieses Beispiel erstellt einen linearen Verlauf mit drei Farben (Blau, Grün, Rot) und zeichnet ihn diagonal über eine UIView. Das locations-Array verteilt die Farben ungleichmäßig: Blau von 0.0 bis 0.3, Grün bei 0.6, Rot von 0.6 bis 1.0.

func drawLinearGradient(in ctx: CGContext,
                          rect: CGRect) {
    let colors = [
        UIColor.blue.cgColor,
        UIColor.green.cgColor,
        UIColor.red.cgColor
    ] as CFArray

    let locations: [CGFloat] = [0.0, 0.6, 1.0]
    let space = CGColorSpaceCreateDeviceRGB()

    guard let gradient = CGGradientCreateWithColors(
        space, colors, locations
    ) else { return }

    let start = CGPoint(x: 0, y: 0)
    let end = CGPoint(x: rect.width,
                         y: rect.height)

    ctx.drawLinearGradient(gradient,
        start: start, end: end,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

Radialer Verlauf mit Glow-Effekt

Dieses Beispiel zeichnet einen radialen Verlauf, der einen Glow-Effekt simuliert. Der Startpunkt mit Radius Null definiert das Glow-Zentrum, und der äußere Kreis definiert die Ausblendgrenze. Dieser Effekt wird verwendet, um Oberflächenelemente oder Aktivitätsanzeigen hervorzuheben.

func drawRadialGlow(in ctx: CGContext,
                     center: CGPoint) {
    let colors = [
        UIColor.white.cgColor,
        UIColor.orange.cgColor,
        UIColor.clear.cgColor
    ] as CFArray
    let locations: [CGFloat] = [0.0, 0.4, 1.0]

    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(), colors, locations)

    ctx.drawRadialGradient(gradient,
        startCenter: center, startRadius: 0,
        endCenter: center, endRadius: 100,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

Verlauf mit Clip-Maske

In diesem Beispiel wird der Verlauf durch einen Clip-Pfad auf einen kreisförmigen Bereich beschränkt. Vor dem Zeichnen des Verlaufs wird ein kreisförmiger Pfad definiert, der zur aktuellen Kontextmaske wird. Der Verlauf füllt nur den Bereich innerhalb des Kreises und erzeugt so einen Verlaufssymbol-Effekt.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Creating circular clip path
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Drawing gradient inside clip mask
    let colors = [UIColor.magenta.cgColor,
                    UIColor.cyan.cgColor]
    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(),
        colors as CFArray, nil)

    ctx.drawLinearGradient(gradient,
        start: CGPoint(x: 0, y: 0),
        end: CGPoint(x: rect.width,
                     y: rect.height),
        options: [.drawsBeforeStartLocation])
}