前回、CustomPaintでいろいろ描いていくプロジェクトを作りました。
今回はたくさんの円を重ねる模様を書きました。
コードは以下のような感じです。
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
パッケージで提供されています。
模様の描き方は以下の本がとても参考になりました。
![]() |
今回書いたコード全体は以下のコミットをご参照ください。