CGGradient: vad det är, typer av övertoningar och hur de skapas

Vad är CGGradient?

CGGradient — är ett oföränderligt objekt i Core Graphics som kapslar in en uppsättning färger och reglerna för deras blandning längs övertoningsövergången. Internt lagrar CGGradient en array av CGColor, en array av positioner (locations) i intervallet [0.0, 1.0] och en referens till CGColorSpace där färgerna tolkas. Varje färg är bunden till en position på övertoningsskalan: position 0.0 motsvarar början, 1.0 — slutet av övergången.

Vid skapandet av CGGradient via funktionen CGGradientCreateWithColors utför Core Graphics förberäkning av mellanliggande färgvärden. Övertoningen kan innehålla ett godtyckligt antal färgstopp (color stops), vilket möjliggör skapandet av komplexa flerfärgade övergångar. Antalet färger måste vara minst två, och varje färg måste ha en motsvarande position i locations-arrayen.

Arkitekturen för CGGradient skiljer sig från API:er på högre nivå, såsom CAGradientLayer från Core Animation, genom att den arbetar direkt i Core Graphics grafiska kontext. Detta ger full kontroll över ritprocessen och möjlighet att kombinera övertoningar med andra Quartz 2D-operationer — klippmasker, skuggor och transformationer.

Linjära och radiella övertoningar

Core Graphics stöder två typer av övertoningar: linjär (axial) och radiell (radial). Linjär övertoning skapas av funktionen CGGradientCreateWithColors och ritas via CGContextDrawLinearGradient. Radiell övertoning kräver samma CGGradient-struktur, men ritas via CGContextDrawRadialGradient.

Linjär övertoning (Axial)

Linjär övertoning sträcker färgövergången längs en rak linje från startpunkten startPoint till slutpunkten endPoint. Färger interpoleras mellan dessa två punkter, och utanför deras gränser styrs beteendet av förlängningsalternativen. Linjär övertoning är idealisk för att skapa mjuka bakgrunder, simulera metallytor och färgövergångar i gränssnittselement.

Radiell övertoning (Radial)

Radiell övertoning skapar en färgövergång från en cirkel till en annan. Varje cirkel definieras av centrum (startCenter / endCenter) och radie (startRadius / endRadius). Färg interpoleras från den inre cirkeln till den yttre. Ett specialfall — när startradien är 0: övertoningen sprider sig från en punkt. Radiella övertoningar används för simulering av ljuskällor, linser, himlakroppar och spotlight-effekter.

Skapa CGGradient: färger och positioner

CGGradient skapas endast av en grundläggande funktion — CGGradientCreateWithColors. Funktionen tar emot CGColorSpace, en array av CGColor (CFArray) och en array av CGFloat locations. Om locations är NULL fördelas färgerna jämnt över övertoningsskalan. Om locations anges måste dess längd överensstämma med antalet färger.

Arrayen locations innehåller värden från 0.0 till 1.0 som bestämmer stopppunkterna för varje färg. Värdena måste öka monotont. Om det första värdet är större än 0.0, extrapoleras färgen från början till denna position från färgen vid position 0.0. På samma sätt för det sista värdet mindre än 1.0. Detta beteende styrs av förlängningsalternativen vid ritning.

Vid val av färger för övertoningen är det viktigt att ta hänsyn till färgrymden. Alla färger i en CGGradient måste tillhöra samma CGColorSpace — Core Graphics interpolerar komponenter i denna rymd. Om färger har skapats i olika rymder måste de i förväg konverteras till en gemensam rymd via CGColorCreateCopyByMatchingToColorSpace.

Rita övertoningen i kontexten

Core Graphics tillhandahåller två funktioner för att rita övertoningen: CGContextDrawLinearGradient för linjär och CGContextDrawRadialGradient för radiell. Båda funktionerna tar emot den grafiska kontexten, CGGradient-objektet, förlängningsalternativ och typspecifika geometriska parametrar. Ritningen utförs med hänsyn till den aktuella klippmasken (clip) och kontexttransformationen.

Förlängningsalternativ (Gradient Options)

Förlängningsalternativen styr övertoningens beteende utanför positionsintervallet 0.0–1.0. Konstanten kCGGradientDrawsBeforeStartLocation fyller området före startpositionen med färgen från det första stoppet. kCGGradientDrawsAfterEndLocation — med färgen från det sista stoppet. Dessa alternativ kan kombineras via en bitmask. För radiell övertoning tillämpas alternativen på området utanför start- och slutradien.

Inverkan av transformationer

Övertoningen ritas i det aktuella grafiska kontextens koordinatsystem med hänsyn till dess transformation (CTM — Current Transformation Matrix). Tillämpning av CGContextTranslateCTM, CGContextScaleCTM eller CGContextRotateCTM före anrop av ritfunktionen ändrar övertoningens position och skala. Detta gör det möjligt att återanvända en CGGradient för olika områden utan att skapa nya objekt.

Alternativ: förlängning, kantutjämning och maskning

Core Graphics tillhandahåller flera ytterligare mekanismer för hantering av övertoningar: kantutjämning (antialiasing), maskning via klippmask (clipping mask) och kombination med transparenseffekter. Kantutjämning är som standard aktiverad i den grafiska kontexten och styrs via CGContextSetShouldAntialias.

Klippmask gör det möjligt att begränsa övertoningens ritområde till en godtycklig form. Före anrop av CGContextDrawLinearGradient måste en kontur definieras via CGContextBeginPath, CGContextAddPath och CGContextClip. Övertoningen ritas endast inom det område som begränsas av denna kontur. Detta används i stor utsträckning för att skapa övertoningsikoner, knappar och förloppsindikatorer.

Förlängning av övertoningen (extend) — ytterligare en viktig parameter. Vid användning av kCGGradientDrawsBeforeStartLocation extrapolerar Core Graphics färgen från det första stoppet över hela området fram till startPoint. Utan detta alternativ förblir området utanför övertoningen ofyllt (transparent). Kombinationen av båda alternativen garanterar att hela rektangeln i den grafiska kontexten fylls med övertoningen, även om startPoint och endPoint befinner sig inuti den.

Kodexempel i Swift

Låt oss titta på praktiska exempel på att skapa och rita övertoningar i iOS med CGGradient och Core Graphics.

Linjär övertoning med tre färger

Exemplet skapar en linjär övertoning med tre färger (blå, grön, röd) och ritar den diagonalt i en UIView. Locations-arrayen fördelar färgerna ojämnt: blå från 0.0 till 0.3, grön vid 0.6, röd från 0.6 till 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])
}

Radiell övertoning med glödeffekt

Exemplet ritar en radiell övertoning som simulerar glöd. Startpunkten med noll radie definierar glödens centrum och den yttre cirkeln — dämpningsgränsen. En sådan effekt används för belysning av gränssnittselement eller aktivitetsindikatorer.

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

Övertoning med klippmask

I detta exempel begränsas övertoningen till ett cirkulärt område via en klippkontur. Före ritning av övertoningen definieras en cirkulär bana som blir kontextens aktuella mask. Övertoningen fyller endast området innanför cirkeln, vilket skapar en övertoningsikoneffekt.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Skapa cirkulär klippbana
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Rita övertoning inuti klippmask
    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])
}