Paths, gradients og blend modes
Opret komplekse udfyldninger og streger.
Paths, gradients og blend modes er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Ud over simple former
Linjer og cirkler er gode, men rigtig grafik kræver kurver og fyld med mere dybde. Mød Path, gradienter og blandingstilstande, så du kan tage næste skridt.
Hvad er en Path
En Path er en gemt kontur, som du opbygger punkt for punkt. Du flytter dig og tegner linjer rundt, og derefter tegner du den færdige form med ét kald.
val path = Path()
path.moveTo(0f, 0f)
path.lineTo(100f, 0f)moveTo og lineTo
Brug moveTo til at løfte pennen til et startpunkt, og brug derefter lineTo til at tegne lige linjestykker. Kæd dem sammen for at tegne den polygon, du ønsker.
path.moveTo(0f, 0f)
path.lineTo(80f, 120f)
path.lineTo(160f, 0f)
path.close()Kurver med quadraticBezierTo
Brug quadraticBezierTo til jævne buer. Et kontrolpunkt trækker linjen ind i en kurve, hvilket er perfekt til bløde kanter på diagrammer.
path.quadraticBezierTo(50f, -40f, 100f, 0f)Tegn Path
Når den er opbygget, giver du drawPath din Path sammen med en farve eller pensel. Du kan fylde den med en ensfarvet farve eller tegne omridset med en Stroke-typografi.
drawPath(path = path, color = Color.Blue)Mød Brush
En Brush beskriver, hvordan et område males. I stedet for en flad farve kan en Brush lægge en jævn gradient hen over din form.
Lineære gradienter
Brug Brush.linearGradient til at blande farver langs en lige linje. Giv den en liste med farver, og se dem gradvist gå fra den ene til den næste.
val brush = Brush.linearGradient(
listOf(Color.Cyan, Color.Magenta)
)
drawRect(brush = brush)Radiale gradienter
Brug Brush.radialGradient til at blande farver ud fra et centrum. Den er ideel til spotlys, bløde knapper og lysende kugler.
val glow = Brush.radialGradient(
listOf(Color.White, Color.Blue)
)Svinggradienter
En Brush.sweepGradient drejer farver rundt om et centrum. Det er hemmeligheden bag farverige fremdriftsringe og regnbuefarvede drejeskiver.
val sweep = Brush.sweepGradient(
listOf(Color.Red, Color.Yellow, Color.Red)
)Mød blandingstilstande
En BlendMode bestemmer, hvordan en ny form blandes med det, der allerede er tegnet. Multiply gør mørkere, Screen gør lysere, og Plus lægger lys til.
drawCircle(
color = Color.Yellow,
blendMode = BlendMode.Multiply
)Læg lag på til effekter
Blandingstilstande kommer virkelig til deres ret, når former overlapper hinanden. Læg to gennemsigtige cirkler oven på hinanden med BlendMode.Plus, så lyser deres overlap lysere.
Hurtigt tjek
Hvilken Brush drejer farver rundt om et centrum?
Opsummering
Du kan nu opbygge kurver med Path, fylde former med lineære, radiale og svingende gradienter og kombinere dem med blandingstilstande. Nu er det tid til at være kreativ! ✨
Lær Kotlin med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Paths, gradients og blend modes” gratis?
Ja — hele teksten til “Paths, gradients og blend modes” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Paths, gradients og blend modes”?
Opret komplekse udfyldninger og streger. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Jetpack Compose Academy?
Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Paths, gradients og blend modes”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?
Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- DrawScope: Linjer, rektangler og cirkler
- Paths, gradients og blend modes
- drawWithCache og ydeevne
- Opbyg en live-fremdriftsring