Moyo: いくつも円を重ねる

August 2, 2019

前回、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);
    }
  }
}

cossinを使ってxyradiusの大きさの円上を移動させていき、各座標でradiusより少し小さい円を描いています。
cossindart:mathradiansvector_mathパッケージで提供されています。

模様の描き方は以下の本がとても参考になりました。

きれいな模様の描き方―うずまき、万華鏡模様からスピログラフまで 定規とコンパスで、みるみる描ける!

今回書いたコード全体は以下のコミットをご参照ください。

https://github.com/tnantoka/moyo/commit/8c1f0652f5bb0c7a670938d07ba4f4b3937c15a8