CGGradient: mi ez, színátmenet típusai és létrehozásuk

Mi az a CGGradient?

CGGradient — egy megváltoztathatatlan objektum a Core Graphics-ben, amely színek halmazát és azok keverési szabályait foglalja magába a színátmenet mentén. Belsőleg a CGGradient egy CGColor tömböt, egy pozíció (locations) tömböt a [0.0, 1.0] tartományban, és egy hivatkozást a CGColorSpace-re tárol, amelyben a színek értelmezésre kerülnek. Minden szín egy pozícióhoz van kötve a színátmenet skáláján: a 0.0 pozíció a kezdetnek, 1.0 — az átmenet végének felel meg.

A CGGradient létrehozásakor a CGGradientCreateWithColors függvényen keresztül a Core Graphics előre kiszámítja a színek köztes értékeit. A színátmenet tetszőleges számú színmegállót (color stops) tartalmazhat, ami összetett több színű átmenetek létrehozását teszi lehetővé. A színek számának legalább kettőnek kell lennie, és minden színhez tartoznia kell egy pozíciónak a locations tömbben.

A CGGradient architektúrája eltér a magasabb szintű API-któl, mint a Core Animation-ből származó CAGradientLayer, mivel közvetlenül a Core Graphics grafikus kontextusában működik. Ez teljes irányítást biztosít a rajzolási folyamat felett és lehetőséget ad a színátmenetek kombinálására más Quartz 2D műveletekkel — vágómaszkokkal, árnyékokkal és transzformációkkal.

Lineáris és radiális színátmenetek

Core Graphics két típusú színátmenetet támogat: lineáris (axial) és radiális (radial). A lineáris színátmenetet a CGGradientCreateWithColors függvény hozza létre, és a CGContextDrawLinearGradient rajzolja ki. A radiális színátmenet ugyanazt a CGGradient struktúrát igényli, de a CGContextDrawRadialGradient rajzolja ki.

Lineáris színátmenet (Axial)

Lineáris színátmenet a színátmenetet egy egyenes mentén nyújtja a kezdőponttól startPoint a végpontig endPoint. A színek e két pont között interpolálódnak, és a határokon túli viselkedést a kiterjesztési opciók szabályozzák. A lineáris színátmenet ideális sima hátterek, fémfelületek szimulálása és színátmenetek létrehozásához interfész elemekben.

Radiális színátmenet (Radial)

Radiális színátmenet színátmenetet hoz létre egyik körből a másikba. Minden kört a középpont (startCenter / endCenter) és a sugár (startRadius / endRadius) határoz meg. A szín a belső körtől a külső felé interpolálódik. Különleges eset — amikor a kezdeti sugár 0: a színátmenet egy pontból terjed szét. A radiális színátmeneteket fényforrások, lencsék, égitestek és spotlámpa effektusok szimulálására használják.

CGGradient létrehozása: színek és pozíciók

CGGradient csak egy alapfüggvény által jön létre — CGGradientCreateWithColors. A függvény elfogadja a CGColorSpace-t, egy CGColor tömböt (CFArray) és egy CGFloat locations tömböt. Ha a locations NULL, a színek egyenletesen oszlanak el a színátmenet skáláján. Ha a locations meg van adva, a hosszának meg kell egyeznie a színek számával.

A locations tömb 0.0-tól 1.0-ig terjedő értékeket tartalmaz, amelyek meghatározzák az egyes színek megállási pontjait. Az értékeknek monoton növekedniük kell. Ha az első érték nagyobb, mint 0.0, a szín a kezdettől e pozícióig a 0.0 pozíción lévő színből extrapolálódik. Hasonlóan az utolsó értékhez, ha az kisebb, mint 1.0. Ezt a viselkedést a kiterjesztési opciók szabályozzák rajzoláskor.

A színek kiválasztásakor fontos figyelembe venni a színteret. Egy CGGradient-ben lévő összes színnek ugyanahhoz a CGColorSpace-hez kell tartoznia — a Core Graphics a komponensek interpolációját ebben a térben végzi. Ha a színek különböző terekben jöttek létre, azokat előre át kell alakítani egy közös térbe a CGColorCreateCopyByMatchingToColorSpace segítségével.

Színátmenet rajzolása a kontextusban

Core Graphics két függvényt biztosít a színátmenet rajzolásához: CGContextDrawLinearGradient a lineáris és CGContextDrawRadialGradient a radiális számára. Mindkét függvény elfogadja a grafikus kontextust, a CGGradient objektumot, a kiterjesztési opciókat és a típus-specifikus geometriai paramétereket. A rajzolás a jelenlegi vágómaszk (clip) és a kontextus transzformációjának figyelembevételével történik.

Kiterjesztési opciók (Gradient Options)

Kiterjesztési opciók szabályozzák a színátmenet viselkedését a 0.0–1.0 pozíció tartományon kívül. A kCGGradientDrawsBeforeStartLocation konstans kitölti a kezdő pozíció előtti területet az első megálló színével. A kCGGradientDrawsAfterEndLocation — az utolsó megálló színével. Ezek az opciók bitmaszkon keresztül kombinálhatók. Radiális színátmenet esetén az opciók a kezdeti és vég sugáron kívüli területre vonatkoznak.

Transzformációk hatása

A színátmenet rajzolódik az aktuális grafikus kontextus koordináta-rendszerében, annak transzformációját (CTM — Current Transformation Matrix) figyelembe véve. A CGContextTranslateCTM, CGContextScaleCTM vagy CGContextRotateCTM alkalmazása a rajzoló függvény meghívása előtt megváltoztatja a színátmenet pozícióját és méretarányát. Ez lehetővé teszi egy CGGradient újrafelhasználását különböző területekhez anélkül, hogy új objektumokat kellene létrehozni.

Opciók: kiterjesztés, élsimítás és maszkolás

Core Graphics több további mechanizmust biztosít a színátmenetek kezeléséhez: élsimítás (antialiasing), maszkolás vágómaszkon (clipping mask) keresztül, és kombinálás átlátszósági effektusokkal. Az élsimítás alapértelmezetten engedélyezve van a grafikus kontextusban, és a CGContextSetShouldAntialias segítségével szabályozható.

Vágómaszk lehetővé teszi a színátmenet rajzolási területének tetszőleges alakra való korlátozását. A CGContextDrawLinearGradient meghívása előtt egy kontúrt kell meghatározni a CGContextBeginPath, CGContextAddPath és CGContextClip segítségével. A színátmenet csak a kontúr által határolt területen belül rajzolódik ki. Ezt széles körben használják színátmenetes ikonok, gombok és folyamatjelző sávok létrehozására.

Színátmenet kiterjesztése (extend) — egy másik fontos paraméter. A kCGGradientDrawsBeforeStartLocation használatakor a Core Graphics extrapolálja az első megálló színét a startPoint-ig terjedő teljes területre. Ezen opció nélkül a színátmeneten kívüli terület kitöltetlen (átlátszó) marad. Mindkét opció kombinációja garantálja, hogy a grafikus kontextus teljes téglalapja ki lesz töltve színátmenettel, még akkor is, ha a startPoint és endPoint azon belül található.

Kódpéldák Swift-ben

Nézzük meg a gyakorlati példákat színátmenetek létrehozására és rajzolására iOS-ben a CGGradient és Core Graphics használatával.

Lineáris színátmenet három színnel

A példa egy lineáris színátmenetet hoz létre három színnel (kék, zöld, piros), és átlósan rajzolja ki egy UIView-ben. A locations tömb egyenlőtlenül osztja el a színeket: kék 0.0-tól 0.3-ig, zöld 0.6-nál, piros 0.6-tól 1.0-ig.

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ális színátmenet fényeffektussal

A példa egy radiális színátmenetet rajzol, amely fényt szimulál. A nulla sugarú kezdőpont határozza meg a fény középpontját, a külső kör pedig a csillapodás határát. Az ilyen effektust interfész elemek kiemelésére vagy aktivitásjelzőkhöz használják.

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

Színátmenet vágómaszkkal

Ebben a példában a színátmenet egy kör alakú területre van korlátozva egy vágókontúron keresztül. A színátmenet rajzolása előtt egy kör alakú útvonal kerül meghatározásra, amely a kontextus aktuális maszkjává válik. A színátmenet csak a körön belüli területet tölti ki, létrehozva a színátmenetes ikon effektust.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Kör alakú vágóútvonal létrehozása
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Színátmenet rajzolása a vágómaszkon belül
    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])
}