CGGradient: nima, gradient turlari va ularni yaratish

CGGradient nima?

CGGradient — Core Graphics-da o'zgarmas obyekt bo'lib, ranglar to'plamini va ularning gradient o'tishi bo'ylab aralashtirish qoidalarini inkapsulyatsiya qiladi. Ichki jihatdan, CGGradient CGColor massivi, [0.0, 1.0] diapazonidagi pozitsiyalar (locations) massivi va ranglar talqin qilinadigan CGColorSpace ga havolani saqlaydi. Har bir rang gradient shkalasidagi pozitsiyaga bog'langan: 0.0 pozitsiyasi boshiga, 1.0 — o'tishning oxiriga mos keladi.

CGGradient yaratilganda CGGradientCreateWithColors funksiyasi orqali Core Graphics ranglarning oraliq qiymatlarini oldindan hisoblab chiqadi. Gradient ixtiyoriy miqdordagi rang to'xtashlarini (color stops) o'z ichiga olishi mumkin, bu murakkab ko'p rangli o'tishlarni yaratishga imkon beradi. Ranglar soni kamida ikkita bo'lishi kerak va har bir rangga locations massivida pozitsiya mos kelishi kerak.

CGGradient arxitekturasi Core Animation-dagi CAGradientLayer kabi yuqori darajali API-lardan farq qiladi, chunki u to'g'ridan-to'g'ri Core Graphics grafik kontekstida ishlaydi. Bu chizish jarayoni ustidan to'liq nazorat va gradientlarni Quartz 2D-ning boshqa operatsiyalari — kesuvchi maskalar, soyalar va transformatsiyalar bilan birlashtirish imkoniyatini beradi.

Chiziqli va radial gradientlar

Core Graphics ikki turdagi gradientni qo'llab-quvvatlaydi: chiziqli (axial) va radial (radial). Chiziqli gradient CGGradientCreateWithColors funksiyasi bilan yaratiladi va CGContextDrawLinearGradient orqali chiziladi. Radial gradient bir xil CGGradient strukturasini talab qiladi, lekin CGContextDrawRadialGradient orqali chiziladi.

Chiziqli gradient (Axial)

Chiziqli gradient rang o'tishini boshlang'ich nuqta startPoint-dan tugash nuqtasi endPoint-gacha to'g'ri chiziq bo'ylab cho'zadi. Ranglar bu ikki nuqta o'rtasida interpolyatsiya qilinadi va ularning chegaralaridan tashqarida xatti-harakat kengaytirish opsiyalari bilan boshqariladi. Chiziqli gradient silliq fonlar, metall sirtlarni taqlid qilish va interfeys elementlarida rang o'tishlarini yaratish uchun idealdir.

Radial gradient (Radial)

Radial gradient bir aylanadan ikkinchisiga rang o'tishini yaratadi. Har bir aylana markaz (startCenter / endCenter) va radius (startRadius / endRadius) bilan belgilanadi. Rang ichki aylanadan tashqi aylanaga interpolyatsiya qilinadi. Maxsus hol — boshlang'ich radius 0 bo'lganda: gradient bir nuqtadan tarqaladi. Radial gradientlar yorug'lik manbalari, linzalar, samoviy jismlar va spotlight effektlarini taqlid qilish uchun ishlatiladi.

CGGradient yaratish: ranglar va pozitsiyalar

CGGradient faqat bitta asosiy funksiya — CGGradientCreateWithColors orqali yaratiladi. Funksiya CGColorSpace, CGColor massivi (CFArray) va CGFloat locations massivini qabul qiladi. Agar locations NULL bo'lsa, ranglar gradient shkalasi bo'ylab teng taqsimlanadi. Agar locations berilgan bo'lsa, uning uzunligi ranglar soniga mos kelishi kerak.

locations massivi 0.0 dan 1.0 gacha qiymatlarni o'z ichiga oladi, har bir rangning to'xtash nuqtalarini belgilaydi. Qiymatlar monoton o'sishi kerak. Agar birinchi qiymat 0.0 dan katta bo'lsa, boshidan bu pozitsiyagacha rang 0.0 pozitsiyasidagi rangdan ekstrapolyatsiya qilinadi. Xuddi shunday oxirgi qiymat 1.0 dan kichik bo'lsa. Bu xatti-harakat chizish vaqtida kengaytirish opsiyalari bilan boshqariladi.

Ranglar tanlashda rang fazosini hisobga olish muhimdir. Bir CGGradient-dagi barcha ranglar bir xil CGColorSpace-ga tegishli bo'lishi kerak — Core Graphics komponentlar interpolyatsiyasini shu fazoda amalga oshiradi. Agar ranglar turli fazolarda yaratilgan bo'lsa, ularni oldindan CGColorCreateCopyByMatchingToColorSpace orqali umumiy fazoga o'tkazish kerak.

Gradientni kontekstda chizish

Core Graphics gradientni chizish uchun ikkita funksiyani taqdim etadi: chiziqli uchun CGContextDrawLinearGradient va radial uchun CGContextDrawRadialGradient. Ikkala funksiya grafik kontekst, CGGradient obyekti, kengaytirish opsiyalari va turga xos geometrik parametrlarni qabul qiladi. Chizish joriy kesuvchi maska (clip) va kontekst transformatsiyasini hisobga olgan holda amalga oshiriladi.

Kengaytirish opsiyalari (Gradient Options)

Kengaytirish opsiyalari 0.0–1.0 pozitsiya diapazonidan tashqarida gradientning xatti-harakatini boshqaradi. kCGGradientDrawsBeforeStartLocation konstantasi boshlang'ich pozitsiyagacha bo'lgan maydonni birinchi to'xtash rangi bilan to'ldiradi. kCGGradientDrawsAfterEndLocation — oxirgi to'xtash rangi bilan. Bu opsiyalar bit maskasi orqali birlashtirilishi mumkin. Radial gradient uchun opsiyalar boshlang'ich va tugash radiuslaridan tashqari maydonga qo'llaniladi.

Transformatsiyalarning ta'siri

Gradient chiziladi joriy grafik kontekstning koordinata tizimida, uning transformatsiyasini (CTM — Current Transformation Matrix) hisobga olgan holda. CGContextTranslateCTM, CGContextScaleCTM yoki CGContextRotateCTM qo'llanilishi chizish funksiyasi chaqirilishidan oldin gradientning joylashuvi va masshtabini o'zgartiradi. Bu yangi obyektlar yaratmasdan bir CGGradientni turli maydonlar uchun qayta ishlatish imkonini beradi.

Opsiyalar: kengaytirish, tekislash va maskalash

Core Graphics gradientlarni boshqarish uchun bir nechta qo'shimcha mexanizmlarni taqdim etadi: tekislash (antialiasing), kesuvchi maska (clipping mask) orqali maskalash va shaffoflik effektlari bilan birlashtirish. Tekislash grafik kontekstda sukut bo'yicha yoqilgan va CGContextSetShouldAntialias orqali boshqariladi.

Kesuvchi maska gradientni chizish maydonini ixtiyoriy shakl bilan cheklash imkonini beradi. CGContextDrawLinearGradient chaqirilishidan oldin CGContextBeginPath, CGContextAddPath va CGContextClip orqali kontur belgilanishi kerak. Gradient faqat shu kontur bilan cheklangan maydon ichida chiziladi. Bu gradient ikonalar, tugmalar va taraqqiyot chiziqlarini yaratish uchun keng qo'llaniladi.

Gradientni kengaytirish (extend) — yana bir muhim parametr. kCGGradientDrawsBeforeStartLocation ishlatilganda Core Graphics birinchi to'xtash rangini startPoint-gacha butun maydonga ekstrapolyatsiya qiladi. Bu opsiyasiz gradientdan tashqari maydon to'ldirilmagan (shaffof) qoladi. Ikkala opsiyaning kombinatsiyasi, startPoint va endPoint uning ichida bo'lsa ham, grafik kontekstning butun to'rtburchagi gradient bilan to'ldirilishini kafolatlaydi.

Swift-da kod misollari

Amaliy misollarni ko'rib chiqaylik — iOS-da CGGradient va Core Graphics yordamida gradientlarni yaratish va chizish.

Uch rangli chiziqli gradient

Misol uch rang (ko'k, yashil, qizil) bilan chiziqli gradient yaratadi va uni UIView diagonali bo'ylab chizadi. Locations massivi ranglarni notekis taqsimlaydi: ko'k 0.0 dan 0.3 gacha, yashil 0.6 da, qizil 0.6 dan 1.0 gacha.

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

Yorqinlik effekti bilan radial gradient

Misol yorqinlikni taqlid qiluvchi radial gradient chizadi. Nol radiusli boshlang'ich nuqta yorqinlik markazini, tashqi aylana esa so'nish chegarasini belgilaydi. Bunday effekt interfeys elementlarini yoritish yoki faollik ko'rsatkichlari uchun ishlatiladi.

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

Kesuvchi maska bilan gradient

Bu misolda gradient kesuvchi kontur orqali aylana maydon bilan cheklanadi. Gradient chizilishidan oldin aylana yo'l belgilanadi, u kontekstning joriy maskasiga aylanadi. Gradient faqat aylana ichidagi maydonni to'ldirib, gradient ikona effektini yaratadi.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Aylana kesuvchi yo'lini yaratish
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Kesuvchi maska ichida gradientni chizish
    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])
}