CGGradient: czym jest, typy gradientów i ich tworzenie

Co to jest CGGradient?

CGGradient — to niezmienny obiekt w Core Graphics, hermetyzujący zestaw kolorów i zasady ich mieszania wzdłuż przejścia gradientowego. Wewnętrznie CGGradient przechowuje tablicę CGColor, tablicę pozycji (locations) w zakresie [0.0, 1.0] oraz odniesienie do CGColorSpace, w którym interpretowane są kolory. Każdy kolor jest powiązany z pozycją na skali gradientu: pozycja 0.0 odpowiada początkowi, 1.0 — końcowi przejścia.

Podczas tworzenia CGGradient za pomocą funkcji CGGradientCreateWithColors Core Graphics wykonuje wstępne obliczenie pośrednich wartości kolorów. Gradient może zawierać dowolną liczbę zatrzymań kolorów (color stops), co pozwala tworzyć złożone wielokolorowe przejścia. Liczba kolorów musi wynosić co najmniej dwa, a każdemu kolorowi musi odpowiadać pozycja w tablicy locations.

Architektura CGGradient różni się od wyższych poziomów API, takich jak CAGradientLayer z Core Animation, tym, że działa bezpośrednio w kontekście graficznym Core Graphics. Daje to pełną kontrolę nad procesem rysowania i możliwość łączenia gradientów z innymi operacjami Quartz 2D — maskami przycinającymi, cieniami i transformacjami.

Gradienty liniowe i radialne

Core Graphics obsługuje dwa typy gradientów: liniowy (axial) i radialny (radial). Gradient liniowy jest tworzony przez funkcję CGGradientCreateWithColors i rysowany przez CGContextDrawLinearGradient. Gradient radialny wymaga tej samej struktury CGGradient, ale jest rysowany przez CGContextDrawRadialGradient.

Gradient liniowy (Axial)

Gradient liniowy rozciąga przejście koloru wzdłuż linii prostej od punktu początkowego startPoint do końcowego endPoint. Kolory są interpolowane między tymi dwoma punktami, a poza ich zakresem zachowanie jest kontrolowane przez opcje rozszerzania. Gradient liniowy idealnie nadaje się do tworzenia gładkich tła, imitacji metalicznych powierzchni i przejść kolorów w elementach interfejsu.

Gradient radialny (Radial)

Gradient radialny tworzy przejście koloru od jednego okręgu do drugiego. Każdy okrąg jest określony przez środek (startCenter / endCenter) i promień (startRadius / endRadius). Kolor jest interpolowany od wewnętrznego okręgu do zewnętrznego. Szczególnym przypadkiem jest, gdy początkowy promień wynosi 0: gradient rozchodzi się z jednego punktu. Gradienty radialne są używane do symulacji źródeł światła, soczewek, ciał niebieskich i efektów spotlight.

Tworzenie CGGradient: kolory i pozycje

CGGradient jest tworzony tylko przez jedną podstawową funkcję — CGGradientCreateWithColors. Funkcja przyjmuje CGColorSpace, tablicę CGColor (CFArray) i tablicę CGFloat locations. Jeśli locations jest NULL, kolory są rozmieszczane równomiernie na skali gradientu. Jeśli locations jest podana, jej długość musi odpowiadać liczbie kolorów.

Tablica locations zawiera wartości od 0.0 do 1.0, określające punkty zatrzymania każdego koloru. Wartości muszą monotonicznie rosnąć. Jeśli pierwsza wartość jest większa niż 0.0, kolor od początku do tej pozycji jest ekstrapolowany z koloru na pozycji 0.0. Analogicznie dla ostatniej wartości mniejszej niż 1.0. To zachowanie jest kontrolowane przez opcje rozszerzania podczas rysowania.

Przy wyborze kolorów dla gradientu ważne jest uwzględnienie przestrzeni kolorów. Wszystkie kolory w jednym CGGradient muszą należeć do tego samego CGColorSpace — Core Graphics wykonuje interpolację składowych w tej przestrzeni. Jeśli kolory zostały utworzone w różnych przestrzeniach, należy wcześniej przekształcić je do wspólnej przestrzeni przez CGColorCreateCopyByMatchingToColorSpace.

Rysowanie gradientu w kontekście

Core Graphics udostępnia dwie funkcje do rysowania gradientu: CGContextDrawLinearGradient dla liniowego i CGContextDrawRadialGradient dla radialnego. Obie funkcje przyjmują kontekst graficzny, obiekt CGGradient, opcje rozszerzania oraz specyficzne dla typu parametry geometryczne. Rysowanie jest wykonywane z uwzględnieniem bieżącej maski przycinającej (clip) i transformacji kontekstu.

Opcje rozszerzania (Gradient Options)

Opcje rozszerzania kontrolują zachowanie gradientu poza zakresem pozycji 0.0–1.0. Stała kCGGradientDrawsBeforeStartLocation wypełnia obszar przed pozycją początkową kolorem pierwszego zatrzymania. kCGGradientDrawsAfterEndLocation — kolorem ostatniego zatrzymania. Opcje te można łączyć przez maskę bitową. Dla gradientu radialnego opcje stosuje się do obszaru poza promieniem początkowym i końcowym.

Wpływ transformacji

Gradient jest rysowany w układzie współrzędnych bieżącego kontekstu graficznego z uwzględnieniem jego transformacji (CTM — Current Transformation Matrix). Zastosowanie CGContextTranslateCTM, CGContextScaleCTM lub CGContextRotateCTM przed wywołaniem funkcji rysowania zmienia położenie i skalę gradientu. Pozwala to na ponowne użycie jednego CGGradient dla różnych obszarów bez tworzenia nowych obiektów.

Opcje: rozszerzanie, wygładzanie i maskowanie

Core Graphics udostępnia kilka dodatkowych mechanizmów zarządzania gradientami: wygładzanie (antialiasing), maskowanie przez maskę przycinającą (clipping mask) i łączenie z efektami przezroczystości. Wygładzanie jest domyślnie włączone w kontekście graficznym i jest kontrolowane przez CGContextSetShouldAntialias.

Maska przycinająca pozwala ograniczyć obszar rysowania gradientu do dowolnego kształtu. Przed wywołaniem CGContextDrawLinearGradient należy zdefiniować ścieżkę przez CGContextBeginPath, CGContextAddPath i CGContextClip. Gradient zostanie narysowany tylko wewnątrz obszaru ograniczonego tą ścieżką. Jest to szeroko stosowane do tworzenia gradientowych ikon, przycisków i pasków postępu.

Rozszerzanie gradientu (extend) — to kolejny ważny parametr. Przy użyciu kCGGradientDrawsBeforeStartLocation Core Graphics ekstrapoluje kolor pierwszego zatrzymania na cały obszar do startPoint. Bez tej opcji obszar poza gradientem pozostaje niewypełniony (przezroczysty). Połączenie obu opcji gwarantuje, że cały prostokąt kontekstu graficznego zostanie wypełniony gradientem, nawet jeśli startPoint i endPoint znajdują się wewnątrz niego.

Przykłady kodu w Swift

Rozważmy praktyczne przykłady tworzenia i rysowania gradientów w iOS z użyciem CGGradient i Core Graphics.

Gradient liniowy z trzema kolorami

Przykład tworzy gradient liniowy z trzema kolorami (niebieski, zielony, czerwony) i rysuje go po przekątnej UIView. Tablica locations rozmieszcza kolory nierównomiernie: niebieski od 0.0 do 0.3, zielony na 0.6, czerwony od 0.6 do 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])
}

Gradient radialny z efektem świecenia

Przykład rysuje gradient radialny, imitujący świecenie. Punkt początkowy z zerowym promieniem określa centrum świecenia, a zewnętrzny okrąg — granicę wygaszania. Taki efekt jest używany do podświetlania elementów interfejsu lub wskaźników aktywności.

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

Gradient z maską przycinającą

W tym przykładzie gradient jest ograniczony do okrągłego obszaru przez ścieżkę przycinającą. Przed rysowaniem gradientu definiowana jest okrągła ścieżka, która staje się bieżącą maską kontekstu. Gradient wypełnia tylko obszar wewnątrz okręgu, tworząc efekt gradientowej ikony.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Tworzenie okrągłej ścieżki przycinającej
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Rysowanie gradientu wewnątrz maski przycinającej
    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])
}