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;
  }
}

主要思路:

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

相关推荐
古希腊被code拿捏的神12 小时前
【Flutter】面试记录
flutter·面试·职场和发展
nc_kai12 小时前
Flutter 之 table_calendar 控件
flutter
0wioiw012 小时前
Flutter基础(前端教程⑨-图片)
前端·flutter
Engandend13 小时前
Flutter与iOS混合开发交互
flutter·ios·程序员
浅忆无痕13 小时前
Flutter抓包
前端·flutter
火柴就是我14 小时前
每日见闻之尝试大白话说清Flutter的事件传递
flutter
Lucifer晓15 小时前
记录一次Flutter项目上传App Store Connect出现“Validation failed”错误的问题
flutter·ios
江上清风山间明月18 小时前
一周掌握Flutter开发--10. 结构与设计模式
flutter·设计模式·快速
_小猪睡枕头_20 小时前
鸿蒙与Flutter的混合开发
flutter·harmonyos
0wioiw021 小时前
Flutter基础(前端教程⑦-Http和卡片)
前端·flutter·http