Chapitre 21 — Coordonnées, Canvas et dessin 2D

Niveau : intermédiaire Durée estimée : 7 h Pré-requis : chapitre 19 (Flutter en accéléré, CustomPainter) et chapitre 20 (boucle de jeu, Ticker, delta time) Ce que vous saurez faire à la fin : dessiner n'importe quelle scène 2D à la main avec Canvas et Paint, la positionner au pixel près dans le repère de l'écran, la transformer (translation, rotation, échelle) et l'animer avec le dt de la boucle de jeu.

21.0 — Objectifs du chapitre

À la fin de ce chapitre, vous serez capable de :

• expliquer pourquoi l'axe Y de l'écran est orienté vers le bas, contrairement au repère mathématique ;
• situer l'origine (0, 0) d'une zone de dessin et raisonner en coordonnées locales ;
• distinguer un pixel logique d'un pixel physique et utiliser devicePixelRatio ;
• lire la taille de la zone de dessin transmise à paint() et vous y adapter ;
• manipuler Offset, Rect et Size, les trois types de base de la géométrie Flutter ;
• anticiper la différence entre Vector2 (Flame) et Offset (Flutter) ;
• écrire un CustomPainter propre, avec un shouldRepaint() correct ;
• configurer un objet Paint : couleur, style, épaisseur de trait ;
• dessiner des rectangles, cercles, lignes, ellipses, rectangles arrondis, chemins et points ;
• dessiner du texte dans un Canvas avec TextPainter ;
• construire des couleurs en ARGB et appliquer une transparence ;
• appliquer un dégradé linéaire ou radial à une forme ;
• expliquer et exploiter l'ordre de dessin (« algorithme du peintre ») ;
• utiliser save() / restore() sans jamais déséquilibrer la pile ;
• appliquer translate(), rotate() et scale(), et comprendre pourquoi leur ordre compte ;
• dessiner une forme autour de son centre plutôt que de son coin (notion d'ancre) ;
• limiter le dessin à une zone avec clipRect() ;
• expliquer le double buffering et pourquoi l'écran ne clignote pas ;
• identifier ce qui coûte cher dans paint() et l'éviter ;
• dessiner une grille de donjon et un personnage entièrement en formes géométriques ;
• animer un dessin avec le dt du chapitre 20.