CGGradient: wat het is, typen verloopkleuren en hoe ze te maken

Wat is CGGradient?

CGGradient — is een onveranderlijk object in Core Graphics dat een reeks kleuren en de regels voor het mengen ervan langs de verloopovergang inkapselt. Intern slaat CGGradient een reeks CGColor op, een reeks posities (locations) in het bereik [0.0, 1.0] en een verwijzing naar CGColorSpace waarin de kleuren worden geïnterpreteerd. Elke kleur is gekoppeld aan een positie op de verloopschaal: positie 0.0 komt overeen met het begin, 1.0 met het einde van de overgang.

Bij het maken van CGGradient via de functie CGGradientCreateWithColors voert Core Graphics een voorberekening uit van tussentijdse kleurwaarden. Het verloop kan een willekeurig aantal kleurstops bevatten, waardoor complexe meerkleurige overgangen mogelijk zijn. Het aantal kleuren moet minimaal twee zijn en elke kleur moet een overeenkomstige positie hebben in de locations-reeks.

De architectuur van CGGradient verschilt van hogere API's zoals CAGradientLayer van Core Animation doordat het direct werkt in de grafische context van Core Graphics. Dit geeft volledige controle over het tekenproces en de mogelijkheid om verloopkleuren te combineren met andere Quartz 2D-bewerkingen — knipmaskers, schaduwen en transformaties.

Lineaire en radiale verloopkleuren

Core Graphics ondersteunt twee typen verloopkleuren: lineair (axial) en radiaal (radial). Lineair verloop wordt gemaakt door de functie CGGradientCreateWithColors en getekend via CGContextDrawLinearGradient. Radiaal verloop vereist dezelfde CGGradient-structuur, maar wordt getekend via CGContextDrawRadialGradient.

Lineair verloop (Axial)

Lineair verloop strekt de kleurovergang uit langs een rechte lijn van het beginpunt startPoint naar het eindpunt endPoint. Kleuren worden geïnterpoleerd tussen deze twee punten, en buiten hun grenzen wordt het gedrag bepaald door de uitbreidingsopties. Lineair verloop is ideaal voor het maken van vloeiende achtergronden, het simuleren van metalen oppervlakken en kleurovergangen in interface-elementen.

Radiaal verloop (Radial)

Radiaal verloop creëert een kleurovergang van de ene cirkel naar de andere. Elke cirkel wordt gedefinieerd door een middelpunt (startCenter / endCenter) en een straal (startRadius / endRadius). Kleur wordt geïnterpoleerd van de binnenste cirkel naar de buitenste. Een speciaal geval — wanneer de beginstraal 0 is: het verloop verspreidt zich vanuit één punt. Radiale verloopkleuren worden gebruikt voor het simuleren van lichtbronnen, lenzen, hemellichamen en spotlight-effecten.

CGGradient maken: kleuren en posities

CGGradient wordt slechts door één basisfunctie gemaakt — CGGradientCreateWithColors. De functie ontvangt CGColorSpace, een reeks CGColor (CFArray) en een reeks CGFloat locations. Als locations NULL is, worden kleuren gelijkmatig verdeeld over de verloopschaal. Als locations is opgegeven, moet de lengte overeenkomen met het aantal kleuren.

De locations-reeks bevat waarden van 0.0 tot 1.0 die de stoppunten van elke kleur bepalen. Waarden moeten monotoon stijgen. Als de eerste waarde groter is dan 0.0, wordt de kleur van het begin tot deze positie geëxtrapoleerd uit de kleur op positie 0.0. Analoog voor de laatste waarde kleiner dan 1.0. Dit gedrag wordt bepaald door de uitbreidingsopties bij het tekenen.

Bij het kiezen van kleuren voor het verloop is het belangrijk om rekening te houden met de kleurruimte. Alle kleuren in één CGGradient moeten tot dezelfde CGColorSpace behoren — Core Graphics interpoleert componenten in deze ruimte. Als kleuren in verschillende ruimtes zijn gemaakt, moeten ze vooraf worden omgezet naar een gemeenschappelijke ruimte via CGColorCreateCopyByMatchingToColorSpace.

Het verloop tekenen in de context

Core Graphics biedt twee functies voor het tekenen van het verloop: CGContextDrawLinearGradient voor lineair en CGContextDrawRadialGradient voor radiaal. Beide functies ontvangen de grafische context, het CGGradient-object, uitbreidingsopties en typespecifieke geometrische parameters. Het tekenen gebeurt rekening houdend met de huidige knipmasker (clip) en contexttransformatie.

Uitbreidingsopties (Gradient Options)

Uitbreidingsopties bepalen het gedrag van het verloop buiten het bereik van posities 0.0–1.0. De constante kCGGradientDrawsBeforeStartLocation vult het gebied vóór de startpositie met de kleur van de eerste stop. kCGGradientDrawsAfterEndLocation — met de kleur van de laatste stop. Deze opties kunnen worden gecombineerd via een bitmasker. Voor radiaal verloop worden de opties toegepast op het gebied buiten de begin- en eindstraal.

Invloed van transformaties

Het verloop wordt getekend in het coördinatensysteem van de huidige grafische context, rekening houdend met de transformatie (CTM — Current Transformation Matrix). Toepassing van CGContextTranslateCTM, CGContextScaleCTM of CGContextRotateCTM vóór het aanroepen van de tekenfunctie verandert de positie en schaal van het verloop. Dit maakt het mogelijk om één CGGradient te hergebruiken voor verschillende gebieden zonder nieuwe objecten te maken.

Opties: uitbreiding, anti-aliasing en maskering

Core Graphics biedt verschillende extra mechanismen voor het beheren van verloopkleuren: anti-aliasing, maskering via een knipmasker (clipping mask) en combinatie met transparantie-effecten. Anti-aliasing is standaard ingeschakeld in de grafische context en wordt beheerd via CGContextSetShouldAntialias.

Knipmasker maakt het mogelijk om het tekengebied van het verloop te beperken tot een willekeurige vorm. Vóór het aanroepen van CGContextDrawLinearGradient moet een contour worden gedefinieerd via CGContextBeginPath, CGContextAddPath en CGContextClip. Het verloop wordt alleen getekend binnen het door deze contour begrensde gebied. Dit wordt veel gebruikt voor het maken van verloopiconen, knoppen en voortgangsbalken.

Uitbreiding van het verloop (extend) — nog een belangrijke parameter. Bij gebruik van kCGGradientDrawsBeforeStartLocation extrapoleert Core Graphics de kleur van de eerste stop naar het hele gebied tot startPoint. Zonder deze optie blijft het gebied buiten het verloop leeg (transparant). Combinatie van beide opties garandeert dat de hele rechthoek van de grafische context wordt gevuld met het verloop, zelfs als startPoint en endPoint zich erbinnen bevinden.

Codevoorbeelden in Swift

Laten we praktische voorbeelden bekijken van het maken en tekenen van verloopkleuren in iOS met CGGradient en Core Graphics.

Lineair verloop met drie kleuren

Het voorbeeld maakt een lineair verloop met drie kleuren (blauw, groen, rood) en tekent het diagonaal over een UIView. De locations-reeks verdeelt de kleuren ongelijkmatig: blauw van 0.0 tot 0.3, groen op 0.6, rood van 0.6 tot 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])
}

Radiaal verloop met gloei-effect

Het voorbeeld tekent een radiaal verloop dat een gloei-effect simuleert. Het beginpunt met straal nul definieert het centrum van de gloed en de buitenste cirkel de vervagingsgrens. Zo'n effect wordt gebruikt voor het verlichten van interface-elementen of activiteitsindicatoren.

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

Verloop met knipmasker

In dit voorbeeld wordt het verloop beperkt tot een cirkelvormig gebied via een knipcontour. Vóór het tekenen van het verloop wordt een cirkelvormig pad gedefinieerd dat het huidige masker van de context wordt. Het verloop vult alleen het gebied binnen de cirkel, waardoor een verloopicooneffect ontstaat.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Cirkelvormig knipad maken
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Verloop tekenen binnen knipmasker
    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])
}