Polut, liukuvärit ja sekoitustilat
Luokaa monimutkaisia täyttöjä ja viivoja.
Polut, liukuvärit ja sekoitustilat on ilmainen Jetpack Compose Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Jetpack Compose Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.
Yksinkertaisia muotoja pidemmälle
Viivat ja ympyrät ovat hienoja, mutta todellinen grafiikka tarvitsee käyriä ja näyttäviä täyttöjä. Tutustutaan Path-polkuihin, liukuväreihin ja sekoitustiloihin, joilla pääset seuraavalle tasolle.
Mikä on Path
Path on tallennettu ääriviiva, jonka rakennat piste pisteeltä. Siirryt ja piirrät viivoja reittiä pitkin ja piirrät valmiin muodon lopuksi yhdellä kutsulla.
val path = Path()
path.moveTo(0f, 0f)
path.lineTo(100f, 0f)moveTo ja lineTo
Käytä moveTo-kutsua siirtääksesi kynän aloituspisteeseen ja piirrä sitten suoria osia lineTo-kutsulla. Ketjuta kutsut ja jäljitä haluamasi monikulmio.
path.moveTo(0f, 0f)
path.lineTo(80f, 120f)
path.lineTo(160f, 0f)
path.close()Käyrät quadraticBezierTo-kutsulla
Käytä pehmeisiin kaarteisiin quadraticBezierTo-kutsua. Ohjauspiste vetää viivan käyräksi, mikä sopii erinomaisesti kaavioiden pehmeisiin reunoihin.
path.quadraticBezierTo(50f, -40f, 100f, 0f)Piirrä Path
Kun polku on rakennettu, anna se drawPath-kutsulle värin tai siveltimen kanssa. Voit täyttää sen yhtenäisellä värillä tai piirtää sen ääriviivat Stroke-tyylillä.
drawPath(path = path, color = Color.Blue)Tutustu Brush-siveltimeen
Brush määrittää, miten alue maalataan. Tasaisen värin sijaan sivellin voi levittää muodon yli pehmeän liukuvärin.
Lineaariset liukuvärit
Käytä Brush.linearGradient-sivellintä värien sekoittamiseen suoraa viivaa pitkin. Anna väriluettelo ja seuraa, kuinka värit sulautuvat vähitellen toisikseen.
val brush = Brush.linearGradient(
listOf(Color.Cyan, Color.Magenta)
)
drawRect(brush = brush)Säteittäiset liukuvärit
Käytä Brush.radialGradient-sivellintä värien sekoittamiseen keskipisteestä ulospäin. Se sopii erinomaisesti valokeiloihin, pehmeisiin painikkeisiin ja hohtaviin palloihin.
val glow = Brush.radialGradient(
listOf(Color.White, Color.Blue)
)Pyyhkäisyliukuvärit
Brush.sweepGradient kiertää värejä keskipisteen ympäri. Se on värikkäiden edistymisrenkaiden ja sateenkaarimittareiden salaisuus.
val sweep = Brush.sweepGradient(
listOf(Color.Red, Color.Yellow, Color.Red)
)Tutustu BlendModeen
BlendMode määrittää, miten uusi muoto sekoittuu jo piirrettyyn sisältöön. Multiply tummentaa, Screen vaalentaa ja Plus lisää valoa.
drawCircle(
color = Color.Yellow,
blendMode = BlendMode.Multiply
)Käytä tasoja tehosteisiin
Sekoitustilat pääsevät oikeuksiinsa muotojen limittyessä. Aseta kaksi läpikuultavaa ympyrää päällekkäin käyttäen BlendMode.Plus-tilaa, jolloin niiden leikkauskohta hohtaa kirkkaampana.
Pikatarkistus
Mikä sivellin kiertää värejä keskipisteen ympäri?
Kertaus
Osaat nyt rakentaa käyriä Path-poluilla, täyttää muotoja lineaarisilla, säteittäisillä ja pyyhkäisyliukuväreillä sekä yhdistää niitä sekoitustiloilla. Nyt on aika olla luova! ✨
Opi Kotlin tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Polut, liukuvärit ja sekoitustilat” ilmainen?
Kyllä – oppitunnin ”Polut, liukuvärit ja sekoitustilat” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Jetpack Compose Academy-kurssin, päivitä CoddyKit PROhon. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Polut, liukuvärit ja sekoitustilat”?
Luokaa monimutkaisia täyttöjä ja viivoja. Harjoittelet Jetpack Compose Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Jetpack Compose Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Jetpack Compose Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Polut, liukuvärit ja sekoitustilat”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Jetpack Compose Academy-oppitunnilla?
Kyllä. Jokainen Jetpack Compose Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- DrawScope: viivat, suorakulmiot ja ympyrät
- Polut, liukuvärit ja sekoitustilat
- drawWithCache ja suorituskyky
- Reaaliaikaisen edistymärenkaan rakentaminen