CGColor und CGColorSpace: Was es ist, Farbmodelle und wie man sie verwaltet

Was sind CGColor und CGColorSpace?

CGColor ist ein fundamentales Core-Graphics-Objekt, das eine Farbe repräsentiert. Die CGColor-Struktur speichert numerische Werte von Farbkomponenten und einen Verweis auf CGColorSpace — den Farbraum, in dem diese Komponenten interpretiert werden. Ohne Bindung an einen Farbraum haben die numerischen Werte der Komponenten keine Bedeutung: Der Wert (1.0, 0.0, 0.0) in RGB ist Rot, in CMYK jedoch Zyan.

CGColorSpace ist ein Objekt, das ein Farbmodell und den Bereich darstellbarer Werte (Gamut) definiert. Der Farbraum legt die Regeln fest, nach denen numerische Komponenten auf einem bestimmten Ausgabegerät in eine sichtbare Farbe umgewandelt werden. Core Graphics unterstützt sowohl standardmäßige ICC-profilierte Räume als auch benutzerdefinierte Räume, die über CGColorSpace mit benutzerdefinierten Transformationstabellen erstellt werden.

Die Architektur, die Farbe und Farbraum trennt, ist ein wesentliches Merkmal von Core Graphics, das es von APIs unterscheidet, in denen Farbe als einfacher Zahlensatz gespeichert wird. Dieser Ansatz ermöglicht es Core Graphics, geräteunabhängiges Farbmanagement durchzuführen: Dasselbe CGColor-Objekt kann auf verschiedenen Bildschirmen korrekt angezeigt werden, dank der automatischen Komponentenkonvertierung über das CGColorSpace-Profil.

Wie Farben in Core Graphics funktionieren

Core Graphics implementiert Farbe durch ein Modell, das auf ICC-Profilen (International Color Consortium) basiert. Jeder CGColorSpace enthält einen Verweis auf ein ICC-Profil — eine standardisierte Beschreibung, wie Farbkomponenten in CIE XYZ umgewandelt werden — einen geräteunabhängigen Farbraum. Dies ermöglicht Core Graphics eine automatische farbmetrische Kompensation zwischen verschiedenen Bildschirmen.

Lebenszyklus eines CGColor-Objekts

Beim Erstellen eines CGColor über die Funktion CGColorCreate werden die Komponenten aus dem übergebenen Array erfasst und an den angegebenen CGColorSpace gebunden. Core Graphics kopiert die Komponenten in eine interne Darstellung und erstellt eine Zuordnung zum Farbraum. Danach ist die Farbe für jede Grafikoperation bereit — Füllung, Strich, Verlauf, Schatten.

Farbmanagement über ColorSync

Auf macOS wird das Farbmanagement über das in Core Graphics integrierte ColorSync-Framework abgewickelt. ColorSync verfolgt die Bildschirmkalibrierung und konvertiert automatisch Komponenten vom Quellfarbraum in den Zielgeräteraum. Auf iOS wird das Farbmanagement über Quartz Core mit Unterstützung für einen breiten Farbumfang (Display P3) ab iPhone 7 implementiert.

Grundlegende Farbmodelle in CGColorSpace

CGColorSpace unterstützt vier grundlegende Farbmodelle: RGB (DeviceRGB, sRGB, Display P3), Gray (DeviceGray), CMYK (DeviceCMYK) und Lab. Jedes Modell definiert die Anzahl und Bedeutung der Farbkomponenten. RGB verwendet drei Kanäle — Rot, Grün, Blau; Gray verwendet einen Luminanzkanal; CMYK verwendet vier Kanäle für den Druck; Lab verwendet drei Kanäle: Luminanz und zwei Farbdifferenzkomponenten.

DeviceRGB und sRGB

DeviceRGB ist der gebräuchlichste Standard-Farbraum von Core Graphics. Er verwendet den Farbumfang eines Standard-LCD-Displays ohne ICC-Profilierung. Beim Erstellen eines UIView- oder NSView-Grafikkontexts weist Core Graphics automatisch DeviceRGB als Standard-Farbraum zu. sRGB ist eine ICC-profilierte Version mit festem Umfang und Gamma, die für Webinhalte empfohlen wird.

Display P3 — Breiter Farbumfang

Display P3 ist ein auf dem DCI-P3-Standard basierender Farbraum, der in modernen iOS-Geräten mit breitfarbigen Displays verwendet wird. Er deckt etwa 25% mehr sichtbare Farben ab als sRGB, insbesondere im grünen und roten Bereich des Spektrums. Für die Arbeit mit Display P3 unter iOS verwenden Sie die Konstante kCGColorSpaceDisplayP3, verfügbar ab iOS 9.3.

Erstellen und Verwalten von CGColor

CGColor wird über die Funktion CGColorCreate erstellt, die einen CGColorSpace und ein Array von CGFloat-Komponenten erhält. Die Anzahl der Komponenten hängt vom Farbmodell ab: 1 für Gray, 3 für RGB, 4 für CMYK. Nach der Erstellung ist CGColor ein unveränderliches (immutable) Objekt — Sie können seine Komponenten nicht ändern, sondern nur eine neue Farbe erstellen.

Core Graphics bietet auch die Funktionen CGColorCreateGenericRGB, CGColorCreateGenericGray und CGColorCreateGenericCMYK zum Erstellen von Farben in standardmäßigen (generischen) Farbräumen. Diese Funktionen vereinfachen den Code, da sie die explizite Erstellung eines CGColorSpace überflüssig machen. Darüber hinaus definiert Quartz 2D Konstanten für Grundfarben: kCGColorWhite, kCGColorBlack, kCGColorClear.

Beim Erstellen einer Farbe ist die Reihenfolge der Komponentenangabe wichtig — sie muss strikt der durch das Farbraummodell definierten Kanalreihenfolge entsprechen. RGB: Rot (0.0–1.0), Grün, Blau, Alpha (0.0–1.0). Gray: Luminanz, Alpha. CMYK: Cyan, Magenta, Gelb, Schwarz, Alpha. Ein Verstoß gegen die Komponentenreihenfolge führt ohne Kompilierungsfehler zu einer falschen Farbdarstellung.

Alphakanal und Transparenz

Der Alphakanal ist die vierte Komponente (oder die zweite für Gray), die die Transparenz der Farbe steuert. Der Wert 1,0 entspricht vollständiger Deckkraft, 0,0 vollständiger Transparenz. Der Alphakanal in CGColor ist optional: Die Funktion CGColorGetAlpha gibt den aktuellen Alphawert zurück, der bei Erstellung über Basisfunktionen standardmäßig 1,0 beträgt. Beim Mischen von Farben verwendet Core Graphics Alpha-Compositing nach der Porter-Duff-Source-Over-Regel.

Arbeiten mit CGColorSpace

CGColorSpace wird über Core-Graphics-Factory-Funktionen erstellt: CGColorSpaceCreateDeviceRGB, CGColorSpaceCreateDeviceGray, CGColorSpaceCreateDeviceCMYK oder CGColorSpaceCreateWithName für benannte Räume (sRGB, Display P3, Generic Gray). Das CGColorSpace-Objekt ist unveränderlich und threadsicher — dasselbe Objekt kann in mehreren Grafikkontexten verwendet werden.

Grundlegende CGColorSpace erhalten

Core Graphics stellt mehrere vordefinierte Farbräume über benannte Konstanten bereit: kCGColorSpaceSRGB, kCGColorSpaceDisplayP3, kCGColorSpaceGenericGrayGamma2_2. Diese Konstanten werden an CGColorSpaceCreateWithName übergeben. Für iOS-Geräte mit breitem Farbumfang wird Display P3 empfohlen, da sRGB die Display-Fähigkeiten möglicherweise nicht vollständig nutzt.

ICC-Profile und benutzerdefinierte CGColorSpace

ICC-Profile sind standardisierte Dateien, die die Farbeigenschaften eines Geräts beschreiben. Core Graphics ermöglicht die Erstellung eines CGColorSpace basierend auf einem beliebigen ICC-Profil über CGColorSpaceCreateWithICCProfile. Dies wird in professionellen Anwendungen für den Fotodruck und die Druckvorstufe verwendet, wo eine genaue Übereinstimmung mit einem bestimmten Drucker oder Monitor erforderlich ist.

Konvertierung zwischen Farbräumen

Core Graphics führt die Konvertierung zwischen Farbräumen während des Renderns automatisch über die Funktionen CGContextSetFillColorWithColor oder CGContextSetStrokeColorWithColor durch. Wenn sich der Farbraum des Grafikkontexts vom Farbraum des übergebenen CGColor unterscheidet, führt Quartz 2D die Konvertierung unter Verwendung der ICC-Profile beider Räume durch.

Für die explizite Farbkonvertierung verwenden Sie CGColorCreateCopyByMatchingToColorSpace — eine Funktion, die einen neuen CGColor erstellt, dessen Komponenten vom Quell- in den Zielfarbraum neu berechnet werden. Laut Apple Technical Note TN2313 (2024) werden bei der Konvertierung von Display P3 in sRGB Farben außerhalb des sRGB-Gamuts beschnitten, was zu einem Verlust an Sättigung führt. Dies ist besonders bei hellen Grün- und Rottönen bemerkbar.

ColorSync auf macOS bietet systemweites Farbmanagement auf der Grafikstack-Ebene. Wenn eine Anwendung keinen expliziten Farbraum angibt, verwendet Core Graphics den von ColorSync bezogenen Anzeigeraum. Dies stellt sicher, dass Farben auf verschiedenen Monitoren gleich aussehen, auch wenn sie unterschiedliche Farbprofile verwenden.

Swift-Codebeispiele

Betrachten wir praktische Beispiele zum Erstellen und Verwenden von CGColor und CGColorSpace in einer iOS-Anwendung. Der Code ist in Swift unter Verwendung von Core-Graphics-Funktionen geschrieben.

Erstellen von CGColor mit verschiedenen Farbräumen

Dieses Beispiel zeigt das Erstellen einer roten Farbe in drei verschiedenen Farbräumen. Trotz identischer RGB-Komponenten sieht die Farbe je nach CGColorSpace-Gamut unterschiedlich aus.

import CoreGraphics

// Farbe in DeviceRGB erstellen
let rgbSpace = CGColorSpaceCreateDeviceRGB()
let redColor = CGColorCreate(rgbSpace, [1.0, 0.0, 0.0, 1.0])

// Farbe in Display P3 erstellen
let p3Space = CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3)
let p3RedColor = CGColorCreate(p3Space, [1.0, 0.0, 0.0, 1.0])

// Graue Farbe erstellen
let graySpace = CGColorSpaceCreateDeviceGray()
let grayColor = CGColorCreate(graySpace, [0.5, 1.0])

Farbkonvertierung zwischen Farbräumen

Dieses Beispiel konvertiert eine helle Grünfarbe von Display P3 in sRGB. Bei einer solchen Konvertierung werden Farben außerhalb des sRGB-Gamuts angepasst, was den Farbton verändern kann.

let p3Space = CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3)
let sRGBSpace = CGColorSpaceCreateWithName(kCGColorSpaceSRGB)

// Helles Grün in Display P3 (außerhalb des sRGB-Gamuts)
let p3Green = CGColorCreate(p3Space, [0.0, 1.0, 0.0, 1.0])

// In sRGB konvertieren
let srgbGreen = CGColorCreateCopyByMatchingToColorSpace(
    sRGBSpace, p3Green, kCGRenderingIntentDefault
)

Verwendung von CGColor in einem Grafikkontext

Dieses Beispiel demonstriert das Zeichnen eines gefüllten Kreises mit CGColor in einem benutzerdefinierten UIView. Die Methode draw erhält den aktuellen Grafikkontext UIGraphicsGetCurrentContext, in dem die Füllfarbe festgelegt wird.

class ColorView: UIView {
    override func draw(rect: CGRect) {
        guard let ctx = UIGraphicsGetCurrentContext()
        else { return }

        let rgbSpace = CGColorSpaceCreateDeviceRGB()
        let blueColor = CGColorCreate(
            rgbSpace,
            [0.2, 0.4, 1.0, 1.0]
        )

        ctx.setFillColor(blueColor)
        ctx.fillEllipse(in: CGRect(x: 50, y: 50,
                                  width: 200, height: 200))
    }
}