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: η διαβάθμιση εξαπλώνεται από ένα σημείο. Οι ακτινικές διαβαθμίσεις χρησιμοποιούνται για προσομοίωση πηγών φωτός, φακών, ουράνιων σωμάτων και εφέ προβολέα.

Δημιουργία 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 — με το χρώμα της τελευταίας στάσης. Αυτές οι επιλογές μπορούν να συνδυαστούν μέσω bit mask. Για ακτινική διαβάθμιση, οι επιλογές εφαρμόζονται στην περιοχή εκτός της αρχικής και τελικής ακτίνας.

Επίδραση μετασχηματισμών

Η διαβάθμιση σχεδιάζεται στο σύστημα συντεταγμένων του τρέχοντος γραφικού περιβάλλοντος λαμβάνοντας υπόψη τον μετασχηματισμό του (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])
}