前に記事ではFlutterのカスタマイズ描画の使い方を詳しく書きましたが、それ詳細の運用はまだ書いてなく、今回の記事では、CustomPaintのPathを使って破線を描きます。
本記事のサンプルソースはGithubにご参考ください。
破線
破線を描く考え方というのは、空白部分を飛ばして、実線部分を書くことです。
まずは直線1本からスタートします。
@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);
}
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2491433%2F49f3abb0-8632-4372-dfbb-39e0dda19f66.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=db3699ed792ef531f91b684247aa4d93)
その直線の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;
}
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2491433%2Fb6074d5c-57c3-b252-4d11-8e5b684b80a6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=59d33cebc05731f5a4b10900d9069557)
同じ考え方で四角や円形にも破線で描けます。
@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);
}
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2491433%2Fb7423e56-e7be-1239-4db0-f68110573ad9.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9915a0922c169502b4f54adb2437a1d6)