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

简介

上一篇用 Flutter 的 Canvas 画点风趣的图形咱们介绍了运用 CustomPaint 制作自界说形状，能够看到有了图形的平面制作数学核算办法，咱们能够画出所需的形状。本篇咱们来介绍线条类图形的制作，而且结合 Animation 完成了常见的波涛动效。经过本篇，你能够了解到：

• 正弦曲线的制作
• 运用两条正弦曲线加上 Animation 完成波涛动效
• 曲线的一般制作办法
• 折线图制作

下面是终究完成的作用图，接下来咱们一项一项介绍。

正弦曲线制作

对于正弦曲线，公式界说如下：对于在屏幕制作，因为屏幕的点都是离散的，因而实践就是对正弦曲线进行采样，只需采样距离足够密集，画出来的作用肉眼上很难区分是离散点之间经过连线完成制作的。因而，制作正弦曲线其实就是将正弦曲线的点顺次连起来就好了。下面是制作的完成代码，waveHeight是正弦曲线的振幅，这儿咱们一个屏幕宽度制作一个周期，因而运用的是 2 * pi * i / size.width。

Path path = Path();
path.moveTo(0, center.height);
for (double i = 1; i < size.width; i += 1) {
  path.lineTo(
    i,
    center.height +
        waveHeight * sin(2 * pi * i / size.width + startAngle * pi * 4),
  );
}
canvas.drawPath(path, paint);

波涛动效

调查波涛动效，实践上是两条正弦曲线，因为移动的速度不一样，给人的感觉是向前涌动一样。操控曲线的移动实践上能够在动画过程中操控正弦曲线的开始视点，即公式中的变量来完成。咱们的动画操控变量 Animation<double>的变化范围是0到1，为了确保动画重复视点的连贯性，坚持开始视点在一个动画周期结束后坚持一致即可，也就是动画周期结束时要为2的整数倍，这儿咱们一个设置了一条正弦撤销的周期为4，另一条是6。开始视点的周期视点越大，给人感觉的移动速度会越快。下面是两条正弦曲线的制作代码，这儿的startAngle就是 Animation<double>目标在动画过程中的值。这儿需求留意一下，因为每次startAngle都会改写，因而在 CustomPainter 的子类中，需求将 shouldRepaint 回来 true 以支持重绘，假如这个值回来是 false 的话就不会重新制作。

  void paint(Canvas canvas, Size size) {
  var center = Size(size.width / 2, waveHeight * 2);
  var paint1 = Paint()..color = Color(0xFF20B0FE);
  paint1.strokeWidth = 1.0;
  paint1.style = PaintingStyle.stroke;
  var paint2 = Paint()..color = Color(0x8020C0E5);
  paint2.strokeWidth = 1.0;
  paint2.style = PaintingStyle.stroke;
  Path path1 = Path();
  path1.moveTo(0, center.height);
  Path path2 = Path();
  path2.moveTo(0, center.height + waveHeight);
  for (double i = 1; i < size.width; i += 1) {
    path1.lineTo(
      i,
      center.height +
          waveHeight * sin(2 * pi * i / size.width + startAngle * pi * 4),
    );
    path2.lineTo(
      i,
      center.height +
          waveHeight * sin(2 * pi * i / size.width + startAngle * 6 * pi),
    );
  }
  canvas.drawPath(path1, paint1);
  canvas.drawPath(path2, paint2);
}

完好代码已经上传至：自界说绘图代码，目录在 basic_paint 目录下的 curves_paint.dart 中。

曲线制作

有了正弦曲线的制作知识，其他曲线其实也是一个道理，咱们经过数学表达式，经过横坐标核算纵坐标的值，然后构成一系列采样点，再用 Path 目标顺次衔接这些点就能够完成各类曲线的制作了。下面是对数曲线的制作示例代码。

var center = Size(size.width / 2, size.height / 2);
var paint = Paint()..color = Color(0xFF2080E5); //2080E5
paint.strokeWidth = 1.0;
paint.style = PaintingStyle.stroke;
Path path = Path();
path.moveTo(0, center.height);
for (double i = 1; i <= size.width; i += 1) {
  path.lineTo(
    i - 1,
    center.height - 20.0 * log(i),
  );
}
canvas.drawPath(path, paint);

制作作用如下图。

折线图

折线图在实践开发中会比较常见了，通常会有坐标轴，然后将这个点经过线段连起来，并需求标示点的方位。制作的原理和曲线是一样的，只是因为折线图的距离比较大而已。而标示点咱们能够经过在折线上制作圆圈或正方形来完成，咱们封装了两个类，一个制作折线，一个制作坐标轴。坐标轴的制作现在完成比较简单，就是由外面传入横轴起止点和纵轴起止点，将横轴和纵轴制作出来并加上了箭头指示。

// 折线制作
class LineChartPainter extends CustomPainter {
  final List<Point<double>> points;
  LineChartPainter({Key? key, required this.points}) : super();
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = Color(0xFF2080E5); //2080E5
    paint.strokeWidth = 2.0;
    paint.style = PaintingStyle.stroke;
    var pointPaint = Paint()..color = Color(0xFF20FF65); //2080E5
    pointPaint.strokeWidth = 1.0;
    pointPaint.style = PaintingStyle.stroke;
    Path path = Path();
    path.moveTo(points[0].x, points[0].y);
    for (var point in points) {
      path.lineTo(point.x, point.y);
      canvas.drawCircle(Offset(point.x, point.y), 4.0, pointPaint);
    }
    canvas.drawPath(path, paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}
// 坐标轴制作
class AxisPainter extends CustomPainter {
  final Point<double> horizontalStartPoint, horizontalEndPoint;
  final Point<double> verticalStartPoint, verticalEndPoint;
  AxisPainter({
    Key? key,
    required this.horizontalStartPoint,
    required this.horizontalEndPoint,
    required this.verticalStartPoint,
    required this.verticalEndPoint,
  }) : super();
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = Color(0xFF909090);
    paint.strokeWidth = 2.0;
    paint.style = PaintingStyle.stroke;
    Path horizontalPath = Path();
    horizontalPath.moveTo(horizontalStartPoint.x, horizontalStartPoint.y);
    horizontalPath.lineTo(horizontalEndPoint.x - 1, horizontalEndPoint.y);
    canvas.drawPath(horizontalPath, paint);
    Path verticalPath = Path();
    verticalPath.moveTo(verticalStartPoint.x, verticalStartPoint.y);
    verticalPath.lineTo(verticalEndPoint.x, verticalEndPoint.y + 1);
    canvas.drawPath(verticalPath, paint);
    paint.style = PaintingStyle.fill;
    paint.strokeWidth = 2.0;
    final double arrowLength = 12.0;
    // 画箭头
    Path horizontalArrow = Path();
    horizontalArrow.moveTo(horizontalEndPoint.x, horizontalEndPoint.y);
    horizontalArrow.lineTo(horizontalEndPoint.x - arrowLength,
        horizontalEndPoint.y - arrowLength / 2);
    horizontalArrow.lineTo(horizontalEndPoint.x - arrowLength,
        horizontalEndPoint.y + arrowLength / 2);
    horizontalArrow.close();
    canvas.drawPath(horizontalArrow, paint);
    // 画箭头
    Path verticalArrow = Path();
    verticalArrow.moveTo(verticalEndPoint.x, verticalEndPoint.y);
    verticalArrow.lineTo(
        verticalEndPoint.x - arrowLength / 2, verticalEndPoint.y + arrowLength);
    verticalArrow.lineTo(
        verticalEndPoint.x + arrowLength / 2, verticalEndPoint.y + arrowLength);
    verticalArrow.close();
    canvas.drawPath(verticalArrow, paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

终究完成的折线图制作作用如下。

其他说明

对于 CustomPaint 的制作区域，这儿特别说明一下。假如 CustomPaint 是组件树的根节点的话，那么制作区域是整个屏幕。但是假如CustomPaint 有子元素（即 child 参数不为空），那么会将制作区域尺度限制为子元素的巨细。本篇的示例中运用了一个列表将三个制作办法放在了一个页面，为了限制每个绘图的尺度，都指定了一个 Container作为了 CustomPaint 的子元素，经过这种办法能够指定制作区域巨细，以及设置背景色（例如波涛动效的背景就是运用了 Container 完成了突变作用）。

总结

本篇介绍了 Flutter 线条的制作办法，把握了线条制作办法后，咱们能够制作各类曲线或折线，假如耗费点时间，也能够做出美丽的图表作用来。当然，pub 上也有很多优秀的图表插件，例如之前咱们介绍过的 fl_chart，具体运用能够参阅之前的文章：Flutter 入门与实战（六十八）：MobX 获取网络数据来烘托酷炫的曲线。

我是岛上码农，微信大众号同名，这是Flutter 入门与实战的专栏文章，提供体系化的 Flutter 学习文章。对应源码请看这儿：Flutter 入门与实战专栏源码。如有问题能够加自己微信沟通，微信号：island-coder。

：觉得有收成请点个赞鼓舞一下！

：保藏文章，方便回看哦！

：评论沟通，互相前进！