Flutter canvas 画一条会动的波浪线 进度条

之前用 Flutter Canvas 画过一个三角三角形，html 的 Canvas 也画过一次类似的， 今天用 Flutter Canvas 试了下 感觉差不多：

html 版本

大致效果如下：

思路和 html 实现的类似：

也就是找出点的位置，使用二阶贝塞尔曲线实现：

 代码如下：
import 'package:flutter/material.dart';class PageCanvas extends StatefulWidget {const PageCanvas({Key? key}) : super(key: key);@overrideState<PageCanvas> createState() => _PageCanvasState();
}class _PageCanvasState extends State<PageCanvas> with TickerProviderStateMixin {late Animation<double> animation;late AnimationController controller;double _waveHeight = 0.5;@overridevoid initState() {// TODO: implement initStatesuper.initState();controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);animation = Tween<double>(begin: 0, end: 1).animate(controller);controller.repeat();}@overrideWidget build(BuildContext context) {Size size = MediaQuery.of(context).size;return Scaffold(appBar: AppBar(title: const Text('Canvas'),backgroundColor: Colors.blue,),body: Column(children: [AnimatedBuilder(animation: controller,builder: (context, widget) {return CustomPaint(size: Size(size.width, size.height / 3),painter: MyPainter(animation.value, _waveHeight),);}),const SizedBox(height: 60,),Center(child: SizedBox(// color: Colors.grey,width: 200,height: 200,child: ClipOval(child: Container(color: Colors.grey.withOpacity(0.3),child: AnimatedBuilder(animation: controller,builder: (context, widget) {return CustomPaint(size: Size(size.width, size.height / 3),painter: MyPainter2(animation.value, _waveHeight),);}),),),),),const SizedBox(height: 20,),Slider(min: 0,max: 2,value: _waveHeight,onChanged: (value) {setState(() {_waveHeight = value;});//_waveHeight = value;},)],),);}@overridevoid dispose() {controller.dispose();// TODO: implement disposesuper.dispose();}
}class MyPainter extends CustomPainter {final double value;final double waveHeight;const MyPainter(this.value, this.waveHeight);@overridevoid paint(Canvas canvas, Size size) {// print(value);Paint paint = Paint();Path path = Path();double positionX = -size.width * value;double positionY = 100;double positionRange = 5 * (1 + waveHeight);double positionX2 = -size.width * (1 - value);double positionY2 = 110;double positionRange2 = 10 * (1 + waveHeight);double positionX3 = -size.width * (1.3 - value);double positionY3 = 120;double positionRange3 = 20 * (1 + waveHeight);double step = size.width / 4;//path.moveTo(0 + positionX, positionY);for (int i = 1; i < 13; i++) {if (i % 2 == 1) {path.quadraticBezierTo(step * (2 * i - 1) + positionX,positionY - positionRange, step * (2 * i) + positionX, positionY);} else {path.quadraticBezierTo(step * (2 * i - 1) + positionX,positionY + positionRange, step * (2 * i) + positionX, positionY);}}path.lineTo(step * 10, 250);path.lineTo(0, 250);path.close();paint.color = Colors.blue.withOpacity(0.2);canvas.drawPath(path, paint);canvas.save();canvas.restore();path = Path();path.moveTo(0 + positionX2, positionY2);for (int i = 1; i < 13; i++) {if (i % 2 == 1) {path.quadraticBezierTo(step * (2 * i - 1) + positionX2,positionY2 - positionRange2,step * (2 * i) + positionX2,positionY2);} else {path.quadraticBezierTo(step * (2 * i - 1) + positionX2,positionY2 + positionRange2,step * (2 * i) + positionX2,positionY2);}}path.lineTo(step * 10, 250);path.lineTo(0, 250);path.close();paint.color = Colors.blue.withOpacity(0.6);canvas.drawPath(path, paint);canvas.save();canvas.restore();path = Path();path.moveTo(0 + positionX3, positionY3);for (int i = 1; i < 13; i++) {if (i % 2 == 1) {path.quadraticBezierTo(step * (2 * i - 1) + positionX3,positionY3 - positionRange3,step * (2 * i) + positionX3,positionY3);} else {path.quadraticBezierTo(step * (2 * i - 1) + positionX3,positionY3 + positionRange3,step * (2 * i) + positionX3,positionY3);}}path.lineTo(step * 10, 250);path.lineTo(0, 250);path.close();paint.color = Colors.blue;canvas.drawPath(path, paint);}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {// TODO: implement shouldRepaintreturn oldDelegate != this;//return true;}
}class MyPainter2 extends CustomPainter {final double value;final double waveHeight;const MyPainter2(this.value, this.waveHeight);@overridevoid paint(Canvas canvas, Size size) {// print(value);Paint paint = Paint();Path path = Path();double positionX = -size.width * value;double positionY = 50;double positionRange = 5 * (1 + waveHeight);double positionX2 = -size.width * (1 - value);double positionY2 = 60;double positionRange2 = 10 * (1 + waveHeight);double positionX3 = -size.width * (1.3 - value);double positionY3 = 70;double positionRange3 = 20 * (1 + waveHeight);double step = size.width / 4;//path.moveTo(0 + positionX, positionY);for (int i = 1; i < 13; i++) {if (i % 2 == 0) {path.quadraticBezierTo(step * (2 * i - 1) + positionX,positionY - positionRange, step * (2 * i) + positionX, positionY);} else {path.quadraticBezierTo(step * (2 * i - 1) + positionX,positionY + positionRange, step * (2 * i) + positionX, positionY);}}path.lineTo(step * 10, 250);path.lineTo(0, 250);path.close();paint.color = Colors.blue.withOpacity(0.2);canvas.drawPath(path, paint);canvas.save();canvas.restore();path = Path();path.moveTo(0 + positionX2, positionY2);for (int i = 1; i < 13; i++) {if (i % 2 == 0) {path.quadraticBezierTo(step * (2 * i - 1) + positionX2,positionY2 - positionRange2,step * (2 * i) + positionX2,positionY2);} else {path.quadraticBezierTo(step * (2 * i - 1) + positionX2,positionY2 + positionRange2,step * (2 * i) + positionX2,positionY2);}}path.lineTo(step * 10, 250);path.lineTo(0, 250);path.close();paint.color = Colors.blue.withOpacity(0.6);canvas.drawPath(path, paint);canvas.save();canvas.restore();path = Path();path.moveTo(0 + positionX3, positionY3);for (int i = 1; i < 13; i++) {if (i % 2 == 0) {path.quadraticBezierTo(step * (2 * i - 1) + positionX3,positionY3 - positionRange3,step * (2 * i) + positionX3,positionY3);} else {path.quadraticBezierTo(step * (2 * i - 1) + positionX3,positionY3 + positionRange3,step * (2 * i) + positionX3,positionY3);}}path.lineTo(step * 10, 250);path.lineTo(0, 250);path.close();paint.color = Colors.blue;canvas.drawPath(path, paint);canvas.save();canvas.restore();}@overridebool shouldRepaint(covariant CustomPainter oldDelegate) {// TODO: implement shouldRepaintreturn oldDelegate != this;//return true;}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/251296.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python numpy np.log 底数

python numpy np.log 底数

np.log()&#xff0c;以e为底的对数 根据对数函数的性质&#xff0c;如果要以3位底的对数&#xff0c;需要除以np.log(3)&#xff0c;即np.log(x)/np.log(3)
阅读更多...
『运维备忘录』之 Systemd 命令详解

『运维备忘录』之 Systemd 命令详解

运维人员不仅要熟悉操作系统、服务器、网络等只是&#xff0c;甚至对于开发相关的也要有所了解。很多运维工作者可能一时半会记不住那么多命令、代码、方法、原理或者用法等等。这里我将结合自身工作&#xff0c;持续给大家更新运维工作所需要接触到的知识点&#xff0c;希望大…
阅读更多...
数据结构—基础知识：哈夫曼树

数据结构—基础知识：哈夫曼树

文章目录 数据结构—基础知识&#xff1a;哈夫曼树哈夫曼树的基本概念哈夫曼树的构造算法哈夫曼树的构造过程哈夫曼算法的实现算法&#xff1a;构造哈夫曼树 数据结构—基础知识&#xff1a;哈夫曼树 哈夫曼树的基本概念 哈夫曼&#xff08;Huffman&#xff09;树又称最优树&…
阅读更多...
2024美赛C题完整解题教程及代码 网球运动的势头

2024美赛C题完整解题教程及代码 网球运动的势头

2024 MCM Problem C: Momentum in Tennis &#xff08;网球运动的势头&#xff09; 注&#xff1a;在网球运动中&#xff0c;"势头"通常指的是比赛中因一系列事件&#xff08;如连续得分&#xff09;而形成的动力或趋势&#xff0c;这可能对比赛结果产生重要影响。球…
阅读更多...
ChatLaw：基于LLaMA微调的法律大模型

ChatLaw：基于LLaMA微调的法律大模型

文章目录 动机数据组成模型框架模型评估 北大团队发布首个的中文法律大模型落地产品ChatLaw&#xff0c;为大众提供普惠法律服务。模型支持文件、语音输出&#xff0c;同时支持法律文书写作、法律建议、法律援助推荐。 github地址&#xff1a;https://github.com/PKU-YuanGroup…
阅读更多...
红黑树(RBTree)

红黑树(RBTree)

文章目录 红黑树的概念红黑树的性质红黑树结点定义红黑树的插入红黑树的验证参考源码 除了AVL树&#xff0c;红黑树也是被广泛使用的平衡二叉树。两者都解决了二叉搜索树的平衡问题。 关于AVL树&#xff0c;之前博客有介绍&#xff1a; AVL树 红黑树的概念 红黑树&#xff0c…
阅读更多...
【c++】vector用法详解

【c++】vector用法详解

vector用法详解 vector定义vector容器的构造函数vector容器内元素的访问1.通过下标 [ ]来访问2.通过迭代器来访问3.通过范围for来访问 vector常用函数的用法解析1.size()2.clear()3.capacity()4.reserve()5.resize()6.shrink_to_fit()7.pop_back()8.push_back()9.erase()10.in…
阅读更多...
使用潜在向量进行检测、屏蔽和重建以进行遮挡的面部表情识别

使用潜在向量进行检测、屏蔽和重建以进行遮挡的面部表情识别

Latent-OFER: Detect, Mask, and Reconstruct with Latent Vectors for Occluded Facial Expression Recognition 一、创新点 &#xff08;1&#xff09;提出了一种与表情相关的特征提取器&#xff0c;它使用空间注意力为特定的面部特征分配更高的权重&#xff0c;从而使我们能…
阅读更多...
【Linux】统信服务器操作系统V20 1060a-AMD64 Vmware安装

【Linux】统信服务器操作系统V20 1060a-AMD64 Vmware安装

目录 ​编辑 一、概述 1.1 简介 1.2 产品特性 1.3 镜像下载 二、虚拟机安装 一、概述 1.1 简介 官网&#xff1a;统信软件 – 打造操作系统创新生态 统信服务器操作系统V20是统信操作系统&#xff08;UOS&#xff09;产品家族中面向服务器端运行环境的&#xff0c;是一款…
阅读更多...
Python 轻量级定时任务调度：APScheduler

Python 轻量级定时任务调度：APScheduler

简述 APscheduler (Advanced Python Scheduler)&#xff0c;作用为按指定的时间规则执行指定的作业。提供了基于日期date、固定时间间隔interval 、以及类似于Linux上的定时任务crontab类型的定时任务。该框架不仅可以添加、删除定时任务&#xff0c;还可以将任务存储到数据库…
阅读更多...
【Docker】WSL(Windows Subsystem for Linux)常见命令解释说明以及简单使用

【Docker】WSL(Windows Subsystem for Linux)常见命令解释说明以及简单使用

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是《Docker容器》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对…
阅读更多...
使用gcc/g++查看C语言预处理，编译，汇编，连接，以及动静态库的区分

使用gcc/g++查看C语言预处理，编译，汇编，连接，以及动静态库的区分

文章目录 使用gcc/ggcc如何完成编译后生成可执行文件&#xff1f;预处理(进行宏替换)编译&#xff08;生成汇编&#xff09;汇编&#xff08;生成机器可识别代码&#xff09;连接&#xff08;生成可执行文件或库文件&#xff09;最后记忆小技巧 在这里涉及到一个重要的概念&…
阅读更多...
Pandas.DataFrame.cumsum() 累积和 详解 含代码 含测试数据集 随Pandas版本持续更新

Pandas.DataFrame.cumsum() 累积和 详解 含代码 含测试数据集 随Pandas版本持续更新

关于Pandas版本&#xff1a; 本文基于 pandas2.2.0 编写。 关于本文内容更新&#xff1a; 随着pandas的stable版本更迭&#xff0c;本文持续更新&#xff0c;不断完善补充。 传送门&#xff1a; Pandas API参考目录 传送门&#xff1a; Pandas 版本更新及新特性 传送门&…
阅读更多...
备份RK35XX 设备的ubuntu根文件系统的方法

备份RK35XX 设备的ubuntu根文件系统的方法

简介 我们使用 RK35XX 提供的SDK包制作了一个完整的 ubuntu 镜像，烧录到设备中，会在设备中安装很多我们需要的软件，运行的一些自己写的脚本和业务程序，当我们有很多台设备时，不可能每台都一个个去安装，此时我们就需要一个工具来备份当前设备的根文件系统，然后再放到 SD…
阅读更多...
智能决策的艺术：探索商业分析的最佳工具和方法

智能决策的艺术：探索商业分析的最佳工具和方法

文章目录 一、引言二、商业分析思维概述三、数据分析在商业实践中的应用四、如何培养商业分析思维与实践能力五、结论《商业分析思维与实践&#xff1a;用数据分析解决商业问题》亮点内容简介作者简介目录获取方式 一、引言 随着大数据时代的来临&#xff0c;商业分析思维与实…
阅读更多...
C语言指针的几种用途

C语言指针的几种用途

先看题目&#xff0c;写一个fun函数&#xff0c;统计一个字符串中某个字符出现的次数&#xff0c;以及这个字符第一次出现的位置。 看起来很简单&#xff0c;似乎几行就可以搞定&#xff0c;但是写出来之后&#xff0c;才发现代码怎么这么长&#xff01;程序里多处使用了指针&…
阅读更多...
Elasticsearch(ES) 简述请求操作索引下文档 增删查改操作

Elasticsearch(ES) 简述请求操作索引下文档 增删查改操作

上文 Elasticsearch(ES) 创建带有分词器规则的索引 带着大家创建了一个带有分词功能的索引 老规矩 我们启动一下ES服务 本文 我们就来说说 关于文档的操作 我们先来添加一个文档 就像数据库加一条数据一样 这里 并不需要指定什么表结构和数据结构 它的文档结构是无模式的 添…
阅读更多...
PyTorch 2.2 中文官方教程（十七）

PyTorch 2.2 中文官方教程（十七）

&#xff08;Beta&#xff09;使用缩放点积注意力&#xff08;SDPA&#xff09;实现高性能 Transformer 原文&#xff1a;pytorch.org/tutorials/intermediate/scaled_dot_product_attention_tutorial.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 注意 点击这…
阅读更多...
从领域外到领域内：LLM在Text-to-SQL任务中的演进之路

从领域外到领域内：LLM在Text-to-SQL任务中的演进之路

导语 本文介绍了ODIS框架&#xff0c;这是一种新颖的Text-to-SQL方法&#xff0c;它结合了领域外示例和合成生成的领域内示例&#xff0c;以提升大型语言模型在In-context Learning中的性能。 标题&#xff1a;Selective Demonstrations for Cross-domain Text-to-SQL会议&am…
阅读更多...
Jenkins任意文件读取漏洞(CVE-2024-23897)复现

Jenkins任意文件读取漏洞(CVE-2024-23897)复现

Jenkins 有一个内置的命令行界面CLI&#xff0c;在处理 CLI 命令时Jenkins 使用args4j 库解析 Jenkins 控制器上的命令参数和选项。此命令解析器具有一个功能&#xff0c;可以将参数中后跟文件路径的字符替换为文件内容 ( expandAtFiles)。具有Overall/Read权限的攻击者可以读取…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023