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

2024-02-02 02:44
文章标签 canvas flutter 进度条 一条 波浪 会动

本文主要是介绍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;}
}

这篇关于Flutter canvas 画一条会动的波浪线 进度条的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/669253。

相关文章

以canvas方式绘制粒子背景效果，感觉还可以

以canvas方式绘制粒子背景效果，感觉还可以

这个是看到项目中别人写好的，感觉这种写法效果还可以，就存留记录下 就是这种的背景效果。如果想改背景颜色可以通过canvas.js文件中的fillStyle值改。 附上demo下载地址。 https://download.csdn.net/download/u012138137/11249872
阅读更多...
Flutter ListView详解

Flutter ListView详解

文章示例代码 ListView常用构造 ListView 我们可以直接使用ListView 它的实现也是直接返回最简单的列表结构，粗糙没有修饰。 ListView 默认构建 效果 ///默认构建 Widget listViewDefault(List list) { List _list = new List(); for (int i = 0; i < list.length;
阅读更多...
CesiumJS【Basic】- #008 通过canvas绘制billboard

CesiumJS【Basic】- #008 通过canvas绘制billboard

文章目录 通过canvas绘制billboard1 目标2 实现 通过canvas绘制billboard 1 目标 通过canvas绘制billboard 2 实现 /** @Author: alan.lau* @Date: 2024-06-16 11:15:48* @LastEditTime: 2024-06-16 11:43:02* @LastEditors: al
阅读更多...
Android自定义系列——4.Canvas操作

Android自定义系列——4.Canvas操作

1.画布操作 为什么要有画布操作？ 画布操作可以帮助我们用更加容易理解的方式制作图形。 ⑴位移(translate) translate是坐标系的移动，可以为图形绘制选择一个合适的坐标系。 请注意，位移是基于当前位置移动，而不是每次基于屏幕左上角的(0,0)点移动，如下： // 省略了创建画笔的代码// 在坐标原点绘制一个黑色圆形mPaint.setColor(Color.BLACK);ca
阅读更多...
Flutter原理—深入Widget原理

Flutter原理—深入Widget原理

事实上在 Flutter 中渲染是经历了从 Widget 到 Element 再到 RenderObject 的过程。 Widget 只是 Element 的一个配置描述 ，告诉 Element 这个实例如何去渲染。 Widget 和 Element 之间是一对多的关系 。实际上渲染树是由 Element 实例的节点构成的树，而作为配置文件的 Widget 可能被复用到树的多个部分，对应产
阅读更多...
Canvas绘制图片和区域

Canvas绘制图片和区域

如何使用Canvas在图片上绘制区域？ 一. 首先，我们需要初始化三个canvas画布（初始化Canvas）   initCanvas() {// 初始化canvas画布let canvasWrap = document.getElementsByClassName("canvas-wrap");this.wrapWidth = canvasWrap[0].clientWidth;thi
阅读更多...
Flutter笔记（一）- 安装和配置Flutter

Flutter笔记（一）- 安装和配置Flutter

一、下载Flutter 访问网址：https://docs.flutter.dev/get-started/install?hl=zh-cn 根据电脑所使用的操作系统的平台进行选择。笔者电脑的操作系统为Windows，因此选择如图1-1的Windows图片： 图1-1 Flutter网站（一） 然后根据跳转的页面，选择图1-2的Android。 图1-2 Flutter网站（二） 确定安
阅读更多...
js实现进度条的方法

js实现进度条的方法

这篇文章主要介绍了js实现进度条的方法,实例分析了两种不同的实现方法,并说明了setTimeout和setInterval的使用区别,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了js实现进度条的方法。分享给大家供大家参考。具体实现方法如下： 1.setTimeout和clearTimeout ? 1 2 3 4 5 6 7 8 9
阅读更多...
【Linux详解】缓冲区优化 | 进度条的实现 | Linux下git 的上传

【Linux详解】缓冲区优化 | 进度条的实现 | Linux下git 的上传

目录 一. 缓冲区 1. 缓冲区概念 2. 缓冲区作用 2.1 提升读写效率 2.2 减少等待时间 3. 缓冲区刷新策略 3.4 特殊策略 4. 缓冲区存储位置 5. 总结 二. 实现进度条 引入：倒计时 process.c 三. Linux下git的上传 sum 一. 缓冲区 1. 缓冲区概念 缓冲区是计算机内存的一部分，用于暂时存储数据。它在数据传输过程中
阅读更多...
【Flutter 专题】112 图解自定义 ACEPieWidget 饼状图 (一)

【Flutter 专题】112 图解自定义 ACEPieWidget 饼状图 (一)

类别选项球；切割绘制饼状图；饼状图中绘制文字； 1. 类别选项球 对于两侧不同颜色类别选项卡，仅需要简单设置一下 Container 的 decoration 装饰器即可，只是方便用户查看饼状图分类而已； return Container( height: 45, width: 45, margin: EdgeInsets.symmetric(vertical: 2.5, horizonta
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2