快捷導(dǎo)航

詳解Flutter如何繪制曲線,折線圖及波浪動(dòng)效

更新時(shí)間：2022年03月28日 08:53:59 作者：島上碼農(nóng)

這篇文章主要為大家介紹線條類(lèi)圖形的繪制（正弦曲線、折線圖），并且結(jié)合 Animation 實(shí)現(xiàn)了常見(jiàn)的波浪動(dòng)效，感興趣的小伙伴可以了解一下

簡(jiǎn)介

上一篇用 Flutter 的 Canvas 畫(huà)點(diǎn)有趣的圖形我們介紹了使用 CustomPaint 繪制自定義形狀，可以看到有了圖形的平面繪制數(shù)學(xué)計(jì)算方法，我們可以畫(huà)出所需的形狀。本篇我們來(lái)介紹線條類(lèi)圖形的繪制，并且結(jié)合 Animation 實(shí)現(xiàn)了常見(jiàn)的波浪動(dòng)效。通過(guò)本篇，你可以了解到：

正弦曲線的繪制
利用兩條正弦曲線加上 Animation 實(shí)現(xiàn)波浪動(dòng)效
曲線的一般繪制方法
折線圖繪制

下面是最終實(shí)現(xiàn)的效果圖，接下來(lái)我們一項(xiàng)一項(xiàng)介紹。

正弦曲線繪制

對(duì)于正弦曲線，公式定義如下：y=Asin(2ut+θ)對(duì)于在屏幕繪制，由于屏幕的點(diǎn)都是離散的，因此實(shí)際就是對(duì)正弦曲線進(jìn)行采樣，只要采樣間隔足夠密集，畫(huà)出來(lái)的效果肉眼上很難區(qū)分是離散點(diǎn)之間通過(guò)連線完成繪制的。因此，繪制正弦曲線其實(shí)就是將正弦曲線的點(diǎn)依次連起來(lái)就好了。下面是繪制的實(shí)現(xiàn)代碼，waveHeight是正弦曲線的振幅，這里我們一個(gè)屏幕寬度繪制一個(gè)周期，因此使用的是 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);

波浪動(dòng)效

觀察波浪動(dòng)效，實(shí)際上是兩條正弦曲線，由于移動(dòng)的速度不一樣，給人的感覺(jué)是向前涌動(dòng)一樣?？刂魄€的移動(dòng)實(shí)際上可以在動(dòng)畫(huà)過(guò)程中控制正弦曲線的起始角度，即公式中的θ變量來(lái)實(shí)現(xiàn)。我們的動(dòng)畫(huà)控制變量 Animation<double>的變化范圍是0到1，為了保證動(dòng)畫(huà)重復(fù)角度的連貫性，保持起始角度在一個(gè)動(dòng)畫(huà)周期結(jié)束后保持一致即可，也就是動(dòng)畫(huà)周期結(jié)束時(shí)要為2π的整數(shù)倍，這里我們一個(gè)設(shè)置了一條正弦取消的周期為4π，另一條是6π。起始角度的周期角度越大，給人感覺(jué)的移動(dòng)速度會(huì)越快。下面是兩條正弦曲線的繪制代碼，這里的startAngle就是 Animation<double>對(duì)象在動(dòng)畫(huà)過(guò)程中的值。這里需要注意一下，由于每次startAngle都會(huì)刷新，因此在 CustomPainter 的子類(lèi)中，需要將 shouldRepaint 返回 true 以支持重繪，如果這個(gè)值返回是 false 的話就不會(huì)重新繪制。

  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);
}

完整代碼已經(jīng)上傳至：自定義繪圖代碼，目錄在 basic_paint 目錄下的 curves_paint.dart 中。

曲線繪制

有了正弦曲線的繪制知識(shí)，其他曲線其實(shí)也是一個(gè)道理，我們通過(guò)數(shù)學(xué)表達(dá)式，通過(guò)橫坐標(biāo)計(jì)算縱坐標(biāo)的值，然后形成一系列采樣點(diǎn)，再用 Path 對(duì)象依次連接這些點(diǎn)就可以實(shí)現(xiàn)各類(lèi)曲線的繪制了。下面是對(duì)數(shù)曲線的繪制示例代碼。

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);

繪制效果如下圖。

折線圖

折線圖在實(shí)際開(kāi)發(fā)中會(huì)比較常見(jiàn)了，通常會(huì)有坐標(biāo)軸，然后將這個(gè)點(diǎn)通過(guò)線段連起來(lái)，并需要標(biāo)注點(diǎn)的位置。繪制的原理和曲線是一樣的，只是因?yàn)檎劬€圖的間隔比較大而已。而標(biāo)注點(diǎn)我們可以通過(guò)在折線上繪制圓圈或正方形來(lái)實(shí)現(xiàn)，我們封裝了兩個(gè)類(lèi)，一個(gè)繪制折線，一個(gè)繪制坐標(biāo)軸。坐標(biāo)軸的繪制目前實(shí)現(xiàn)比較簡(jiǎn)單，就是由外面?zhèn)魅霗M軸起止點(diǎn)和縱軸起止點(diǎn)，將橫軸和縱軸繪制出來(lái)并加上了箭頭指示。

// 折線繪制
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;
  }
}

// 坐標(biāo)軸繪制
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;
    // 畫(huà)箭頭
    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);

    // 畫(huà)箭頭
    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;
  }
}

最終實(shí)現(xiàn)的折線圖繪制效果如下。

其他說(shuō)明

對(duì)于 CustomPaint 的繪制區(qū)域，這里特別說(shuō)明一下。如果 CustomPaint 是組件樹(shù)的根節(jié)點(diǎn)的話，那么繪制區(qū)域是整個(gè)屏幕。但是如果CustomPaint 有子元素（即 child 參數(shù)不為空），那么會(huì)將繪制區(qū)域尺寸限制為子元素的大小。本篇的示例中使用了一個(gè)列表將三個(gè)繪制方式放在了一個(gè)頁(yè)面，為了限制每個(gè)繪圖的尺寸，都指定了一個(gè) Container作為了 CustomPaint 的子元素，通過(guò)這種方式可以指定繪制區(qū)域大小，以及設(shè)置背景色（例如波浪動(dòng)效的背景就是使用了 Container 實(shí)現(xiàn)了漸變效果）。