CGGradient: nədir, qradiyent növləri və onların yaradılması

CGGradient nədir?

CGGradient — Core Graphics-da dəyişməz obyektdir, rənglər dəstini və onların qradiyent keçidi boyunca qarışdırılma qaydalarını kapsullyaşdırır. Daxildə CGGradient CGColor massivi, [0.0, 1.0] diapazonunda mövqelər (locations) massivi və rənglərin şərh edildiyi CGColorSpace istinadını saxlayır. Hər bir rəng qradiyent şkalasında mövqeyə bağlıdır: 0.0 mövqeyi başlanğıca, 1.0 — keçidin sonuna uyğun gəlir.

CGGradient yaradılarkən CGGradientCreateWithColors funksiyası vasitəsilə Core Graphics rənglərin aralıq dəyərlərini əvvəlcədən hesablayır. Qradiyent ixtiyari sayda rəng dayanacaqları (color stops) ehtiva edə bilər ki, bu da mürəkkəb çoxrəngli keçidlər yaratmağa imkan verir. Rənglərin sayı ən azı iki olmalıdır və hər bir rəngə locations massivində mövqe uyğun gəlməlidir.

CGGradient arxitekturası Core Animation-dan CAGradientLayer kimi daha yüksək səviyyəli API-lərdən fərqlənir ki, o birbaşa Core Graphics qrafik kontekstində işləyir. Bu, çəkmə prosesi üzərində tam nəzarət və qradiyentləri Quartz 2D-nin digər əməliyyatları — kəsmə maskaları, kölgələr və transformasiyalarla birləşdirmək imkanı verir.

Xətti və radial qradiyentlər

Core Graphics iki növ qradiyenti dəstəkləyir: xətti (axial) və radial (radial). Xətti qradiyent CGGradientCreateWithColors funksiyası ilə yaradılır və CGContextDrawLinearGradient vasitəsilə çəkilir. Radial qradiyent eyni CGGradient strukturunu tələb edir, lakin CGContextDrawRadialGradient vasitəsilə çəkilir.

Xətti qradiyent (Axial)

Xətti qradiyent rəng keçidini başlanğıc nöqtə startPoint-dən son nöqtə endPoint-ə qədər düz xətt boyunca uzadır. Rənglər bu iki nöqtə arasında interpolyasiya olunur və onların hüdudlarından kənarda davranış genişləndirmə seçimləri ilə idarə olunur. Xətti qradiyent hamar fonlar, metal səthlərin imitasiyası və interfeys elementlərində rəng keçidləri yaratmaq üçün idealdır.

Radial qradiyent (Radial)

Radial qradiyent bir dairədən digərinə rəng keçidi yaradır. Hər bir dairə mərkəz (startCenter / endCenter) və radius (startRadius / endRadius) ilə müəyyən edilir. Rəng daxili dairədən xarici dairəyə interpolyasiya olunur. Xüsusi hal — başlanğıc radius 0 olduqda: qradiyent bir nöqtədən yayılır. Radial qradiyentlər işıq mənbələri, linzalar, göy cisimləri və spotlight effektlərinin simulyasiyası üçün istifadə olunur.

CGGradient yaradılması: rənglər və mövqelər

CGGradient yalnız bir əsas funksiya — CGGradientCreateWithColors vasitəsilə yaradılır. Funksiya CGColorSpace, CGColor massivi (CFArray) və CGFloat locations massivi qəbul edir. Əgər locations NULL-dursa, rənglər qradiyent şkalası üzrə bərabər paylanır. Əgər locations təyin edilibsə, onun uzunluğu rənglərin sayına uyğun olmalıdır.

locations massivi 0.0-dan 1.0-a qədər dəyərlər ehtiva edir, hər bir rəngin dayanma nöqtələrini müəyyən edir. Dəyərlər monoton artmalıdır. Əgər birinci dəyər 0.0-dan böyükdürsə, başlanğıcdan bu mövqeyə qədər rəng 0.0 mövqeyindəki rəngdən ekstrapolyasiya olunur. Eynilə son dəyər 1.0-dan kiçik olduqda. Bu davranış çəkmə zamanı genişləndirmə seçimləri ilə idarə olunur.

Rənglər seçilərkən rəng məkanını nəzərə almaq vacibdir. Bir CGGradient-də bütün rənglər eyni CGColorSpace-ə aid olmalıdır — Core Graphics komponentlərin interpolyasiyasını bu məkanda həyata keçirir. Əgər rənglər müxtəlif məkanlarda yaradılıbsa, onları əvvəlcədən CGColorCreateCopyByMatchingToColorSpace vasitəsilə vahid məkana çevirmək lazımdır.

Qradiyentin kontekstdə çəkilməsi

Core Graphics qradiyenti çəkmək üçün iki funksiya təqdim edir: xətti üçün CGContextDrawLinearGradient və radial üçün CGContextDrawRadialGradient. Hər iki funksiya qrafik kontekst, CGGradient obyekti, genişləndirmə seçimləri və növə uyğun həndəsi parametrlər qəbul edir. Çəkmə cari kəsmə maskası (clip) və kontekst transformasiyası nəzərə alınmaqla həyata keçirilir.

Genişləndirmə seçimləri (Gradient Options)

Genişləndirmə seçimləri 0.0–1.0 mövqe diapazonundan kənarda qradiyentin davranışını idarə edir. kCGGradientDrawsBeforeStartLocation sabiti başlanğıc mövqeyə qədər olan sahəni birinci dayanacağın rəngi ilə doldurur. kCGGradientDrawsAfterEndLocation — son dayanacağın rəngi ilə. Bu seçimlər bit maskası vasitəsilə birləşdirilə bilər. Radial qradiyent üçün seçimlər başlanğıc və son radiuslardan kənar sahəyə tətbiq olunur.

Transformasiyaların təsiri

Qradiyent çəkilir cari qrafik kontekstin koordinat sistemində, onun transformasiyası (CTM — Current Transformation Matrix) nəzərə alınmaqla. CGContextTranslateCTM, CGContextScaleCTM və ya CGContextRotateCTM tətbiqi çəkmə funksiyası çağırılmazdan əvvəl qradiyentin mövqeyini və miqyasını dəyişir. Bu, yeni obyektlər yaratmadan eyni CGGradient-in müxtəlif sahələr üçün təkrar istifadəsinə imkan verir.

Seçimlər: genişləndirmə, hamarlaşdırma və maskalama

Core Graphics qradiyentlərin idarə edilməsi üçün bir neçə əlavə mexanizm təqdim edir: hamarlaşdırma (antialiasing), kəsmə maskası (clipping mask) vasitəsilə maskalama və şəffaflıq effektləri ilə birləşdirmə. Hamarlaşdırma qrafik kontekstdə standart olaraq aktivdir və CGContextSetShouldAntialias vasitəsilə idarə olunur.

Kəsmə maskası qradiyentin çəkilmə sahəsini ixtiyari formayla məhdudlaşdırmağa imkan verir. CGContextDrawLinearGradient çağırılmazdan əvvəl CGContextBeginPath, CGContextAddPath və CGContextClip vasitəsilə kontur təyin edilməlidir. Qradiyent yalnız bu konturla məhdudlaşdırılmış sahənin daxilində çəkiləcək. Bu, qradiyent ikonalar, düymələr və gedişat zolaqları yaratmaq üçün geniş istifadə olunur.

Qradiyentin genişləndirilməsi (extend) — digər vacib parametrdir. kCGGradientDrawsBeforeStartLocation istifadə edildikdə Core Graphics birinci dayanacağın rəngini startPoint-ə qədər bütün sahəyə ekstrapolyasiya edir. Bu seçim olmadan qradiyentdən kənar sahə doldurulmamış (şəffaf) qalır. Hər iki seçimin birləşməsi, startPoint və endPoint onun daxilində olsa belə, qrafik kontekstin bütün düzbucaqlısının qradiyentlə doldurulmasını təmin edir.

Swift-də kod nümunələri

Praktik nümunələri nəzərdən keçirək — iOS-da CGGradient və Core Graphics istifadə edərək qradiyentlərin yaradılması və çəkilməsi.

Üç rəngli xətti qradiyent

Nümunə üç rənglə (mavi, yaşıl, qırmızı) xətti qradiyent yaradır və onu UIView-in diaqonalı boyunca çəkir. Locations massivi rəngləri qeyri-bərabər paylayır: mavi 0.0-dan 0.3-ə qədər, yaşıl 0.6-da, qırmızı 0.6-dan 1.0-a qədər.

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

İşıq saçma effekti ilə radial qradiyent

Nümunə işıq saçmanı simulyasiya edən radial qradiyent çəkir. Sıfır radiuslu başlanğıc nöqtə işıq saçma mərkəzini, xarici dairə isə sönmə hüdudunu müəyyən edir. Belə effekt interfeys elementlərinin işıqlandırılması və ya aktivlik göstəriciləri üçün istifadə olunur.

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

Kəsmə maskası ilə qradiyent

Bu nümunədə qradiyent kəsmə konturu vasitəsilə dairəvi sahə ilə məhdudlaşdırılır. Qradiyent çəkilməzdən əvvəl dairəvi yol təyin edilir ki, bu da kontekstin cari maskasına çevrilir. Qradiyent yalnız dairənin daxilindəki sahəni dolduraraq qradiyent ikona effekti yaradır.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Dairəvi kəsmə yolunun yaradılması
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Kəsmə maskası daxilində qradiyentin çəkilməsi
    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])
}