CGGradient: ano ito, mga uri ng gradient at ang paggawa nito

Ano ang CGGradient?

CGGradient — ay isang hindi nababagong object sa Core Graphics, na nag-encapsulate ng isang set ng mga kulay at mga patakaran ng kanilang paghahalo sa kahabaan ng gradient transition. Sa loob, ang CGGradient ay nag-iimbak ng isang array ng CGColor, isang array ng mga posisyon (locations) sa saklaw na [0.0, 1.0], at isang reference sa CGColorSpace kung saan ang mga kulay ay binibigyang-kahulugan. Ang bawat kulay ay nakatali sa isang posisyon sa scale ng gradient: posisyon 0.0 ay tumutugma sa simula, 1.0 — sa dulo ng transition.

Sa paglikha ng CGGradient sa pamamagitan ng function na CGGradientCreateWithColors, ang Core Graphics ay nagsasagawa ng pre-computation ng mga intermediate na halaga ng kulay. Ang gradient ay maaaring maglaman ng anumang bilang ng mga color stops, na nagpapahintulot sa paglikha ng mga kumplikadong multi-color na transition. Ang bilang ng mga kulay ay dapat na hindi bababa sa dalawa, at ang bawat kulay ay dapat may katumbas na posisyon sa locations array.

Ang arkitektura ng CGGradient ay naiiba mula sa mas mataas na antas ng API tulad ng CAGradientLayer mula sa Core Animation dahil ito ay direktang gumagana sa graphic na konteksto ng Core Graphics. Nagbibigay ito ng ganap na kontrol sa proseso ng pagguhit at kakayahang pagsamahin ang mga gradient sa iba pang mga operasyon ng Quartz 2D — clipping mask, shadow, at mga transformasyon.

Linear at radial gradient

Core Graphics ay sumusuporta sa dalawang uri ng gradient: linear (axial) at radial (radial). Ang linear gradient ay ginawa ng function na CGGradientCreateWithColors at iginuhit sa pamamagitan ng CGContextDrawLinearGradient. Ang radial gradient ay nangangailangan ng parehong CGGradient structure, ngunit iginuhit sa pamamagitan ng CGContextDrawRadialGradient.

Linear gradient (Axial)

Linear gradient ay nagpapahaba ng paglipat ng kulay sa kahabaan ng tuwid na linya mula sa simula na punto startPoint hanggang sa dulo na punto endPoint. Ang mga kulay ay ini-interpolate sa pagitan ng dalawang puntong ito, at sa labas ng kanilang mga hangganan, ang pag-uugali ay kinokontrol ng mga opsyon sa extension. Ang linear gradient ay perpekto para sa paglikha ng makinis na background, simulation ng metal na ibabaw, at paglipat ng kulay sa mga elemento ng interface.

Radial gradient (Radial)

Radial gradient ay lumilikha ng paglipat ng kulay mula sa isang bilog patungo sa isa pa. Ang bawat bilog ay tinutukoy ng gitna (startCenter / endCenter) at radius (startRadius / endRadius). Ang kulay ay ini-interpolate mula sa panloob na bilog patungo sa panlabas. Isang espesyal na kaso — kapag ang simula radius ay 0: ang gradient ay kumakalat mula sa isang punto. Ang mga radial gradient ay ginagamit para sa simulation ng light source, lens, celestial body, at spotlight effect.

Paglikha ng CGGradient: mga kulay at posisyon

CGGradient ay ginawa lamang ng isang pangunahing function — CGGradientCreateWithColors. Ang function ay tumatanggap ng CGColorSpace, isang array ng CGColor (CFArray), at isang array ng CGFloat locations. Kung ang locations ay NULL, ang mga kulay ay pantay na ipinamamahagi sa kahabaan ng gradient scale. Kung ang locations ay tinukoy, ang haba nito ay dapat tumugma sa bilang ng mga kulay.

Ang locations array ay naglalaman ng mga halaga mula 0.0 hanggang 1.0, na tumutukoy sa mga stop point ng bawat kulay. Ang mga halaga ay dapat na monotonically tumaas. Kung ang unang halaga ay mas malaki kaysa sa 0.0, ang kulay mula sa simula hanggang sa posisyong ito ay i-extrapolate mula sa kulay sa posisyon 0.0. Katulad para sa huling halaga na mas mababa sa 1.0. Ang pag-uugali na ito ay kinokontrol ng mga opsyon sa extension sa pagguhit.

Sa pagpili ng mga kulay para sa gradient, mahalagang isaalang-alang ang color space. Lahat ng mga kulay sa isang CGGradient ay dapat na kabilang sa parehong CGColorSpace — ang Core Graphics ay nagsasagawa ng interpolation ng mga component sa puwang na ito. Kung ang mga kulay ay ginawa sa iba't ibang mga puwang, dapat silang i-convert sa isang karaniwang puwang sa pamamagitan ng CGColorCreateCopyByMatchingToColorSpace.

Pagguhit ng gradient sa konteksto

Core Graphics ay nagbibigay ng dalawang function para sa pagguhit ng gradient: CGContextDrawLinearGradient para sa linear at CGContextDrawRadialGradient para sa radial. Ang parehong function ay tumatanggap ng graphic context, CGGradient object, mga opsyon sa extension, at mga geometric na parameter na tukoy sa uri. Ang pagguhit ay isinasagawa na isinasaalang-alang ang kasalukuyang clipping mask (clip) at context transformation.

Mga opsyon sa extension (Gradient Options)

Mga opsyon sa extension ay kinokontrol ang pag-uugali ng gradient sa labas ng saklaw ng mga posisyon 0.0–1.0. Ang constant kCGGradientDrawsBeforeStartLocation ay pumupuno sa lugar bago ang simula na posisyon ng kulay ng unang stop. kCGGradientDrawsAfterEndLocation — ng kulay ng huling stop. Ang mga opsyon na ito ay maaaring pagsamahin sa pamamagitan ng bit mask. Para sa radial gradient, ang mga opsyon ay inilalapat sa lugar sa labas ng simula at dulo na radius.

Impluwensya ng mga transformasyon

Ang gradient ay iginuhit sa coordinate system ng kasalukuyang graphic context na isinasaalang-alang ang transformasyon nito (CTM — Current Transformation Matrix). Ang paglalapat ng CGContextTranslateCTM, CGContextScaleCTM, o CGContextRotateCTM bago tawagan ang function ng pagguhit ay nagbabago sa posisyon at scale ng gradient. Ito ay nagpapahintulot sa muling paggamit ng isang CGGradient para sa iba't ibang lugar nang hindi lumilikha ng mga bagong object.

Mga opsyon: extension, anti-aliasing, at masking

Core Graphics ay nagbibigay ng ilang karagdagang mekanismo para sa pamamahala ng mga gradient: anti-aliasing, masking sa pamamagitan ng clipping mask, at kombinasyon sa mga epekto ng transparency. Ang anti-aliasing ay naka-enable bilang default sa graphic context at kinokontrol sa pamamagitan ng CGContextSetShouldAntialias.

Clipping mask ay nagpapahintulot na limitahan ang lugar ng pagguhit ng gradient sa isang arbitrary na hugis. Bago tawagan ang CGContextDrawLinearGradient, isang contour ay dapat na tukuyin sa pamamagitan ng CGContextBeginPath, CGContextAddPath, at CGContextClip. Ang gradient ay iguguhit lamang sa loob ng lugar na nilimitahan ng contour na ito. Ito ay malawakang ginagamit para sa paglikha ng gradient icon, button, at progress bar.

Extension ng gradient (extend) — isa pang mahalagang parameter. Kapag gumagamit ng kCGGradientDrawsBeforeStartLocation, ang Core Graphics ay nag-extrapolate ng kulay ng unang stop sa buong lugar hanggang startPoint. Kung wala ang opsyon na ito, ang lugar sa labas ng gradient ay mananatiling hindi napupuno (transparent). Ang kombinasyon ng parehong opsyon ay ginagarantiyahan na ang buong rectangle ng graphic context ay mapupuno ng gradient, kahit na ang startPoint at endPoint ay nasa loob nito.

Mga halimbawa ng code sa Swift

Tingnan natin ang mga praktikal na halimbawa ng paglikha at pagguhit ng mga gradient sa iOS gamit ang CGGradient at Core Graphics.

Linear gradient na may tatlong kulay

Ang halimbawa ay gumagawa ng linear gradient na may tatlong kulay (asul, berde, pula) at iginuguhit ito nang pahilis sa UIView. Ang locations array ay namamahagi ng mga kulay nang hindi pantay: asul mula 0.0 hanggang 0.3, berde sa 0.6, pula mula 0.6 hanggang 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])
}

Radial gradient na may glow effect

Ang halimbawa ay gumuhit ng radial gradient na ginagaya ang glow. Ang simula na punto na may zero radius ay tumutukoy sa sentro ng glow, at ang panlabas na bilog — ang hangganan ng pagkupas. Ang ganitong epekto ay ginagamit para sa pag-iilaw ng mga elemento ng interface o mga indicator ng aktibidad.

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

Gradient na may clipping mask

Sa halimbawang ito, ang gradient ay nililimitahan sa isang pabilog na lugar sa pamamagitan ng clipping contour. Bago iguhit ang gradient, isang pabilog na path ang tinutukoy na nagiging kasalukuyang mask ng konteksto. Pinupuno lamang ng gradient ang lugar sa loob ng bilog, na lumilikha ng epekto ng gradient icon.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Paglikha ng pabilog na clipping path
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Pagguhit ng gradient sa loob ng clipping mask
    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])
}