Flutter canvas绘制五角星法阵

207_1668561900.gif

首先尝试画线，CustomPaint需要传入一个CustomPainter类型作为入参

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.black,
    body: CustomPaint(
      painter: PaperPainter(),
      size: Size.infinite,
    ),
  );
}

创建一个类继承CustomPainter

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(MyPainter oldDelegate) {
    return false;
  }
}

有两个父类方法需要实现，paint里可以拿到canvas对象进行绘制，shouldRepaint返回一个bool决定画布是否需要刷新，接下来在paint方法里进行绘制

@override
void paint(Canvas canvas, Size size) {
  canvas.translate(size.width / 2, size.height / 2);

  Paint linePaint = Paint()
    ..color = Colors.white
    ..strokeWidth = 2
    ..style = PaintingStyle.stroke;

  Path path = Path();
  path
    ..moveTo(0, 0)
    ..relativeLineTo(-40, 120)
    ..relativeLineTo(102, -75)
    ..relativeLineTo(-122, 0)
    ..relativeLineTo(100, 75)
    ..lineTo(0, 0);

  canvas.drawPath(path, linePaint);
}

canvas.translate可以移动画布的位置，下面的代码把画布移到了屏幕中间

canvas.translate(size.width / 2, size.height / 2);

Paint创建画笔，可以设置画笔颜色、线条粗细、线条样式等

接下来创建Path路径
path.moveTo(0, 0)可以把画笔移动到画布的(0, 0)坐标，也就是最中间
relativeLineTo可以绘制相对路径，传入的坐标是相对当前坐标的偏移

canvas.drawPath(path, linePaint)传入path和paint看下效果

image.png

外层再画个圈
path有个arcTo可以根据rect画圆，先创建一个rect确认圆的位置和大小

Rect rect = Rect.fromCenter(center: Offset(0, 65), width: 150, height: 150);

然后开始绘制，直接加到上面的代码中

path
      ..moveTo(0, 0)
      ..relativeLineTo(-40, 120)
      ..relativeLineTo(102, -75)
      ..relativeLineTo(-122, 0)
      ..relativeLineTo(100, 75)
      ..lineTo(0, 0)
      ..arcTo(rect, -3.14 / 2, 3.14 * 2, true);

arcTo第一个参数传入rect，第二个参数决定圆的起点，第三个参数决定圆的终点，第四个参数传入一个bool值，决定圆是否与之前的点相连，看下效果

image.png

现在只是一个静态的绘制，接下来让画笔动起来
创建一个动画控制器

late AnimationController _ctrl;
@override
void initState() {
  super.initState();
  _ctrl = AnimationController(duration: Duration(seconds: 3), vsync: this)
    ..repeat();
  }

MyPainter也需要改造一下，传入一个动画

class MyPainter extends CustomPainter {
  final Animation<double> progress;

  MyPainter({required this.progress}) : super(repaint: progress);

  @override
  void paint(Canvas canvas, Size size) {
    ...
    canvas.drawPath(path, linePaint); // 可以删掉了
    PathMetrics pms = path.computeMetrics();
    pms.forEach((pm) {
      Path extractPath = pm.extractPath(0.0, pm.length * progress.value);
      canvas.drawPath(extractPath, linePaint);
    });

PathMetrics可以获取每条path的信息，再用extractPath截取path，canvas.drawPath(extractPath, linePaint)传入截取后的path，即可完成动态绘制

接下来另外创建一个Paint画笔用来绘制线条的阴影，让线条看起来更炫酷

Paint shadowPaint = Paint()
      ..color = Colors.purpleAccent
      ..strokeWidth = 3.5
      ..maskFilter = MaskFilter.blur(BlurStyle.solid, 10.0)
      ..style = PaintingStyle.stroke;

maskFilter可以设置多种样式，传入BlurStyle枚举可以切换类型，第二个参数是阴影扩散程度

完整代码：

import 'package:flutter/material.dart';
import 'package:flutter_html/shims/dart_ui_real.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with TickerProviderStateMixin {
  late AnimationController _ctrl;

  @override
  void initState() {
    super.initState();
    _ctrl = AnimationController(duration: Duration(seconds: 3), vsync: this)
      ..repeat();
  }

  @override
  void dispose() {
    _ctrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: _initSubviews(),
    );
  }

  Widget _initSubviews() {
    return CustomPaint(
      painter: MyPainter(progress: _ctrl),
      size: Size.infinite,
    );
  }
}

class MyPainter extends CustomPainter {
  final Animation<double> progress;

  MyPainter({required this.progress}) : super(repaint: progress);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.translate(size.width / 2, size.height / 2);

    Paint shadowPaint = Paint()
      ..color = Colors.purpleAccent
      ..strokeWidth = 3.5
      ..maskFilter = MaskFilter.blur(BlurStyle.solid, 10.0)
      ..style = PaintingStyle.stroke;
    Paint linePaint = Paint()
      ..color = Colors.white
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    Path path = Path();
    Rect rect = Rect.fromCenter(center: Offset(0, 65), width: 150, height: 150);
    path
      ..moveTo(0, 0)
      ..relativeLineTo(-40, 120)
      ..relativeLineTo(102, -75)
      ..relativeLineTo(-122, 0)
      ..relativeLineTo(100, 75)
      ..lineTo(0, 0)
      ..arcTo(rect, -3.14 / 2, 3.14 * 2, true);

    PathMetrics pms = path.computeMetrics();
    pms.forEach((pm) {
      Path extractPath = pm.extractPath(0.0, pm.length * progress.value);
      canvas.drawPath(extractPath, shadowPaint);
      canvas.drawPath(extractPath, linePaint);
    });
  }

  @override
  bool shouldRepaint(MyPainter oldDelegate) {
    return oldDelegate.progress != progress;
  }
}