Flutter 绘制自界说曲线、折线图及波浪动效实现

开发者 · 2024-9-12 13:14:37

简介

上一篇用 Flutter 的 Canvas 画点有趣的图形我们介绍了使用 CustomPaint 绘制自界说形状，可以看到有了图形的平面绘制数学盘算方法，我们可以画出所需的形状。本篇我们来介绍线条类图形的绘制，而且团结 Animation 实现了常见的波浪动效。通过本篇，你可以相识到：

正弦曲线的绘制
使用两条正弦曲线加上 Animation 实现波浪动效
曲线的一般绘制方法
折线图绘制

下面是终极实现的效果图，接下来我们一项一项介绍。

正弦曲线绘制

对于正弦曲线，公式界说如下：

对于在屏幕绘制，由于屏幕的点都是离散的，因此实际就是对正弦曲线举行采样，只要采样隔断充足密集，画出来的效果肉眼上很难区分是离散点之间通过连线完成绘制的。因此，绘制正弦曲线着实就是将正弦曲线的点依次连起来就好了。下面是绘制的实当代码，waveHeight是正弦曲线的振幅，这里我们一个屏幕宽度绘制一个周期，因此使用的是 2 * pi * i / size.width。

Flutter 绘制自界说曲线、折线图及波浪动效实现

所属分类: 问答交流

新帖推荐: 30日

推荐作品