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

主要思路:

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

相关推荐
帅次10 小时前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡11 小时前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉13 小时前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian12313 小时前
FlutterView 源码解析
flutter
Zender Han17 小时前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter
nc_kai21 小时前
Flutter 之 每日翻译 PreferredSizeWidget
java·前端·flutter
littlegnal21 小时前
Flutter Add-to-app profiling
flutter
0wioiw01 天前
Flutter基础(FFI)
flutter
Georgewu10 天前
【HarmonyOS 5】鸿蒙跨平台开发方案详解(一)
flutter·harmonyos