【Flutter】CustomPaintを用いて破線を描く

前に記事ではFlutterのカスタマイズ描画の使い方を詳しく書きましたが、それ詳細の運用はまだ書いてなく、今回の記事では、CustomPaintのPathを使って破線を描きます。

本記事のサンプルソースはGithubにご参考ください。

破線

破線を描く考え方というのは、空白部分を飛ばして、実線部分を書くことです。
まずは直線１本からスタートします。

   @override
   void paint(Canvas canvas, Size size) {
    canvas.translate(size.width / 2, size.height / 2);
    Paint paint = Paint()..style = PaintingStyle.stroke
      ..color=Colors.green..strokeWidth = 2;

    Path path = Path();
    path.moveTo(-100, 0);
    path.lineTo(100, 0);

    canvas.drawPath(path, paint);
  }

その直線のpathを使って、破線のPathを作りましょう。

  final double step;
  final double span;
  double get partLength => step + span;
  Path dashPath(Path source){
    final PathMetrics pms = source.computeMetrics();
    final Path dest = Path();
    for (var pm in pms) {
      // 破線組合せセットの数
      final int count = pm.length ~/ partLength;
      for (int i = 0; i < count; i++) {
        // 実線部分
        dest.addPath(pm.extractPath(partLength * i, partLength * i + step), Offset.zero);
      }
      // 余った部分
      final double tail = pm.length % partLength;
      dest.addPath(pm.extractPath(pm.length-tail, pm.length), Offset.zero);
    }
    return dest;
  }

同じ考え方で四角や円形にも破線で描けます。

   @override
   void paint(Canvas canvas, Size size) {
    canvas.translate(size.width / 2, size.height / 2);
    Paint paint = Paint()..style = PaintingStyle.stroke
      ..color=Colors.green..strokeWidth = 2;

    Path path = Path();
    path.addRRect(RRect.fromRectAndRadius(
      Rect.fromCircle(center: Offset.zero, radius: 100),
      const Radius.circular(20),
    ));
    path = dashPath(path);

    canvas.drawPath(path, paint);
  }