DrawScope: linee, rettangoli e cerchi
Disegni primitive sul canvas.
DrawScope: linee, rettangoli e cerchi è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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! 🎨
Domande Frequenti
La lezione «DrawScope: linee, rettangoli e cerchi» è gratuita?
Sì — il testo completo di «DrawScope: linee, rettangoli e cerchi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «DrawScope: linee, rettangoli e cerchi»?
Disegni primitive sul canvas. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «DrawScope: linee, rettangoli e cerchi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- DrawScope: linee, rettangoli e cerchi
- Percorsi, gradienti e modalità di fusione
- drawWithCache e prestazioni
- Creare un anello di avanzamento live