Flutter绘制拖尾效果

分手后的思念是犯贱 2024-03-02 09:41 8阅读 0赞

演示：

![b099a58d55cb459a90c7d323972494ad.png][]

代码：

import 'dart:ui';
    
    import 'package:flutter/material.dart';
    import 'package:kq_flutter_widgets/widgets/chart/ex/extension.dart';
    
    class TrailingView extends StatelessWidget {
      const TrailingView({super.key});
    
      @override
      Widget build(BuildContext context) {
        return LayoutBuilder(builder: (v1, v2) {
          Path path = Path();
          path.moveTo(50, 50);
          path.cubicTo(50, 50, 100, 300, 300, 400);
    
          return CustomPaint(
            size: Size(v2.maxWidth, v2.maxHeight),
            painter: Trailing(path: path, r: 8),
          );
        });
      }
    }
    
    ///拖尾效果
    class Trailing extends CustomPainter {
      ///路径
      final Path path;
    
      ///起始值大小半径
      final double r;
    
      Trailing({
        required this.path,
        required this.r,
      });
    
      @override
      void paint(Canvas canvas, Size size) {
        PathMetric? pathMetric1 = path.computeMetric();
        if (pathMetric1 != null) {
          int length1 = pathMetric1.length.toInt();
          for (int i = 0; i < length1.toInt(); i++) {
            Tangent? tangent1 = pathMetric1.getTangentForOffset(i.toDouble());
            double mix = i / length1.toInt();
            if (tangent1 != null) {
              Offset cur = tangent1.position;
              canvas.drawCircle(
                  cur,
                  r * mix,
                  Paint()
                    ..color = Colors.redAccent
                    ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 8));
            }
          }
        }
      }
    
      @override
      bool shouldRepaint(covariant CustomPainter oldDelegate) {
        return true;
      }
    }

主要思路：

根据路径获取路径上的点，并从路径的起始点到终点绘制从大变小的圆点，且设置画笔为外发光模式，就可以达到一个可以根据路径显示的拖尾效果了。

[b099a58d55cb459a90c7d323972494ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/e4431b4781374cf49d6dcae286c5f639.png