Flutter绘制拖尾效果

演示:

代码:

Dart 复制代码
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;
  }
}

主要思路:

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

相关推荐
星秋Eliot13 小时前
Flutter多线程
flutter·async/await·isolate·flutter 多线程
农夫三拳_有点甜17 小时前
Flutter Assets & Media
flutter
林间风雨1 天前
flutter项目 -- 换logo、名称 、签名、打包
flutter
SoaringHeart2 天前
Flutter组件封装:页面点击事件拦截
前端·flutter
tangweiguo030519872 天前
Flutter与原生混合开发:实现完美的暗夜模式同步方案
android·flutter
程序员老刘2 天前
CTO紧急叫停AI编程!不是技术倒退,而是...
flutter·ai编程
leazer2 天前
Flutter TabBar 字体缩放动画抖动问题及优化方案
flutter
yuanpan2 天前
认识跨平台UI框架Flutter和MAUI区别,如何选。
flutter·ui·maui
无知的前端2 天前
一文精通-Flutter 状态管理
flutter
阿笑带你学前端2 天前
Drift数据库开发实战:类型安全的SQLite解决方案
前端·flutter