Core Graphics — qu'est-ce que c'est, principes de fonctionnement et framework pour les graphiques 2D

Qu'est-ce que Core Graphics ?

Core Graphics (également connu sous le nom de Quartz 2D) est un framework qui implémente le moteur graphique 2D d'Apple. Il est basé sur la bibliothèque graphique portable Quartz et utilise un modèle de dessin basé sur les pages, où chaque action est une commande dans une séquence rappelant le dessin sur papier. Core Graphics prend en charge l'anti-crénelage, la transparence (compositions alpha) et les espaces colorimétriques ICC.

L'architecture de Core Graphics est construite autour d'un contexte graphique (CGContext) qui encapsule le périphérique de sortie cible — écran, imprimante, document PDF ou tampon matriciel. Le contexte gère les paramètres actuels : couleur, épaisseur de trait, transformation, zone de découpage et polices. Cette approche fournit une API uniforme pour différents périphériques de sortie sans modifier le code de dessin.

Core Graphics fonctionne principalement sur le CPU, en utilisant un modèle vectoriel (indépendant de la résolution). Cela signifie que les lignes et les courbes sont rasterisées à la résolution actuelle de l'appareil lors du dessin. Contrairement à Metal, Core Graphics ne nécessite pas de gestion explicite des ressources GPU — le système s'occupe de toute l'optimisation. Pour la plupart des tâches 2D (graphiques, diagrammes, éléments d'interface personnalisés), les performances de Core Graphics sont suffisantes pour maintenir 60 FPS.

Architecture et types principaux

Core Graphics comprend environ 50 types de base (types opaques), chacun responsable d'une fonctionnalité spécifique. Tous les types suivent les règles de gestion de mémoire de Core Foundation : ils sont créés via des fonctions avec Create dans le nom, nécessitent un appel à CGRelease, et ne sont pas compatibles ARC en Objective-C (cependant Swift gère automatiquement la mémoire via les annotations CF_RETURNS_RETAINED).

Types clés de Core Graphics

CGContext — le contexte de dessin, le type central du framework. CGPath — un contour vectoriel immuable. CGColor — une couleur avec un espace colorimétrique spécifié. CGGradient — un remplissage dégradé. CGImage — une image matricielle. CGLayer — un tampon hors ligne optimisé pour le dessin répétitif. CGDataProvider — une source de données pour les images. CGColorSpace — un espace colorimétrique (sRGB, Display P3, Gray).

Chaque type est conçu pour une surcharge minimale : CGPath peut être mis en cache et réutilisé entre différents contextes, CGColor est converti en représentation matérielle GPU lors du passage, CGLayer stocke le contenu pré-rasterisé. Cette architecture permet à Core Graphics de fonctionner efficacement à la fois dans les tâches d'interface simples et dans les éditeurs graphiques professionnels.

CGPath : contours vectoriels et leur optimisation

CGPath est un objet immuable décrivant une séquence de segments géométriques : lignes droites, courbes de Bézier, arcs et fermetures. Contrairement à UIBezierPath, CGPath ne contient pas de méthodes de dessin — il stocke uniquement la géométrie. Pour dessiner, CGPath est ajouté au contexte (CGContextAddPath) puis rendu via strokePath ou fillPath. L'immuabilité garantit la sécurité des threads et la capacité de mise en cache.

Création et optimisation des contours

CGPathCreateMutable crée un chemin mutable (CGMutablePathRef) pour une construction étape par étape. Après l'assemblage final, il est converti en un CGPathRef immuable. Apple recommande de minimiser le nombre de points dans CGPath — les contours trop complexes (plus de 1000 segments) ralentissent la rasterisation. Pour l'optimisation, utilisez CGPathCreateCopyBySimplifyingPath, qui supprime les points colinéaires redondants.

Pour animer la forme entre deux objets CGPath, vous pouvez utiliser CABasicAnimation sur la propriété path de CAShapeLayer. Limitation : les deux CGPath doivent avoir le même nombre de segments (points de contrôle). La fonction CGPathApply permet de parcourir tous les éléments du chemin et de comparer leur structure. Si les segments ne correspondent pas, l'animation saccadera — dans ce cas, utilisez CADisplayLink pour une interpolation manuelle des points.

// créer un chemin mutable
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()

// convertir en immutable pour un cache sûr
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

Dégradés : CGGradient et CGShading

CGGradient est un objet définissant une transition douce entre deux ou plusieurs couleurs le long d'une ligne droite (dégradé linéaire) ou du centre vers les bords (dégradé radial). CGGradient est créé avec un espace colorimétrique spécifié, un tableau de CGColorRef et un tableau de positions d'arrêt de 0,0 à 1,0. Après la création, le dégradé peut être réutilisé plusieurs fois dans différents contextes.

CGShading pour les dégradés avancés

CGShading est un mécanisme plus puissant permettant de définir une fonction de changement de couleur le long d'un chemin. Contrairement à CGGradient, qui travaille avec un ensemble fixe de couleurs, CGShading utilise une fonction de rappel (CGFunctionRef) qui calcule la couleur à chaque point. Cela permet de créer des dégradés complexes avec des transitions non linéaires et des schémas de couleurs composites.

Pour dessiner un dégradé à l'intérieur d'une forme, un clip sur le contour de cette forme est nécessaire. L'ordre : ajouter le chemin au contexte, appeler CGContextClip, puis dessiner le dégradé. Sans clip, le dégradé remplit tout le contexte. Sous iOS, CGGradient est recommandé comme option plus simple et plus performante — CGShading n'est justifié que pour les fonctions de couleur personnalisées.

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

Travail avec les images : CGImage et CGLayer

CGImage est une image matricielle dans Core Graphics qui peut être chargée à partir d'un fichier, créée par programmation ou obtenue à partir d'UIImage. CGImage contient des données de pixels, des informations d'espace colorimétrique, la taille, la profondeur de bits et la disposition des données. Contrairement à UIImage, CGImage ne gère pas la mise à l'échelle Retina — cette responsabilité incombe au développeur via le paramètre scale.

CGLayer — optimisation du dessin répétitif

CGLayer est un tampon hors ligne pour la pré-rasterisation de contenu statique. Si le même ensemble de commandes de dessin est exécuté de manière répétée (par exemple, un motif de fond), CGLayer le rasterise une fois puis le copie simplement dans le contexte. Selon Apple, l'utilisation de CGLayer peut accélérer le dessin répétitif de 2 à 5 fois sur CPU et jusqu'à 10 fois avec l'accélération matérielle.

Pour charger des images, utilisez CGImageSource — une API puissante pour lire les métadonnées, les miniatures et les images individuelles à partir de GIF/APNG. CGImageSource permet un chargement progressif et la récupération uniquement des fragments nécessaires. Lorsque vous travaillez avec de grandes images (dépassant la taille de l'écran), il est recommandé de créer un CGImageSource avec mise en cache sur disque et d'utiliser CGImageSourceCreateThumbnailAtIndex pour afficher une version réduite.

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

    // dessiner une fois
    layerCtx.setFillColor(UIColor.lightGray.cgColor)
    layerCtx.addEllipse(in: CGRect(origin: .zero, size: size))
    layerCtx.fillPath()
    return layer
}

// utilisation dans draw()
for i in 0..<20 {
    ctx.draw(layer, at: CGPoint(x: CGFloat(i) * 30, y: 0))
}

Exemple de code avec Core Graphics

Construisons une vue personnalisée pour afficher un filigrane sur une image en utilisant Core Graphics. Le filigrane comprend un texte semi-transparent et un logo vectoriel superposés à l'image d'origine. Le code démontre le travail avec CGContext, CGImage, le texte et la transparence dans un seul contexte.

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 }

        // dessiner l'image de fond
        UIImage(named: "background")?.draw(in: rect)

        // configurer la transparence du filigrane
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // texte semi-transparent
        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
        )

        // icône vectorielle (cercle avec croix) sous le texte
        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()
    }
}

Le code utilise les fonctionnalités clés de Core Graphics : saveGState/restoreGState pour isoler les effets du filigrane du fond, translateBy et rotate pour le positionnement et la rotation, le texte semi-transparent via withAlphaComponent et une icône vectorielle via addEllipse et addLineTo. L'ensemble du filigrane est dessiné comme une composition unique après l'image de fond.

Lors de la création de filigranes pour des photos en production, il est important de considérer les performances. Si l'image est plus grande que l'écran, réduisez-la en utilisant CGImageSourceCreateThumbnailAtIndex avant d'appliquer le filigrane. Core Graphics traite toutes les opérations sur le CPU — pour le traitement par lots de dizaines d'images, utilisez une file d'attente en arrière-plan et CGBitmapContext pour éviter de bloquer l'interface utilisateur.