CGGradient : ce que c'est, types de dégradés et leur création

Qu'est-ce que CGGradient ?

CGGradient est un objet immuable dans Core Graphics qui encapsule un ensemble de couleurs et des règles pour les mélanger le long d'une transition de dégradé. En interne, CGGradient stocke un tableau de CGColor, un tableau de positions (locations) dans la plage [0,0, 1,0] et une référence au CGColorSpace dans lequel les couleurs sont interprétées. Chaque couleur est associée à une position sur l'échelle du dégradé : la position 0,0 correspond au début, 1,0 à la fin de la transition.

Lors de la création d'un CGGradient via la fonction CGGradientCreateWithColors, Core Graphics précalcule les valeurs de couleur intermédiaires. Un dégradé peut contenir un nombre arbitraire d'arrêts de couleur (color stops), permettant des transitions complexes à plusieurs couleurs. Le nombre de couleurs doit être d'au moins deux, et chaque couleur doit correspondre à une position dans le tableau locations.

L'architecture de CGGradient diffère des API de plus haut niveau telles que CAGradientLayer de Core Animation en ce qu'elle fonctionne directement dans le contexte Core Graphics. Cela offre un contrôle total sur le processus de dessin et la capacité de combiner des dégradés avec d'autres opérations Quartz 2D — masques de détourage, ombres et transformations.

Dégradés linéaires et radiaux

Core Graphics prend en charge deux types de dégradés : linéaire (axial) et radial. Un dégradé linéaire est créé avec la fonction CGGradientCreateWithColors et dessiné avec CGContextDrawLinearGradient. Un dégradé radial nécessite la même structure CGGradient mais est dessiné avec CGContextDrawRadialGradient.

Dégradé linéaire (Axial)

Dégradé linéaire étend la transition de couleur le long d'une ligne droite du point de départ startPoint au point d'arrivée endPoint. Les couleurs sont interpolées entre ces deux points, et le comportement au-delà est contrôlé par les options d'extension. Le dégradé linéaire est idéal pour créer des fonds lisses, simuler des surfaces métalliques et des transitions de couleur dans les éléments d'interface.

Dégradé radial

Dégradé radial crée une transition de couleur d'un cercle à un autre. Chaque cercle est défini par un centre (startCenter / endCenter) et un rayon (startRadius / endRadius). La couleur est interpolée du cercle intérieur vers le cercle extérieur. Un cas particulier est lorsque le rayon initial est 0 : le dégradé rayonne à partir d'un seul point. Les dégradés radiaux sont utilisés pour simuler des sources de lumière, des lentilles, des corps célestes et des effets de projecteur.

Créer CGGradient : couleurs et positions

CGGradient est créé avec une seule fonction de base — CGGradientCreateWithColors. La fonction prend un CGColorSpace, un tableau de CGColor (CFArray) et un tableau de CGFloat locations. Si locations est NULL, les couleurs sont réparties uniformément le long de l'échelle du dégradé. Si locations sont spécifiées, leur nombre doit correspondre au nombre de couleurs.

Le tableau locations contient des valeurs de 0,0 à 1,0 qui définissent les points d'arrêt pour chaque couleur. Les valeurs doivent augmenter de manière monotone. Si la première valeur est supérieure à 0,0, la couleur du début jusqu'à cette position est extrapolée à partir de la couleur à la position 0,0. De même pour la dernière valeur inférieure à 1,0. Ce comportement est contrôlé par les options d'extension lors du dessin.

Lors du choix des couleurs pour un dégradé, il est important de considérer l'espace colorimétrique. Toutes les couleurs dans un même CGGradient doivent appartenir au même CGColorSpace — Core Graphics interpole les composants dans cet espace. Si les couleurs sont créées dans des espaces différents, elles doivent d'abord être converties vers un espace commun via CGColorCreateCopyByMatchingToColorSpace.

Dessiner un dégradé dans le contexte

Core Graphics fournit deux fonctions pour dessiner un dégradé : CGContextDrawLinearGradient pour le linéaire et CGContextDrawRadialGradient pour le radial. Les deux fonctions acceptent un contexte graphique, un objet CGGradient, des options d'extension et des paramètres géométriques spécifiques au type. Le dessin est effectué en tenant compte du masque de détourage actuel et de la transformation du contexte.

Options d'extension (Gradient Options)

Les options d'extension contrôlent le comportement du dégradé au-delà de la plage de positions 0,0–1,0. La constante kCGGradientDrawsBeforeStartLocation remplit la zone avant la position de départ avec la couleur du premier arrêt. kCGGradientDrawsAfterEndLocation remplit avec la couleur du dernier arrêt. Ces options peuvent être combinées via un masque de bits. Pour les dégradés radiaux, les options s'appliquent à la zone au-delà des rayons de début et de fin.

Effet des transformations

Le dégradé est dessiné dans le système de coordonnées du contexte graphique actuel, en tenant compte de sa transformation (CTM — Current Transformation Matrix). L'application de CGContextTranslateCTM, CGContextScaleCTM ou CGContextRotateCTM avant d'appeler la fonction de dessin modifie la position et l'échelle du dégradé. Cela permet de réutiliser un seul CGGradient pour différentes zones sans créer de nouveaux objets.

Options : extension, lissage et masquage

Core Graphics fournit plusieurs mécanismes supplémentaires pour contrôler les dégradés : l'anti-crénelage (antialiasing), le masquage via un masque de détourage (clipping mask) et la combinaison avec des effets de transparence. L'anti-crénelage est activé par défaut dans le contexte graphique et est contrôlé via CGContextSetShouldAntialias.

Masque de détourage permet de restreindre la zone de dessin du dégradé à une forme arbitraire. Avant d'appeler CGContextDrawLinearGradient, il est nécessaire de définir un chemin via CGContextBeginPath, CGContextAddPath et CGContextClip. Le dégradé est dessiné uniquement à l'intérieur de la zone délimitée par ce chemin. Ceci est largement utilisé pour créer des icônes dégradées, des boutons et des barres de progression.

L'extension du dégradé est un autre paramètre important. Lors de l'utilisation de kCGGradientDrawsBeforeStartLocation, Core Graphics extrapole la couleur du premier arrêt sur toute la zone avant startPoint. Sans cette option, la zone en dehors du dégradé reste non remplie (transparente). La combinaison des deux options garantit que tout le rectangle du contexte graphique est rempli avec un dégradé, même si startPoint et endPoint se trouvent à l'intérieur.

Exemples de code Swift

Voyons des exemples pratiques de création et de dessin de dégradés dans iOS en utilisant CGGradient et Core Graphics.

Dégradé linéaire avec trois couleurs

Cet exemple crée un dégradé linéaire avec trois couleurs (bleu, vert, rouge) et le dessine en diagonale à travers une UIView. Le tableau locations distribue les couleurs de manière inégale : bleu de 0,0 à 0,3, vert à 0,6, rouge de 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])
}

Dégradé radial avec effet de lueur

Cet exemple dessine un dégradé radial simulant un effet de lueur. Le point de départ avec un rayon nul définit le centre de la lueur, et le cercle extérieur définit la limite d'atténuation. Cet effet est utilisé pour mettre en évidence des éléments d'interface ou des indicateurs d'activité.

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

Dégradé avec masque de détourage

Dans cet exemple, le dégradé est limité à une zone circulaire via un chemin de détourage. Avant de dessiner le dégradé, un chemin circulaire est défini, qui devient le masque actuel du contexte. Le dégradé remplit uniquement la zone à l'intérieur du cercle, créant un effet d'icône dégradée.

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Creating circular clip path
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Drawing gradient inside clip mask
    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])
}