CGGradient: шта је то, типови градијената и њихово креирање

Шта је CGGradient?

CGGradient — је непроменљиви објекат у Core Graphics, који инкапсулира скуп боја и правила њиховог мешања дуж градијентног прелаза. Унутрашње, CGGradient чува низ CGColor, низ позиција (locations) у опсегу [0.0, 1.0] и референцу на CGColorSpace у којем се интерпретирају боје. Свака боја је повезана са позицијом на скали градијента: позиција 0.0 одговара почетку, 1.0 — крају прелаза.

Приликом креирања CGGradient кроз функцију CGGradientCreateWithColors, Core Graphics врши прорачун међувредности боја. Градијент може садржати произвољан број заустављања боја (color stops), што омогућава креирање сложених вишебојних прелаза. Број боја мора бити најмање две, и свакој боји мора одговарати позиција у низу locations.

Архитектура CGGradient се разликује од API-ја вишег нивоа, као што је CAGradientLayer из Core Animation, по томе што ради директно у графичком контексту Core Graphics. Ово даје потпуну контролу над процесом цртања и могућност комбиновања градијената са другим операцијама Quartz 2D — маскама за изрезивање, сенкама и трансформацијама.

Линеарни и радијални градијенти

Core Graphics подржава два типа градијената: линеарни (axial) и радијални (radial). Линеарни градијент се креира функцијом CGGradientCreateWithColors и црта се кроз CGContextDrawLinearGradient. Радијални градијент захтева исту структуру CGGradient, али се црта кроз CGContextDrawRadialGradient.

Линеарни градијент (Axial)

Линеарни градијент растеже прелаз боје дуж праве линије од почетне тачке startPoint до крајње endPoint. Боје се интерполирају између ове две тачке, а ван њихових граница понашање се контролише опцијама продужења. Линеарни градијент је идеалан за креирање глатких позадина, имитацију металних површина и прелаза боја у елементима интерфејса.

Радијални градијент (Radial)

Радијални градијент ствара прелаз боје од једног круга до другог. Сваки круг је дефинисан центром (startCenter / endCenter) и полупречником (startRadius / endRadius). Боја се интерполира од унутрашњег круга ка спољашњем. Посебан случај — када је почетни полупречник 0: градијент се шири из једне тачке. Радијални градијенти се користе за имитацију извора светлости, сочива, небеских тела и spotlight ефеката.

Креирање CGGradient: боје и позиције

CGGradient се креира само једном основном функцијом — CGGradientCreateWithColors. Функција прима CGColorSpace, низ CGColor (CFArray) и низ CGFloat locations. Ако је locations NULL, боје се равномерно распоређују на скали градијента. Ако је locations задат, његова дужина мора одговарати броју боја.

Низ locations садржи вредности од 0.0 до 1.0, које одређују тачке заустављања сваке боје. Вредности морају монотоно расти. Ако је прва вредност већа од 0.0, боја од почетка до ове позиције се екстраполира из боје на позицији 0.0. Слично за последњу вредност мању од 1.0. Ово понашање се контролише опцијама продужења при цртању.

При избору боја за градијент важно је узети у обзир простор боја. Све боје у једном CGGradient морају припадати истом CGColorSpace — Core Graphics врши интерполацију компоненти у том простору. Ако су боје креиране у различитим просторима, потребно их је претходно конвертовати у заједнички простор кроз CGColorCreateCopyByMatchingToColorSpace.

Цртање градијента у контексту

Core Graphics пружа две функције за цртање градијента: CGContextDrawLinearGradient за линеарни и CGContextDrawRadialGradient за радијални. Обе функције примају графички контекст, објекат CGGradient, опције продужења и геометријске параметре специфичне за тип. Цртање се врши узимајући у обзир тренутну маску за изрезивање (clip) и трансформацију контекста.

Опције продужења (Gradient Options)

Опције продужења контролишу понашање градијента ван опсега позиција 0.0–1.0. Константа kCGGradientDrawsBeforeStartLocation попуњава област пре почетне позиције бојом првог заустављања. kCGGradientDrawsAfterEndLocation — бојом последњег заустављања. Ове опције се могу комбиновати кроз битску маску. За радијални градијент, опције се примењују на област ван почетног и крајњег полупречника.

Утицај трансформација

Градијент се црта у координатном систему тренутног графичког контекста узимајући у обзир његову трансформацију (CTM — Current Transformation Matrix). Примена CGContextTranslateCTM, CGContextScaleCTM или CGContextRotateCTM пре позивања функције цртања мења положај и размеру градијента. Ово омогућава поновну употребу једног CGGradient за различите области без креирања нових објеката.

Опције: продужење, изглађивање и маскирање

Core Graphics пружа неколико додатних механизама за управљање градијентима: изглађивање (antialiasing), маскирање кроз маску за изрезивање (clipping mask) и комбиновање са ефектима провидности. Изглађивање је подразумевано укључено у графичком контексту и контролише се кроз CGContextSetShouldAntialias.

Маска за изрезивање омогућава ограничавање области цртања градијента на произвољан облик. Пре позивања CGContextDrawLinearGradient потребно је дефинисати контуру кроз CGContextBeginPath, CGContextAddPath и CGContextClip. Градијент ће бити нацртан само унутар области ограничене овом контуром. Ово се широко користи за креирање градијентних икона, дугмади и трака напретка.

Продужење градијента (extend) — још један важан параметар. При коришћењу kCGGradientDrawsBeforeStartLocation, Core Graphics екстраполира боју првог заустављања на целу област до startPoint. Без ове опције, област ван градијента остаје непопуњена (провидна). Комбинација обе опције гарантује да ће цео правоугаоник графичког контекста бити попуњен градијентом, чак и ако су startPoint и endPoint унутар њега.

Примери кода у Swift

Размотримо практичне примере креирања и цртања градијената у iOS-у коришћењем CGGradient и Core Graphics.

Линеарни градијент са три боје

Пример креира линеарни градијент са три боје (плава, зелена, црвена) и црта га по дијагонали UIView. Низ locations распоређује боје неравномерно: плава од 0.0 до 0.3, зелена на 0.6, црвена од 0.6 до 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])
}

Радијални градијент са ефектом сјаја

Пример црта радијални градијент, који имитира сјај. Почетна тачка са нултим полупречником поставља центар сјаја, а спољашњи круг — границу слабљења. Такав ефекат се користи за осветљавање елемената интерфејса или индикатора активности.

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

Градијент са маском за изрезивање

У овом примеру, градијент је ограничен кружном облашћу кроз контуру за изрезивање. Пре цртања градијента дефинише се кружна путања која постаје тренутна маска контекста. Градијент попуњава само област унутар круга, стварајући ефекат градијентне иконе.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Креирање кружне путање за изрезивање
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Цртање градијента унутар маске за изрезивање
    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])
}