Core Graphics — τι είναι, αρχές λειτουργίας και πλαίσιο για 2D γραφικά

Τι είναι το Core Graphics;

Core Graphics (γνωστό και ως Quartz 2D) είναι ένα πλαίσιο που υλοποιεί τη 2D γραφική μηχανή της Apple. Βασίζεται στη φορητή βιβλιοθήκη γραφικών Quartz και χρησιμοποιεί ένα μοντέλο σχεδίασης βασισμένο σε σελίδα (page-based), όπου κάθε ενέργεια είναι μια εντολή σε μια ακολουθία που θυμίζει σχέδιο σε χαρτί. Το Core Graphics υποστηρίζει anti-aliasing, διαφάνεια (alpha compositing) και χρωματικούς χώρους ICC.

Η αρχιτεκτονική του Core Graphics είναι χτισμένη γύρω από το γραφικό περιβάλλον (CGContext), το οποίο ενσωματώνει τη συσκευή εξόδου στόχου — οθόνη, εκτυπωτή, έγγραφο PDF ή ψηφιδωτό buffer. Το περιβάλλον διαχειρίζεται τις τρέχουσες ρυθμίσεις: χρώμα, πάχος γραμμής, μετασχηματισμό, περιοχή αποκοπής και γραμματοσειρές. Αυτή η προσέγγιση εξασφαλίζει ένα ενιαίο API για διαφορετικές συσκευές εξόδου χωρίς αλλαγή του κώδικα σχεδίασης.

Το Core Graphics λειτουργεί κυρίως στην CPU, χρησιμοποιώντας ένα διανυσματικό μοντέλο (resolution-independent). Αυτό σημαίνει ότι οι γραμμές και οι καμπύλες ψηφιοποιούνται στην τρέχουσα ανάλυση της συσκευής κατά την απόδοση. Σε αντίθεση με το Metal, το Core Graphics δεν απαιτεί ρητή διαχείριση πόρων GPU — το σύστημα αναλαμβάνει όλη τη βελτιστοποίηση. Για τις περισσότερες 2D εργασίες (γραφικά, διαγράμματα, προσαρμοσμένα στοιχεία UI), η απόδοση του Core Graphics είναι επαρκής για τη διατήρηση 60 FPS.

Αρχιτεκτονική και βασικοί τύποι

Core Graphics περιλαμβάνει περίπου 50 βασικούς τύπους (opaque types), καθένας από τους οποίους είναι υπεύθυνος για μια συγκεκριμένη λειτουργικότητα. Όλοι οι τύποι ακολουθούν τους κανόνες διαχείρισης μνήμης του Core Foundation: δημιουργούνται μέσω συναρτήσεων με Create στο όνομα, απαιτούν κλήση CGRelease και δεν είναι συμβατοί με ARC στην Objective-C (ωστόσο, το Swift διαχειρίζεται αυτόματα τη μνήμη μέσω σχολιασμών CF_RETURNS_RETAINED).

Βασικοί τύποι του Core Graphics

CGContext — περιβάλλον σχεδίασης, ο κεντρικός τύπος του πλαισίου. CGPath — αμετάβλητο διανυσματικό περίγραμμα. CGColor — χρώμα με καθορισμό χρωματικού χώρου. CGGradient — γέμισμα διαβάθμισης. CGImage — ψηφιδωτή εικόνα. CGLayer — βελτιστοποιημένο offline buffer για επαναλαμβανόμενη σχεδίαση. CGDataProvider — πηγή δεδομένων για εικόνες. CGColorSpace — χρωματικός χώρος (sRGB, Display P3, Gray).

Κάθε τύπος έχει σχεδιαστεί για ελάχιστη επιβάρυνση: το CGPath μπορεί να αποθηκευτεί σε κρυφή μνήμη και να επαναχρησιμοποιηθεί μεταξύ διαφορετικών περιβαλλόντων, το CGColor μετατρέπεται στην αναπαράσταση υλικού GPU κατά τη μεταφορά, το CGLayer αποθηκεύει προ-ψηφιοποιημένο περιεχόμενο. Αυτή η αρχιτεκτονική επιτρέπει στο Core Graphics να λειτουργεί αποτελεσματικά τόσο σε απλές εργασίες UI όσο και σε επαγγελματικούς επεξεργαστές γραφικών.

CGPath: διανυσματικά περιγράμματα και βελτιστοποίησή τους

CGPath — ένα αμετάβλητο αντικείμενο που περιγράφει μια ακολουθία γεωμετρικών τμημάτων: ευθείες γραμμές, καμπύλες Bézier, τόξα και κλεισίματα. Σε αντίθεση με το UIBezierPath, το CGPath δεν περιέχει μεθόδους σχεδίασης — αποθηκεύει μόνο τη γεωμετρία. Για σχεδίαση, το CGPath προστίθεται στο περιβάλλον (CGContextAddPath) και στη συνέχεια σχεδιάζεται μέσω strokePath ή fillPath. Η αμεταβλητότητα εγγυάται την ασφάλεια νημάτων και τη δυνατότητα προσωρινής αποθήκευσης.

Δημιουργία και βελτιστοποίηση περιγραμμάτων

CGPathCreateMutable δημιουργεί μια μεταβλητή διαδρομή (CGMutablePathRef) για σταδιακή κατασκευή. Μετά την τελική συναρμολόγηση, μετατρέπεται σε αμετάβλητο CGPathRef. Η Apple συνιστά την ελαχιστοποίηση του αριθμού σημείων στο CGPath — τα υπερβολικά πολύπλοκα περιγράμματα (πάνω από 1000 τμήματα) επιβραδύνουν την ψηφιοποίηση. Για βελτιστοποίηση, χρησιμοποιήστε το CGPathCreateCopyBySimplifyingPath, το οποίο αφαιρεί τα πλεονάζοντα συγγραμμικά σημεία.

Για κίνηση σχήματος μεταξύ δύο CGPath, μπορείτε να χρησιμοποιήσετε το CABasicAnimation στην ιδιότητα path του CAShapeLayer. Περιορισμός: και τα δύο CGPath πρέπει να έχουν τον ίδιο αριθμό τμημάτων (controls points). Η συνάρτηση CGPathApply επιτρέπει τη διέλευση όλων των στοιχείων της διαδρομής και τη σύγκριση της δομής τους. Εάν τα τμήματα δεν ταιριάζουν, η κίνηση θα είναι τρανταχτή — σε αυτήν την περίπτωση, χρησιμοποιήστε το CADisplayLink για χειροκίνητη παρεμβολή σημείων.

// δημιουργία μεταβλητής διαδρομής
let mutablePath = CGMutablePath()
mutablePath.moveTo(to: CGPoint(x: 0, y: 0))
mutablePath.addLine(to: CGPoint(x: 100, y: 0))
mutablePath.addLine(to: CGPoint(x: 100, y: 100))
mutablePath.closeSubpath()

// μετατροπή σε αμετάβλητη για ασφαλή προσωρινή αποθήκευση
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

Διαβαθμίσεις: CGGradient και CGShading

CGGradient — ένα αντικείμενο που ορίζει μια ομαλή μετάβαση μεταξύ δύο ή περισσότερων χρωμάτων κατά μήκος μιας ευθείας γραμμής (γραμμική διαβάθμιση) ή από το κέντρο προς τις άκρες (ακτινική διαβάθμιση). Το CGGradient δημιουργείται με καθορισμό χρωματικού χώρου, πίνακα CGColorRef και πίνακα θέσεων στάσης από 0.0 έως 1.0. Μετά τη δημιουργία, η διαβάθμιση μπορεί να χρησιμοποιηθεί πολλές φορές σε διαφορετικά περιβάλλοντα.

CGShading για προχωρημένες διαβαθμίσεις

CGShading — ένας πιο ισχυρός μηχανισμός που επιτρέπει τον ορισμό μιας συνάρτησης αλλαγής χρώματος κατά μήκος μιας διαδρομής. Σε αντίθεση με το CGGradient που λειτουργεί με ένα σταθερό σύνολο χρωμάτων, το CGShading χρησιμοποιεί μια συνάρτηση επανάκλησης (CGFunctionRef) που υπολογίζει το χρώμα σε κάθε σημείο. Αυτό επιτρέπει τη δημιουργία σύνθετων διαβαθμίσεων με μη γραμμικές μεταβάσεις και σύνθετα χρωματικά σχήματα.

Για τη σχεδίαση μιας διαβάθμισης μέσα σε ένα σχήμα, απαιτείται αποκοπή (clip) στο περίγραμμα αυτού του σχήματος. Σειρά: προσθέστε τη διαδρομή στο περιβάλλον, καλέστε CGContextClip, στη συνέχεια σχεδιάστε τη διαβάθμιση. Χωρίς αποκοπή, η διαβάθμιση γεμίζει ολόκληρο το περιβάλλον. Στο iOS, συνιστάται η χρήση του CGGradient ως απλούστερης και πιο αποδοτικής επιλογής — το CGShading δικαιολογείται μόνο για μη τυπικές συναρτήσεις αλλαγής χρώματος.

func drawGradient(ctx: CGContext, rect: CGRect) {
    let colors = [UIColor.red.cgColor, UIColor.blue.cgColor] as CFArray
    guard let gradient = CGGradient(
        colorsSpace: CGColorSpaceCreateDeviceRGB(),
        colors: colors,
        locations: [0.0, 1.0]
    ) else { return }

    ctx.saveGState()
    ctx.addEllipse(in: rect)
    ctx.clip()
    ctx.drawLinearGradient(
        gradient,
        start: CGPoint(x: rect.midX, y: rect.minY),
        end: CGPoint(x: rect.midX, y: rect.maxY),
        options: []
    )
    ctx.restoreGState()
}

Εργασία με εικόνες: CGImage και CGLayer

CGImage — μια ψηφιδωτή εικόνα στο Core Graphics, η οποία μπορεί να φορτωθεί από αρχείο, να δημιουργηθεί προγραμματικά ή να ληφθεί από UIImage. Το CGImage περιέχει δεδομένα pixel, πληροφορίες χρωματικού χώρου, μέγεθος, βάθος bit και διάταξη δεδομένων. Σε αντίθεση με το UIImage, το CGImage δεν διαχειρίζεται την κλιμάκωση για Retina — αυτή την ευθύνη αναλαμβάνει ο προγραμματιστής μέσω της παραμέτρου scale.

CGLayer — βελτιστοποίηση επαναλαμβανόμενης σχεδίασης

CGLayer — ένα offline buffer για προ-ψηφιοποίηση στατικού περιεχομένου. Εάν το ίδιο σύνολο γραφικών εντολών σχεδιάζεται επανειλημμένα (π.χ. μοτίβο φόντου), το CGLayer το ψηφιοποιεί μία φορά και στη συνέχεια απλώς το αντιγράφει στο περιβάλλον. Σύμφωνα με δεδομένα της Apple, η χρήση του CGLayer μπορεί να επιταχύνει την επαναλαμβανόμενη σχεδίαση 2–5 φορές στην CPU και έως 10 φορές με επιτάχυνση υλικού.

Για φόρτωση εικόνων, χρησιμοποιήστε το CGImageSource — ένα ισχυρό API για ανάγνωση μεταδεδομένων, μικρογραφιών και μεμονωμένων καρέ από GIF/APNG. Το CGImageSource επιτρέπει προοδευτική φόρτωση εικόνας και λήψη μόνο των απαραίτητων τμημάτων. Κατά την εργασία με μεγάλες εικόνες (που υπερβαίνουν το μέγεθος οθόνης), συνιστάται η δημιουργία CGImageSource με επιλογή προσωρινής αποθήκευσης στο δίσκο και η χρήση του CGImageSourceCreateThumbnailAtIndex για εμφάνιση μειωμένης έκδοσης.

func createLayer(ctx: CGContext, size: CGSize) -> CGLayer? {
    guard let layer = CGLayer(ctx, size: size, auxiliaryInfo: nil) else { return nil }
    let layerCtx = layer.context !

    // σχεδίαση μία φορά
    layerCtx.setFillColor(UIColor.lightGray.cgColor)
    layerCtx.addEllipse(in: CGRect(origin: .zero, size: size))
    layerCtx.fillPath()
    return layer
}

// χρήση στο draw()
for i in 0..<20 {
    ctx.draw(layer, at: CGPoint(x: CGFloat(i) * 30, y: 0))
}

Παράδειγμα εργασίας με Core Graphics

Θα αναπτύξουμε ένα προσαρμοσμένο View για εμφάνιση υδατοσήμου σε μια εικόνα χρησιμοποιώντας Core Graphics. Το υδατόσημο περιλαμβάνει ημιδιαφανές κείμενο και διανυσματικό λογότυπο που τοποθετούνται πάνω από την αρχική εικόνα. Ο κώδικας δείχνει εργασία με CGContext, CGImage, κείμενο και διαφάνεια σε ένα περιβάλλον.

class WatermarkView: UIView {

    private let watermarkText = "IT Sectr"
    private let watermarkOpacity: CGFloat = 0.3

    override func draw(_ rect: CGRect) {
        guard let ctx = UIGraphicsGetCurrentContext() else { return }

        // σχεδίαση εικόνας φόντου
        UIImage(named: "background")?.draw(in: rect)

        // ρύθμιση διαφάνειας υδατοσήμου
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // ημιδιαφανές κείμενο
        let attributes: NSAttributedString.Attributes = [
            .font: UIFont.boldSystemFont(ofSize: 48),
            .foregroundColor: UIColor.white.withAlphaComponent(watermarkOpacity)
        ]
        let textSize = watermarkText.size(withAttributes: attributes)
        watermarkText.draw(
            at: CGPoint(x: -textSize.width / 2, y: -textSize.height / 2),
            withAttributes: attributes
        )

        // διανυσματικό εικονίδιο (κύκλος με σταυρό) κάτω από το κείμενο
        ctx.setStrokeColor(UIColor.white.withAlphaComponent(watermarkOpacity).cgColor)
        ctx.setLineWidth(3)
        ctx.addEllipse(in: CGRect(x: -25, y: -75, width: 50, height: 50))
        ctx.strokePath()
        ctx.moveTo(x: -15, y: -50)
        ctx.addLineTo(x: 15, y: -50)
        ctx.moveTo(x: 0, y: -65)
        ctx.addLineTo(x: 0, y: -35)
        ctx.strokePath()

        ctx.restoreGState()
    }
}

Στον κώδικα χρησιμοποιούνται βασικές δυνατότητες του Core Graphics: saveGState/restoreGState για απομόνωση των εφέ υδατοσήμου από το φόντο, translateBy και rotate για τοποθέτηση και περιστροφή, ημιδιαφανές κείμενο μέσω withAlphaComponent και διανυσματικό εικονίδιο μέσω addEllipse και addLineTo. Ολόκληρο το υδατόσημο σχεδιάζεται ως μία σύνθεση μετά την εικόνα φόντου.

Κατά τη δημιουργία υδατοσήμων για φωτογραφίες σε παραγωγή, είναι σημαντικό να λαμβάνεται υπόψη η απόδοση. Εάν η εικόνα είναι μεγαλύτερη από την οθόνη, πριν από την εφαρμογή υδατοσήμου, μειώστε την μέσω CGImageSourceCreateThumbnailAtIndex. Το Core Graphics επεξεργάζεται όλες τις λειτουργίες στην CPU — για μαζική επεξεργασία δεκάδων εικόνων, χρησιμοποιήστε ουρά φόντου και CGBitmapContext για αποφυγή αποκλεισμού του UI.