CustomPainter ja Canvas
Tutustukaa mukautettuun piirtämiseen `CustomPainter`-luokan ja `Canvas`-rajapinnan avulla ainutlaatuisten muotojen, kaavioiden ja visuaalisten tehosteiden luomiseksi.
CustomPainter ja Canvas on ilmainen Mobiilikehitys Flutterilla-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Mobiilikehitys Flutterilla-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Mobiilikehitys Flutterilla-kurssilla on yhteensä 4 oppituntia.
Johdatus mukautettuun piirtämiseen
Flutterin widgetit ovat tehokkaita, mutta joskus sinun on piirrettävä jotain todella ainutlaatuista. Tällaisia voivat olla esimerkiksi mukautetut kaaviot, ainutlaatuiset muodot tai erityiset visuaaliset tehosteet!
Tässä auttaa mukautettu piirtäminen. Se antaa pikselitason hallinnan näytöllä näkyvään sisältöön, joten voit luoda lähes mitä tahansa.
Tutustuminen CustomPainteriin
Flutterin mukautetun piirtämisen ytimessä on CustomPainter-luokka. Laajennat tätä luokkaa määrittääksesi, mitä ja miten piirretään.
- Se tarjoaa piirtämiseen käytettävän canvasin.
- Sinun on toteutettava kaksi keskeistä menetelmää:
paintjashouldRepaint.
Canvas: piirtoalustasi
paint-menetelmä saa parametrikseen Canvas-objektin. Ajattele Canvas-objektia tyhjänä piirtoalustana, joka on valmis vastaanottamaan piirto-ohjeesi.
Se käyttää 2D-karteesista koordinaatistoa: vasemman yläkulman koordinaatti on (0,0). X-arvot kasvavat oikealle ja Y-arvot alaspäin.
Tyylin määrittäminen Paintilla
Ennen piirtämistä sinun on kerrottava Flutterille, miten piirretään. Tämä tehdään Paint-objektin avulla. Paint-objekti määrittää esimerkiksi seuraavat ominaisuudet:
- Color: Minkä värinen piirros on?
- StrokeWidth: Kuinka paksuja viivojen tulee olla?
- Style: Täytetäänkö muoto (
PaintingStyle.fill) vai piirretäänkö siitä vain ääriviivat (PaintingStyle.stroke)?
Perusmuotojen piirtäminen: viiva
Piirretään ensimmäinen muotomme: yksinkertainen viiva! Käytämme canvas.drawLine()-metodia antamalla alku- ja loppupisteet (Offset) sekä Paint-tyylin.
Kokeile suorittaa tämä esimerkki:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Draw Line')),
body: Center(
child: CustomPaint(
painter: LinePainter(),
child: Container(),
),
),
),
);
}
}
class LinePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.blue
..strokeWidth = 4.0
..style = PaintingStyle.stroke;
final p1 = Offset(0, size.height / 2);
final p2 = Offset(size.width, size.height / 2);
canvas.drawLine(p1, p2, paint);
}
@override
bool shouldRepaint(covariant LinePainter oldDelegate) => false;
}Perusmuotojen piirtäminen: ympyrä
Ympyrän piirtäminen on yhtä helppoa canvas.drawCircle()-metodilla. Tarvitset keskipisteen, säteen ja Paint-olion.
Huomaa, kuinka käytämme arvoja size.width / 2 ja size.height / 2 piirrosten keskittämiseen.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Draw Circle')),
body: Center(
child: CustomPaint(
painter: CirclePainter(),
child: Container(),
),
),
),
);
}
}
class CirclePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.red
..strokeWidth = 5.0
..style = PaintingStyle.fill;
final center = Offset(size.width / 2, size.height / 2);
final radius = size.width / 4;
canvas.drawCircle(center, radius, paint);
}
@override
bool shouldRepaint(covariant CirclePainter oldDelegate) => false;
}Perusmuotojen piirtäminen: suorakulmio
Suorakulmion piirtämiseen käytämme canvas.drawRect()-metodia. Tämä metodi ottaa parametriksi Rect-olion, joka määrittää suorakulmion sijainnin ja koon.
Rect.fromLTWH-konstruktori on hyödyllinen, kun suorakulmio määritetään sen vasemman reunan, yläreunan, leveyden ja korkeuden avulla.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Draw Rectangle')),
body: Center(
child: CustomPaint(
painter: RectanglePainter(),
child: Container(),
),
),
),
);
}
}
class RectanglePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.green
..strokeWidth = 3.0
..style = PaintingStyle.stroke;
final rect = Rect.fromLTWH(size.width * 0.2, size.height * 0.2, size.width * 0.6, size.height * 0.6);
canvas.drawRect(rect, paint);
}
@override
bool shouldRepaint(covariant RectanglePainter oldDelegate) => false;
}shouldRepaint-metodi
CustomPainter-luokan shouldRepaint-metodi on suorituskyvyn kannalta ratkaiseva. Se kertoo Flutterille, täytyykö mukautettu piirros piirtää uudelleen.
- Palauta
true, jos uusi delegaatti eli päivitetty piirtäjä sisältää piirrokseen vaikuttavia tietoja, jotka ovat muuttuneet. - Palauta
false, jos piirros olisi täysin sama. Näin vältetään tarpeettomat uudelleenpiirrot ja säästetään suorittimen laskentatehoa.
Staattisissa piirroksissa false riittää usein.
Monimutkaisten muotojen piirtäminen Path-olion avulla
Monimutkaisempia tai epäsäännöllisiä muotoja varten käytät Path-oliota. Path-olion avulla voit määrittää toisiinsa yhdistettyjen viivojen ja käyrien sarjan.
Voit siirtyä pisteeseen (moveTo), piirtää viivoja pisteisiin (lineTo) ja lopuksi sulkea polun (close) ennen sen piirtämistä canvas.drawPath()-metodilla.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Draw Triangle')),
body: Center(
child: CustomPaint(
painter: TrianglePainter(),
child: Container(),
),
),
),
);
}
}
class TrianglePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.purple
..style = PaintingStyle.fill;
final path = Path();
path.moveTo(size.width / 2, size.height * 0.1);
path.lineTo(size.width * 0.9, size.height * 0.9);
path.lineTo(size.width * 0.1, size.height * 0.9);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant TrianglePainter oldDelegate) => false;
}Testaa tietosi!
Mitkä seuraavista Flutterin mukautettua piirtämistä koskevista väitteistä ovat TOSIA?
Kertaus: mukautetun piirtämisen perusteet
Olet ottanut ensimmäiset askeleesi Flutterin mukautetussa piirtämisessä! Opit seuraavat asiat:
CustomPainteron mukautettujen visuaalisten elementtien lähtökohta.Canvas-olio on piirtoalustasi, jonka origo on vasemmassa yläkulmassa.Paint-olio määrittää tyylin (värin, viivan ja täytön).- Kuinka piirtää perusmuotoja, kuten viivoja, ympyröitä ja suorakulmioita.
shouldRepaintauttaa optimoimaan suorituskykyä.Pathmahdollistaa monimutkaisten ja mukautettujen muotojen piirtämisen.
Jatka kokeilemista ja herätä ainutlaatuiset suunnitelmasi eloon!
Opi Dart 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
- 22
- Oppitunnit
- 88
Usein kysytyt kysymykset
Onko oppitunti ”CustomPainter ja Canvas” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Mobiilikehitys Flutterilla-oppimispolun 3 oppituntia, myös oppitunnin “CustomPainter ja Canvas”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Mobiilikehitys Flutterilla-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”CustomPainter ja Canvas”?
Tutustukaa mukautettuun piirtämiseen `CustomPainter`-luokan ja `Canvas`-rajapinnan avulla ainutlaatuisten muotojen, kaavioiden ja visuaalisten tehosteiden luomiseksi. Harjoittelet Mobiilikehitys Flutterilla-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Mobiilikehitys Flutterilla-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Mobiilikehitys Flutterilla-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”CustomPainter ja Canvas”-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ä Mobiilikehitys Flutterilla-oppitunnilla?
Kyllä. Jokainen Mobiilikehitys Flutterilla-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
- CustomPainter ja Canvas
- Implisiittiset animaatiot
- Eksplisiittiset animaatiot ja Herot
- Porrastetut ja fysiikkapohjaiset animaatiot