前回、CustomPaintでいろいろ描いていくプロジェクトを作りました。
https://flutter.tnantoka.com/entry/2019/07/30/230404
今回はたくさんの円を重ねる模様を書きました。
コードは以下のような感じです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class _MyPainter extends CustomPainter {
@override
bool shouldRepaint(_MyPainter oldDelegate) {
return false;
}
@override
void paint(Canvas canvas, Size size) {
const double radius = 100;
final Paint fill = Paint()
..color = Colors.black.withAlpha(20)
..style = PaintingStyle.fill;
final Paint stroke = Paint()
..color = Colors.black.withAlpha(40)
..style = PaintingStyle.stroke
..strokeWidth = 1;
for (int i = 0; i < 360; i += 15) {
final double rotation = radians(i.toDouble());
final double x = radius * cos(rotation);
final double y = radius * sin(rotation);
canvas.drawCircle(Offset(x, y), radius * 0.7, fill);
canvas.drawCircle(Offset(x, y), radius * 0.7, stroke);
}
}
}
cos
・sin
を使ってx
・y
をradius
の大きさの円上を移動させていき、各座標でradius
より少し小さい円を描いています。
cos
・sin
はdart:math
、radians
はvector_math
パッケージで提供されています。
模様の描き方は以下の本がとても参考になりました。
今回書いたコード全体は以下のコミットをご参照ください。
https://github.com/tnantoka/moyo/commit/8c1f0652f5bb0c7a670938d07ba4f4b3937c15a8