簡介
上一篇用 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 線條的繪製方法,掌握了線條繪製方法後,我們可以繪製各類曲線或折線,如果耗費點時間,也可以做出漂亮的圖表效果來。