Stroke, fill ja overlay
Piirrä muotojen ääriviivat ja täytteet tunnisteita ja kortteja varten
Stroke, fill ja overlay on ilmainen SwiftUI Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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 SwiftUI Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. SwiftUI Academy-kurssilla on yhteensä 4 oppituntia.
Fill vai Stroke
Muodon voi värittää sisältä fill-muuntimella tai piirtää sen ääriviivat stroke-muuntimella. Yhdessä niiden avulla voi rakentaa merkkejä ja kortteja.
Muodon täyttäminen
Käytä fill-muunninta muodon koko sisäosan täyttämiseen värillä tai gradientilla. Se on yleisin tapa värittää muoto. 🎨
Circle()
.fill(.blue)Ääriviivan piirtäminen strokella
stroke-muunnin piirtää vain muodon reunan ja jättää keskiosan tyhjäksi. Se sopii täydellisesti onttoihin renkaisiin ja ääriviivoihin.
Circle()
.stroke(.blue)Viivan leveyden hallinta
Anna strokelle lineWidth, niin voit tehdä ääriviivasta paksumman tai ohuemman. Suurempi luku tuottaa korostetumman reunan.
Circle()
.stroke(.blue, lineWidth: 4)Katkoviivat
Käytä StrokeStyle-tyyliä ja katkoviivakuviota katkoviivojen piirtämiseen. Se sopii erinomaisesti käyttöliittymän paikkamerkkeihin ja pudotusalueisiin.
RoundedRectangle(cornerRadius: 12)
.stroke(style: StrokeStyle(lineWidth: 2, dash: [6]))Täyttö ja ääriviiva yhdessä
Haluatko sekä täytön että reunan? Käytä fill-muunninta stroke-argumentin kanssa, niin täytät sisäosan ja piirrät ääriviivan yhdellä kutsulla.
Circle()
.fill(.yellow)
.stroke(.orange, lineWidth: 3)Tutustutaan overlay-muuntimeen
overlay-muunnin asettaa näkymän toisen päälle. Käytä sitä reunan, merkin tai kuvakkeen lisäämiseen olemassa olevan sisällön päälle.
Reunat overlay-muuntimella
Klassinen keino: täytä muoto ja lisää sitten sen päälle ääriviivallinen kopio overlay-muuntimella. Saat siististi täytetyn kortin ja terävän reunan.
RoundedRectangle(cornerRadius: 12)
.fill(.white)
.overlay(
RoundedRectangle(cornerRadius: 12)
.stroke(.gray, lineWidth: 1))Kuvakkeen asettaminen päälle
Voit asettaa päälle minkä tahansa näkymän, et vain muotoja. Lisää kortin päälle pieni merkki tai kuvake korostamaan uusia tai tärkeitä kohteita.
Circle()
.fill(.blue)
.overlay(Text("3").foregroundStyle(.white))overlay vai background
Muista kerrokset: overlay on näkymän päällä, kun taas background on sen takana. Valitse sen mukaan, kummalle puolelle haluat koristeen.
Merkin rakentaminen
Yhdistä fill, stroke ja overlay, niin voit luoda viimeisteltyjä merkkejä, avatareja ja kortteja. Nämä kolme työkalua kattavat useimmat koristelutarpeet. ✨
Pikatarkistus
Haluat asettaa ääriviivallisen reunan täytetyn muodon päälle. Millä muuntimella näkymä sijoitetaan päälle?
Kertaus: Stroke, Fill ja overlay
Opit täyttämään muotoja fill-muuntimella, piirtämään niille ääriviivat strokella ja lisäämään ylimääräisiä kerroksia overlaylla. Osaat nyt rakentaa oikeita merkkejä ja kortteja!
Opi Swift 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 ”Stroke, fill ja overlay” ilmainen?
Kyllä – oppitunnin ”Stroke, fill ja overlay” 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 SwiftUI Academy-kurssin, päivitä CoddyKit PROhon. SwiftUI Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Stroke, fill ja overlay”?
Piirrä muotojen ääriviivat ja täytteet tunnisteita ja kortteja varten Harjoittelet SwiftUI Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni SwiftUI Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin SwiftUI Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Stroke, fill ja overlay”-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ä SwiftUI Academy-oppitunnilla?
Kyllä. Jokainen SwiftUI 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
- Color-tyyppi ja resurssien värit
- Lineaariset, säteittäiset ja kulmaliukuvärit
- Sisäänrakennetut muodot
- Stroke, fill ja overlay