Swift Academy · Leçon

Dessin personnalisé avec Core Graphics

Dessinez des tracés et des formes dans draw(_:).

Leçon 4 sur 413 étapes

Dessin personnalisé avec Core Graphics est une leçon Swift Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Swift Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Swift Academy comprend 4 leçons au total.

Quand dessiner un contenu personnalisé

Lorsque les calques et les images ne suffisent pas à représenter une forme — graphiques, signatures ou contrôles personnalisés — dessinez-la vous-même avec Core Graphics (Quartz 2D).

Redéfinir draw(_:)

Créez une sous-classe de UIView et redéfinissez draw(_:). UIKit l’appelle avec un contexte configuré ; vous y exécutez les commandes de dessin.

import UIKit
final class ChartView: UIView {
    override func draw(_ rect: CGRect) {
        // drawing commands go here
    }
}

Le contexte graphique

Dans draw(_:), obtenez le CGContext actuel. Il s’agit d’une zone de dessin avec état : définissez les couleurs et les épaisseurs de trait, puis tracez ou remplissez.

override func draw(_ rect: CGRect) {
    guard let ctx = UIGraphicsGetCurrentContext() else { return }
    ctx.setFillColor(UIColor.systemTeal.cgColor)
    ctx.fill(rect)
}

Construire des tracés

Un CGPath (ou UIBezierPath) décrit des lignes, des courbes et des formes. Déplacez-vous jusqu’à un point de départ, puis ajoutez des lignes et des courbes.

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 100, y: 50))
path.addLine(to: CGPoint(x: 0, y: 100))
path.close()

Tracer et remplir

Le tracé dessine le contour d’un chemin ; le remplissage en colore l’intérieur. Définissez la couleur et l’épaisseur, puis appelez stroke() ou fill().

UIColor.systemRed.setStroke()
let line = UIBezierPath()
line.lineWidth = 3
line.move(to: CGPoint(x: 10, y: 10))
line.addLine(to: CGPoint(x: 90, y: 90))
line.stroke()

Courbes

Ajoutez des courbes lisses avec des segments de Bézier quadratiques (addQuadCurve) ou cubiques (addCurve), en indiquant les points de contrôle.

let p = UIBezierPath()
p.move(to: CGPoint(x: 0, y: 100))
p.addCurve(to: CGPoint(x: 200, y: 100),
           controlPoint1: CGPoint(x: 50, y: 0),
           controlPoint2: CGPoint(x: 150, y: 200))

État du contexte : enregistrer et restaurer

Le contexte conserve son état. Encadrez les transformations et le détourage par saveGState()/restoreGState() afin que les modifications ne se répercutent pas sur les dessins suivants.

ctx.saveGState()
ctx.translateBy(x: 50, y: 50)
ctx.rotate(by: .pi / 4)
// draw rotated content
ctx.restoreGState()

Dégradés et ombres

Core Graphics dessine directement les dégradés (CGGradient avec drawLinearGradient) et les ombres (setShadow(offset:blur:color:)) dans le contexte.

ctx.setShadow(offset: CGSize(width: 0, height: 2),
              blur: 4,
              color: UIColor.black.cgColor)

Détourage

Ajoutez un tracé, puis appelez clip() pour limiter le dessin suivant à cette région — pratique pour les images aux coins arrondis ou les remplissages masqués.

let clipPath = UIBezierPath(ovalIn: rect)
clipPath.addClip()
// drawing now constrained to the oval

Performances et setNeedsDisplay

draw(_:) s’exécute sur le CPU et son coût est relativement élevé. Ne déclenchez une nouvelle mise à jour que lorsque cela est nécessaire avec setNeedsDisplay(), et gardez le code de dessin léger.

func updateData() {
    self.data = newData
    setNeedsDisplay() // schedule one redraw
}

Rendu hors écran

Pour les bitmaps réutilisables, effectuez le rendu dans une image avec UIGraphicsImageRenderer au lieu de redessiner chaque image.

let renderer = UIGraphicsImageRenderer(size: CGSize(width: 100, height: 100))
let image = renderer.image { ctx in
    UIColor.systemBlue.setFill()
    ctx.fill(CGRect(x: 0, y: 0, width: 100, height: 100))
}

Vérification rapide : Core Graphics

Vérifiez votre compréhension du dessin personnalisé.

Réponds-y dans la leçon interactive

Récapitulatif : dessin personnalisé avec Core Graphics

Redéfinissez draw(_:) et envoyez des commandes au CGContext : construisez des tracés avec des lignes et des courbes de Bézier, puis tracez ou remplissez. Isolez les transformations et le détourage avec saveGState()/restoreGState(), puis ajoutez directement les dégradés, les ombres et les détourages.

Le dessin sollicite le CPU : ne redessinez qu’avec setNeedsDisplay() et mettez en cache les bitmaps réutilisables avec UIGraphicsImageRenderer.

Gratuit pour commencer

Apprends Swift avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 122
Leçons: 409

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Dessin personnalisé avec Core Graphics » est-elle gratuite ?

Oui — le texte complet de « Dessin personnalisé avec Core Graphics » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Swift Academy, passe à CoddyKit PRO. Le cours Swift Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Dessin personnalisé avec Core Graphics » ?

Dessinez des tracés et des formes dans draw(_:). Tu pratiques Swift Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Swift Academy ?

Aucune expérience préalable n'est requise. Swift Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Dessin personnalisé avec Core Graphics » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Swift Academy ?

Oui. Chaque leçon Swift Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Swift Academy