CGGradient: co to je, typy přechodů a jejich vytváření

Co je CGGradient?

CGGradient — je neměnný objekt v Core Graphics, který zapouzdřuje sadu barev a pravidla jejich míchání podél přechodového rozhraní. Interně CGGradient ukládá pole CGColor, pole pozic (locations) v rozsahu [0.0, 1.0] a odkaz na CGColorSpace, ve kterém jsou barvy interpretovány. Každá barva je svázána s pozicí na stupnici přechodu: pozice 0.0 odpovídá začátku, 1.0 — konci přechodu.

Při vytváření CGGradient prostřednictvím funkce CGGradientCreateWithColors provádí Core Graphics předvýpočet mezilehlých hodnot barev. Přechod může obsahovat libovolný počet barevných zastavení (color stops), což umožňuje vytvářet složité vícebarevné přechody. Počet barev musí být alespoň dvě a každé barvě musí odpovídat pozice v poli locations.

Architektura CGGradient se liší od API vyšší úrovně, jako je CAGradientLayer z Core Animation, tím, že pracuje přímo v grafickém kontextu Core Graphics. To poskytuje plnou kontrolu nad procesem kreslení a možnost kombinovat přechody s dalšími operacemi Quartz 2D — ořezovými maskami, stíny a transformacemi.

Lineární a radiální přechody

Core Graphics podporuje dva typy přechodů: lineární (axial) a radiální (radial). Lineární přechod je vytvářen funkcí CGGradientCreateWithColors a kreslen přes CGContextDrawLinearGradient. Radiální přechod vyžaduje stejnou strukturu CGGradient, ale je kreslen přes CGContextDrawRadialGradient.

Lineární přechod (Axial)

Lineární přechod natahuje barevný přechod podél přímky od počátečního bodu startPoint do koncového bodu endPoint. Barvy jsou interpolovány mezi těmito dvěma body a mimo jejich hranice je chování řízeno možnostmi prodloužení. Lineární přechod je ideální pro vytváření hladkých pozadí, simulaci kovových povrchů a barevných přechodů v prvcích rozhraní.

Radiální přechod (Radial)

Radiální přechod vytváří barevný přechod od jednoho kruhu k druhému. Každý kruh je definován středem (startCenter / endCenter) a poloměrem (startRadius / endRadius). Barva je interpolována od vnitřního kruhu k vnějšímu. Zvláštní případ — když je počáteční poloměr 0: přechod se šíří z jednoho bodu. Radiální přechody se používají pro simulaci světelných zdrojů, čoček, nebeských těles a spotlight efektů.

Vytvoření CGGradient: barvy a pozice

CGGradient je vytvářen pouze jednou základní funkcí — CGGradientCreateWithColors. Funkce přijímá CGColorSpace, pole CGColor (CFArray) a pole CGFloat locations. Pokud je locations NULL, barvy jsou rovnoměrně rozmístěny po stupnici přechodu. Pokud je locations zadáno, jeho délka musí odpovídat počtu barev.

Pole locations obsahuje hodnoty od 0.0 do 1.0, které určují body zastavení každé barvy. Hodnoty musí monotónně růst. Pokud je první hodnota větší než 0.0, barva od začátku do této pozice je extrapolována z barvy na pozici 0.0. Podobně pro poslední hodnotu menší než 1.0. Toto chování je řízeno možnostmi prodloužení při kreslení.

Při výběru barev pro přechod je důležité zvážit barevný prostor. Všechny barvy v jednom CGGradient musí patřit do stejného CGColorSpace — Core Graphics provádí interpolaci složek v tomto prostoru. Pokud byly barvy vytvořeny v různých prostorech, je třeba je předem převést do společného prostoru pomocí CGColorCreateCopyByMatchingToColorSpace.

Kreslení přechodu v kontextu

Core Graphics poskytuje dvě funkce pro kreslení přechodu: CGContextDrawLinearGradient pro lineární a CGContextDrawRadialGradient pro radiální. Obě funkce přijímají grafický kontext, objekt CGGradient, možnosti prodloužení a geometrické parametry specifické pro typ. Kreslení se provádí s ohledem na aktuální ořezovou masku (clip) a transformaci kontextu.

Možnosti prodloužení (Gradient Options)

Možnosti prodloužení řídí chování přechodu mimo rozsah pozic 0.0–1.0. Konstanta kCGGradientDrawsBeforeStartLocation vyplňuje oblast před počáteční pozicí barvou prvního zastavení. kCGGradientDrawsAfterEndLocation — barvou posledního zastavení. Tyto možnosti lze kombinovat pomocí bitové masky. Pro radiální přechod se možnosti aplikují na oblast mimo počáteční a koncový poloměr.

Vliv transformací

Přechod je kreslen v souřadnicovém systému aktuálního grafického kontextu s ohledem na jeho transformaci (CTM — Current Transformation Matrix). Aplikace CGContextTranslateCTM, CGContextScaleCTM nebo CGContextRotateCTM před voláním funkce kreslení mění polohu a měřítko přechodu. To umožňuje opakované použití jednoho CGGradient pro různé oblasti bez vytváření nových objektů.

Možnosti: prodloužení, vyhlazování a maskování

Core Graphics poskytuje několik dalších mechanismů pro správu přechodů: vyhlazování (antialiasing), maskování pomocí ořezové masky (clipping mask) a kombinování s efekty průhlednosti. Vyhlazování je ve výchozím nastavení zapnuto v grafickém kontextu a je řízeno pomocí CGContextSetShouldAntialias.

Ořezová maska umožňuje omezit oblast kreslení přechodu na libovolný tvar. Před voláním CGContextDrawLinearGradient je třeba definovat obrys pomocí CGContextBeginPath, CGContextAddPath a CGContextClip. Přechod bude nakreslen pouze uvnitř oblasti ohraničené tímto obrysem. To je široce používáno pro vytváření přechodových ikon, tlačítek a indikátorů průběhu.

Prodloužení přechodu (extend) — další důležitý parametr. Při použití kCGGradientDrawsBeforeStartLocation Core Graphics extrapoluje barvu prvního zastavení na celou oblast až do startPoint. Bez této možnosti zůstává oblast mimo přechod nevyplněná (průhledná). Kombinace obou možností zaručuje, že celý obdélník grafického kontextu bude vyplněn přechodem, i když se startPoint a endPoint nacházejí uvnitř něj.

Příklady kódu ve Swift

Podívejme se na praktické příklady vytváření a kreslení přechodů v iOS pomocí CGGradient a Core Graphics.

Lineární přechod se třemi barvami

Příklad vytváří lineární přechod se třemi barvami (modrá, zelená, červená) a kreslí jej diagonálně v UIView. Pole locations rozmístí barvy nerovnoměrně: modrá od 0.0 do 0.3, zelená na 0.6, červená 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])
}

Radiální přechod s efektem záře

Příklad kreslí radiální přechod, který simuluje záři. Počáteční bod s nulovým poloměrem nastavuje centrum záře a vnější kruh — hranici útlumu. Takový efekt se používá pro osvětlení prvků rozhraní nebo indikátorů aktivity.

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

Přechod s ořezovou maskou

V tomto příkladu je přechod omezen na kruhovou oblast pomocí ořezového obrysu. Před kreslením přechodu je definována kruhová cesta, která se stává aktuální maskou kontextu. Přechod vyplňuje pouze oblast uvnitř kruhu, čímž vytváří efekt přechodové ikony.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Vytvoření kruhové ořezové cesty
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Kreslení přechodu uvnitř ořezové masky
    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])
}