Flutter绘制拖尾效果

news/2025/2/22 4:50:18/

演示:

代码:

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});@overrideWidget 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,});@overridevoid 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));}}}}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}
}

主要思路:

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


http://www.ppmy.cn/news/1123561.html

相关文章

MySQL(8) 优化、MySQL8、常用命令

一、MySQL优化 从上图可以看出SQL及索引的优化效果是最好的&#xff0c;而且成本最低&#xff0c;所以工作中我们要在这块花更多时间。 服务端参数配置&#xff1b; max_connections3000 连接的创建和销毁都需要系统资源&#xff0c;比如内存、文件句柄&#xff0c;业务说的支持…

[Linux] 1.Linux的简介

Linux是一套免费使用和自由传播的类Unix操作系统&#xff0c;是一个多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。 Linux发行版&#xff1a;基于Linux内核定制不同风格的Linux ubuntu:嵌入式开发 …

datart导入hive连接包

datart读取hive数据时&#xff0c;需要先在datart的lib目录下导入hive jdbc相关的包&#xff0c;这里面有几个坑记录下&#xff1a; 1.和springboot中commons-lang3冲突 2.hive中带的jetty和springboot冲突 3.hive jdbc的包的版本号一定要小于登录hive服务端的版本&#xff…

半年总结 -要有松弛感的慢生活

匆匆的半年就这样又过去了&#xff0c;菊次郎的夏天也过完了&#xff0c;国庆又要到了&#xff0c;正在发愁国庆节七天要干什么&#xff0c;然后前几天了解省考要提前到1月份&#xff0c;得&#xff0c;这下不就有事情要做了么&#x1f60f; 进入正题吧~ 工作 自从去年年末换…

【设计模式】门面模式

文章目录 1.门面模式定义2. 门面模式的角色3.门面模式实战案例3.1.场景说明3.2.关系图3.3.代码实现 4.门面模式优缺点5.门面模式适用场景6.门面模式总结 主页传送门&#xff1a;&#x1f481; 传送 1.门面模式定义 门面模式&#xff08;Facade Pattern&#xff09;也叫做外观模…

【linux】性能优化

这张图谱出自倪朋飞&#xff1b; 1、什么是性能指标 这里一定会想到 “高并发” 和 “响应快”&#xff0c;这里词正对应的就是 “吞吐” 和 “延时”。我们知道随着应用负载的体系&#xff0c;系统资源的使用就会提高&#xff0c;甚至达到极限。而性能问题的本质&#xff0c…

NextJS 引入 Ant-Design 样式闪烁问题

按照这里给的样例&#xff0c;抽出关键代码即可 步骤&#xff1a; 安装包&#xff1a; npm i ant-design/static-style-extract引入这俩文件 genAntdCss.tsx: 会帮我们生成 ./public/antd.min.css // src/scripts/genAntdCss.tsximport { extractStyle } from "ant-d…

C++学习笔记--移动语义和右值引用:现代C++基础

文章目录 前言&#xff1a;2.1、值类别2.1.1、左值和纯右值的对比2.1.2、亡值2.1.3、可以“移动”的对象2.1.4、何时使用std::move转换2.1.5、值类型总结 2.2、右值引用2.3、充分利用移动语义2.4、this指针类型 前言&#xff1a; 接上文 接下来将介绍在C11中的移动语义、值类别…