Jetpack Compose Academy · Lekcja

DrawScope: linie, prostokąty i okręgi

Rysuj prymitywy na płótnie

DrawScope: linie, prostokąty i okręgi to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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! 🎨

Często zadawane pytania

Czy lekcja „DrawScope: linie, prostokąty i okręgi” jest bezpłatna?

Tak — pełny tekst „DrawScope: linie, prostokąty i okręgi” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „DrawScope: linie, prostokąty i okręgi”?

Rysuj prymitywy na płótnie Ćwiczysz Jetpack Compose Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Jetpack Compose Academy?

Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „DrawScope: linie, prostokąty i okręgi”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Jetpack Compose Academy?

Tak. Każda lekcja Jetpack Compose Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Jetpack Compose Academy