DrawScope : lignes, rectangles et cercles
Dessinez des primitives sur le canevas.
DrawScope : lignes, rectangles et cercles est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Meet the Canvas
The Canvas Composable hands you a blank drawing surface. Inside it you paint pixels directly instead of stacking other Composables.
Canvas(modifier = Modifier.size(200.dp)) {
// drawing goes here
}Inside DrawScope
The lambda you pass to Canvas runs inside a DrawScope. That receiver gives you draw functions and the current size to work with.
Know Your Size
DrawScope exposes size, the area you can paint. Read size.width and size.height so your art scales to whatever space it gets.
Canvas(Modifier.fillMaxSize()) {
val w = size.width
val h = size.height
}Draw a Line
Use drawLine to connect two points. You pass a color, a start Offset, an end Offset, and a stroke width.
drawLine(
color = Color.Blue,
start = Offset(0f, 0f),
end = Offset(size.width, size.height),
strokeWidth = 4f
)Pixels Are Floats
Every coordinate here is a Float in pixels, not dp. The origin (0,0) sits at the top-left and x grows right, y grows down.
Offset Points the Way
An Offset is just an x and y pair. You will build almost every shape position from Offsets, so they show up everywhere on the canvas.
val center = Offset(size.width / 2, size.height / 2)Draw a Rectangle
Call drawRect with a color, a topLeft Offset, and a Size. Leave topLeft out and it fills the whole canvas for you.
drawRect(
color = Color.Green,
topLeft = Offset(20f, 20f),
size = Size(100f, 60f)
)Draw a Circle
Use drawCircle with a color, a radius, and a center Offset. Center it on the canvas and you get a perfectly placed dot.
drawCircle(
color = Color.Red,
radius = 50f,
center = center
)Fill or Stroke
Each shape takes a style. The default is solid Fill, but pass Stroke to draw just the outline with a width you choose.
drawCircle(
color = Color.Black,
radius = 50f,
style = Stroke(width = 6f)
)Control Transparency
Pass an alpha between 0f and 1f to fade any shape. Stack a few translucent circles and you get a soft layered glow.
drawCircle(color = Color.Magenta, radius = 60f, alpha = 0.4f)Order Is Layering
Draw calls paint in order, so later shapes sit on top of earlier ones. Think of it like dropping cutouts onto a page one by one.
Quick Check
Where does the canvas coordinate system begin?
Recap
You learned the Canvas basics: draw inside DrawScope, read size, and paint lines, rects, and circles with Offsets and float pixels. Order is everything! 🎨
Questions Fréquemment Posées
La leçon « DrawScope : lignes, rectangles et cercles » est-elle gratuite ?
Oui — le texte complet de « DrawScope : lignes, rectangles et cercles » 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 Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « DrawScope : lignes, rectangles et cercles » ?
Dessinez des primitives sur le canevas. Tu pratiques Jetpack Compose 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 Jetpack Compose Academy ?
Aucune expérience préalable n'est requise. Jetpack Compose 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 1 sur 4.
Combien de temps prend la leçon « DrawScope : lignes, rectangles et cercles » ?
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 Jetpack Compose Academy ?
Oui. Chaque leçon Jetpack Compose 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
- DrawScope : lignes, rectangles et cercles
- Tracés, dégradés et modes de fusion
- drawWithCache et performances
- Créer un anneau de progression en direct