您好,登錄后才能下訂單哦!
這篇文章主要介紹了Flutter怎么繪制曲線,折線圖及波浪動效,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
之前用 Flutter 的 Canvas 畫點有趣的圖形我們介紹了使用 CustomPaint 繪制自定義形狀,可以看到有了圖形的平面繪制數(shù)學(xué)計算方法,我們可以畫出所需的形狀。本篇我們來介紹線條類圖形的繪制,并且結(jié)合 Animation 實現(xiàn)了常見的波浪動效。通過本篇,你可以了解到:
正弦曲線的繪制
利用兩條正弦曲線加上 Animation
實現(xiàn)波浪動效
曲線的一般繪制方法
折線圖繪制
下面是最終實現(xiàn)的效果圖,接下來我們一項一項介紹。
對于正弦曲線,公式定義如下:y=Asin(2ut+θ)對于在屏幕繪制,由于屏幕的點都是離散的,因此實際就是對正弦曲線進行采樣,只要采樣間隔足夠密集,畫出來的效果肉眼上很難區(qū)分是離散點之間通過連線完成繪制的。因此,繪制正弦曲線其實就是將正弦曲線的點依次連起來就好了。下面是繪制的實現(xiàn)代碼,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);
觀察波浪動效,實際上是兩條正弦曲線,由于移動的速度不一樣,給人的感覺是向前涌動一樣??刂魄€的移動實際上可以在動畫過程中控制正弦曲線的起始角度,即公式中的θ變量來實現(xiàn)。我們的動畫控制變量 Animation<double>
的變化范圍是0到1,為了保證動畫重復(fù)角度的連貫性,保持起始角度在一個動畫周期結(jié)束后保持一致即可,也就是動畫周期結(jié)束時要為2π的整數(shù)倍,這里我們一個設(shè)置了一條正弦取消的周期為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 path2 = Path(); path2.moveTo(0, center.height); Path path3 = Path(); path3.moveTo(0, center.height + waveHeight); for (double i = 1; i < size.width; i += 1) { path2.lineTo( i, center.height + waveHeight * sin(2 * pi * i / size.width + startAngle * pi * 4), ); path3.lineTo( i, center.height + waveHeight * sin(2 * pi * i / size.width + startAngle * 6 * pi), ); } canvas.drawPath(path2, paint1); canvas.drawPath(path3, paint2); }
完整代碼已經(jīng)上傳至:自定義繪圖代碼,目錄在 basic_paint
目錄下的 curves_paint.dart
中。
有了正弦曲線的繪制知識,其他曲線其實也是一個道理,我們通過數(shù)學(xué)表達式,通過橫坐標計算縱坐標的值,然后形成一系列采樣點,再用 Path 對象依次連接這些點就可以實現(xiàn)各類曲線的繪制了。下面是對數(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);
繪制效果如下圖。
折線圖在實際開發(fā)中會比較常見了,通常會有坐標軸,然后將這個點通過線段連起來,并需要標注點的位置。繪制的原理和曲線是一樣的,只是因為折線圖的間隔比較大而已。而標注點我們可以通過在折線上繪制圓圈或正方形來實現(xiàn),我們封裝了兩個類,一個繪制折線,一個繪制坐標軸。坐標軸的繪制目前實現(xiàn)比較簡單,就是由外面?zhèn)魅霗M軸起止點和縱軸起止點,將橫軸和縱軸繪制出來并加上了箭頭指示。
// 折線繪制 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; } }
最終實現(xiàn)的折線圖繪制效果如下。
對于 CustomPaint
的繪制區(qū)域,這里特別說明一下。如果 CustomPaint
是組件樹的根節(jié)點的話,那么繪制區(qū)域是整個屏幕。但是如果CustomPaint
有子元素(即 child
參數(shù)不為空),那么會將繪制區(qū)域尺寸限制為子元素的大小。本篇的示例中使用了一個列表將三個繪制方式放在了一個頁面,為了限制每個繪圖的尺寸,都指定了一個 Container
作為了 CustomPaint
的子元素,通過這種方式可以指定繪制區(qū)域大小,以及設(shè)置背景色(例如波浪動效的背景就是使用了 Container
實現(xiàn)了漸變效果)。
感謝你能夠認真閱讀完這篇文章,希望小編分享的“Flutter怎么繪制曲線,折線圖及波浪動效”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。