Flutter使用Canvas實現精美錶盤效果

語言: CN / TW / HK
時間 2022-03-09 23:15:06

theme: cyanosis

前言

上個月參加掘金創作者訓練營時，發現訓練營中的一位兄弟通過 css3 實現了一個精美的錶盤，用css3製作一個精美的錶盤，建議初學者觀看，效果看著確實不錯很漂亮，跟 UI 做的設計圖差不多了， 當時就在想能不能在 Flutter 中實現一個同樣的效果，於是趁著週末空閒時間使用 Flutter 的 Canvas 使用了一個同樣的效果。

最終實現的效果還不錯，如下：

dial.gif

實現

前面說到使用 Canvas 實現該錶盤效果，而在 Flutter 中使用 Canvas 更多的則是繼承 CustomPainter 類實現 paint 方法，然後在 CustomPaint 中使用自定義實現的 CustomPainter。 比如這裡建立的 DialPainter 使用如下:

```dart @override Widget build(BuildContext context) { double width = MediaQuery.of(context).size.width; return Container( color: const Color.fromARGB(255, 35, 36, 38), /// 設定背景 child: Center( child: CustomPaint( size: Size(width, width), painter: DialPainter(), ), ), ); }

class DialPainter extends CustomPainter{ @override void paint(Canvas canvas, Size size) { }

@override bool shouldRepaint(covariant CustomPainter oldDelegate) { return true; } } ```

之後所有繪製的核心程式碼都在 DialPainter 中的 paint 中實現的，其中 shouldRepaint 是指父控制元件重新渲染時是否重新繪製，這裡設定為 true 表示每次都重新繪製。

接下來就看具體實現程式碼，我們將整個錶盤效果的實現分為三部分：面板、刻度、指標。涉及到的主要知識點包括：Paint、Canvas、Path、TextPainter 等。

初始化

在開始進行繪製之前，先進行畫筆和長度單位的初始化。

在整個效果的實現上會多次使用到畫筆 Paint ，為了避免建立多個畫筆例項，所以建立一個 Paint 成員變數，後續通過修改其屬性值來滿足不同效果的繪製。

```dart late final Paint _paint = _initPaint();

Paint _initPaint() { return Paint() ..isAntiAlias = true ..color = Colors.white; } ```

通過初始化程式碼設定了畫筆的抗鋸齒和預設顏色。

為了方便後續使用長、寬、半徑等長度，建立對應的成員變數，同時為了適配不同錶盤寬高，保證展示效果一致，在繪製時不直接使用數值，而使用比例長度：

```dart /// 畫布寬度 late double width; /// 畫布高度 late double height; /// 錶盤半徑 late double radius; /// 比例單位長度 late double unit ;

@override void paint(Canvas canvas, Size size) { initSize(size); }

void initSize(Size size) { width = size.width; height = size.height; radius = min(width, height) / 2; unit = radius / 15; } ```

半徑取寬度和高度的最小值，然後除以 2 ，單位長度 unit 取值為半徑除以 15。

關於 Flutter 螢幕適配請參考：Flutter應用框架搭建(二)螢幕適配

面板

首先繪製一個線性漸變的圓：

```dart /// 繪製一個線性漸變的圓 var gradient = ui.Gradient.linear( Offset(width/2, height/2 - radius,), Offset(width/2, height/2 + radius), [const Color(0xFFF9F9F9), const Color(0xFF666666)]);

_paint.shader = gradient; _paint.color = Colors.white; canvas.drawCircle(Offset(width/2, height/2), radius, _paint); ```

通過 Gradient.linear 建立一個線性漸變顏色並設定給 Paint.shader，繪製出來效果如下：

dial01.png

然後在其上新增一層徑向漸變，增加錶盤的立體感：

```dart /// 繪製一層徑向漸變的圓 var radialGradient = ui.Gradient.radial(Offset(width/2, height/2), radius, [ const Color.fromARGB(216, 246, 248, 249), const Color.fromARGB(216, 229, 235, 238), const Color.fromARGB(216,205, 212, 217), const Color.fromARGB(216,245, 247, 249), ], [0, 0.92, 0.93, 1.0]);

_paint.shader = radialGradient; canvas.drawCircle(Offset(width/2, height/2), radius - 0.3 * unit, _paint); ```

使用 Gradient.radial 建立一個徑向漸變的顏色，效果如下：

dial02.png

最後再在錶盤內新增一個邊框和陰影增加對比效果：

```dart /// 繪製 border var shadowRadius = radius - 0.8 * unit; _paint ..color = const Color.fromARGB(33, 0, 0, 0) ..shader = null ..style = PaintingStyle.stroke ..strokeWidth = 0.1 * unit; canvas.drawCircle(Offset(width/2, height/2), shadowRadius - 0.2 * unit, _paint);

///繪製陰影 Path path = Path(); path.moveTo(width/2, height/2); var rect = Rect.fromLTRB(width/2 - shadowRadius, height/2 - shadowRadius, width/2+shadowRadius, height /2 +shadowRadius); path.addOval(rect); canvas.drawShadow(path, const Color.fromARGB(51, 0, 0, 0), 1 * unit, true); ```

最後錶盤效果如下：

dial03.png

刻度

面板繪製完成，接下來就是繪製刻度線以及刻度值。

刻度線

程式碼如下：

```dart double dialCanvasRadius = radius - 0.8 * unit; canvas.save(); canvas.translate(width/2, height/2);

var y = 0.0; var x1 = 0.0; var x2 = 0.0;

_paint.shader = null; _paint.color = const Color(0xFF929394); for( int i = 0; i < 60; i++){ x1 = dialCanvasRadius - (i % 5 == 0 ? 0.85 * unit : 1 * unit); x2 = dialCanvasRadius - (i % 5 == 0 ? 2 * unit : 1.67 * unit); _paint.strokeWidth = i % 5 == 0 ? 0.38 * unit : 0.2 * unit; canvas.drawLine(Offset(x1, y), Offset(x2, y), _paint); canvas.rotate(2*pi/60); } canvas.restore(); ```

錶盤上有 60 個刻度，其中 12 個為小時刻度其餘為分鐘刻度，迴圈 60 次，通過 i % 5 == 0 判斷是否為小時刻度，從而使用不同的 x 和 y 座標，實現不同的長度和寬度。

這裡為了避免去計算圓上的點座標，採用的是旋轉畫布來實現。畫布預設旋轉點位左上角，所以需要通過 canvas.translate(width/2, height/2) 將旋轉點移動到錶盤的中心點，然後每繪製完一個刻度畫布旋轉 2*pi/60 的角度，即 6 度。因為畫布進行了平移所以繪製的座標都是基於圓中心，即相當於圓點移動到了圓中心。

dial03.gif

最終實現刻度效果如圖：

dial05.png

刻度值

繪製完刻度後需要給刻度標值，這裡只顯示 3、6、9、12 四個刻度值，程式碼如下：

```dart double dialCanvasRadius = radius - 0.8 * unit; var textPainter = TextPainter( text: const TextSpan( text: "3", style: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold, height: 1.0)), textDirection: TextDirection.rtl, textWidthBasis: TextWidthBasis.longestLine, maxLines: 1, )..layout();

var offset = 2.25 * unit; var points = [ Offset(width / 2 + dialCanvasRadius - offset - textPainter.width , height / 2 - textPainter.height / 2), Offset(width / 2 - textPainter.width /2, height / 2 + dialCanvasRadius - offset - textPainter.height), Offset(width / 2 - dialCanvasRadius + offset, height / 2 - textPainter.height / 2), Offset(width / 2 - textPainter.width, height / 2 - dialCanvasRadius + offset), ]; for(int i = 0; i< 4; i++){

textPainter = TextPainter( text: TextSpan( text: "${(i + 1) * 3}", style: const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold, height: 1.0)), textDirection: TextDirection.rtl, textWidthBasis: TextWidthBasis.longestLine, maxLines: 1, )..layout();

textPainter.paint(canvas, points[i]); } ```

繪製文字使用的是 TextPainter 物件，首先建立一個 TextPainter 物件，用於測量獲取文字的寬高，因為這裡只顯示 4 個刻度值，所以這裡直接將對應需要繪製的座標計算出來，然後迴圈繪製顯示的刻度值在對應的位置即可。實現後效果如下：

dial06.png

指標

接下來就是指標的繪製，指標分為三部分：時針、分針、秒針。在繪製指標之前還需要繪製中心點：

```dart var radialGradient = ui.Gradient.radial(Offset(width / 2, height / 2), radius, [ const Color.fromARGB(255, 200, 200, 200), const Color.fromARGB(255, 190, 190, 190), const Color.fromARGB(255, 130, 130, 130), ], [0, 0.9, 1.0]);

/// 底部背景 _paint ..shader = radialGradient ..style = PaintingStyle.fill; canvas.drawCircle( Offset(width/2, height/2), 2 * unit, _paint);

/// 頂部圓點 _paint ..shader = null ..style = PaintingStyle.fill ..color = const Color(0xFF121314); canvas.drawCircle(Offset(width/2, height/2), 0.8 * unit, _paint); ```

程式碼很簡單，在中心繪製兩個圓，一個底部的徑向漸變的大圓，一個頂部深色的小圓，如圖：

dial07.png

時針

時針分為三部分，連線中心的矩形、連線矩形的半圓弧、最後的箭頭，如圖：

dial01.gif

程式碼實現如下：

```dart double hourHalfHeight = 0.4 * unit; double hourRectRight = 7 * unit;

Path hourPath = Path(); /// 新增矩形 時針主體 hourPath.moveTo(0 - hourHalfHeight, 0 - hourHalfHeight); hourPath.lineTo(hourRectRight, 0 - hourHalfHeight); hourPath.lineTo(hourRectRight, 0 + hourHalfHeight); hourPath.lineTo(0 - hourHalfHeight, 0 + hourHalfHeight);

/// 時針箭頭尾部弧形 double offsetTop = 0.5 * unit; double arcWidth = 1.5 * unit; double arrowWidth = 2.17 * unit; double offset = 0.42 * unit; var rect = Rect.fromLTWH(hourRectRight - offset, 0 - hourHalfHeight - offsetTop, arcWidth, hourHalfHeight * 2 + offsetTop * 2); hourPath.addArc(rect, pi/2, pi); /// 時針箭頭 hourPath.moveTo(hourRectRight - offset + arcWidth/2, 0 - hourHalfHeight - offsetTop); hourPath.lineTo(hourRectRight - offset + arcWidth/2 + arrowWidth, 0); hourPath.lineTo(hourRectRight - offset + arcWidth/2, 0 + hourHalfHeight + offsetTop); hourPath.close();

canvas.save(); canvas.translate(width/2, height/2); ///繪製 _paint.color = const Color(0xFF232425); canvas.drawPath(hourPath, _paint); canvas.restore(); ```

這裡是通過 Path 先新增一個矩形到路徑，然後新增一個圓弧，圓弧向左偏移一定單位，防止對接效果不好，再新增一個三角形也就是箭頭圖形。這裡所有的座標計算都是基於圓點在圓盤的中心點計算的，所以需要平移畫布，將圓點移動到圓盤的中心點，即 canvas.translate(width/2, height/2) 跟繪製錶盤刻度的思路是一樣的，最後再通過 canvas.drawPath 進行繪製。效果如下：

dial09.png

分針

分針的繪製相對比較簡單，因為分針就一個圓角矩形，使用畫布的 drawRRect 方法即可：

```dart double hourHalfHeight = 0.4 * unit; double minutesLeft = -1.33 * unit; double minutesTop = -hourHalfHeight; double minutesRight = 11* unit; double minutesBottom = hourHalfHeight;

canvas.save(); canvas.translate(width/2, height/2);

/// 繪製分針 var rRect = RRect.fromLTRBR(minutesLeft, minutesTop, minutesRight, minutesBottom, Radius.circular(0.42 * unit)); _paint.color = const Color(0xFF343536); canvas.drawRRect(rRect, _paint);

canvas.restore(); ```

實現思路同樣是將畫布移動到圓點，然後計算座標進行繪製，這裡需要注意的是分針尾部是超過了中心大圓點的，所以這裡 left 需要向左偏移一定單位：

dial10.png

這裡為了看到分針的效果，將時針隱藏掉了

秒針

秒針分為四部分：尾部弧形、尾部圓角矩形、細針、中心圓點：

dial02.gif

實現程式碼：

```dart double hourHalfHeight = 0.4 * unit; double secondsLeft = -4.5 * unit; double secondsTop = -hourHalfHeight; double secondsRight = 12.5 * unit; double secondsBottom = hourHalfHeight;

Path secondsPath = Path(); secondsPath.moveTo(secondsLeft, secondsTop);

/// 尾部弧形 var rect = Rect.fromLTWH(secondsLeft, secondsTop, 2.5 * unit, hourHalfHeight * 2); secondsPath.addArc(rect, pi/2, pi);

/// 尾部圓角矩形 var rRect = RRect.fromLTRBR(secondsLeft + 1 * unit, secondsTop, - 2 * unit, secondsBottom, Radius.circular(0.25 * unit)); secondsPath.addRRect(rRect);

/// 指標 secondsPath.moveTo(- 2 * unit, - 0.125 * unit); secondsPath.lineTo(secondsRight, 0); secondsPath.lineTo(-2 * unit, 0.125 * unit);

/// 中心圓 var ovalRect = Rect.fromLTWH(- 0.67 * unit, - 0.67 * unit, 1.33 * unit, 1.33 * unit); secondsPath.addOval(ovalRect);

canvas.save(); canvas.translate(width/2, height/2);

/// 繪製陰影 canvas.drawShadow(secondsPath, const Color(0xFFcc0000), 0.17 * unit, true);

/// 繪製秒針 _paint.color = const Color(0xFFcc0000); canvas.drawPath(secondsPath, _paint);

canvas.restore(); ```

思路跟時針的實現是一樣的，通過 Path 將圓弧、圓角矩形、三角形、中心圓形組合起來，計算座標同樣的是以圓盤中心為圓點，所有同樣需要使用 translate 移動畫布圓點後繪製。實現效果：

dial12.png

同樣的為了更好的看到秒針的效果，將時針、分針隱藏了

動起來

經過上面的繪製，我們將錶盤的所有元素都繪製出來了，但是最重要的沒有動起來，動起來的關鍵就是要讓時針、分針、秒針偏移一定的角度，既然是偏移角度自然就想到了旋轉畫布來實現，類似於繪製刻度一樣。

分別在時針、分針、秒針的繪製之前對畫布進行一定角度的旋轉：

```dart /// 時針 canvas.save(); canvas.translate(width/2, height/2); canvas.rotate(2*pi/4); _paint.color = const Color(0xFF232425); canvas.drawPath(hourPath, _paint); canvas.restore();

///分針 canvas.save(); canvas.translate(width/2, height/2); canvas.rotate(2pi/42); var rRect = RRect.fromLTRBR(minutesLeft, minutesTop, minutesRight, minutesBottom, Radius.circular(0.42 * unit)); _paint.color = const Color(0xFF343536); canvas.drawRRect(rRect, _paint); canvas.restore();

///秒針 canvas.save(); canvas.translate(width/2, height/2); canvas.rotate(2pi/43); canvas.drawShadow(secondsPath, const Color(0xFFcc0000), 0.17 * unit, true); _paint.color = const Color(0xFFcc0000); canvas.drawPath(secondsPath, _paint); canvas.restore();

```

分別在時針、分針、秒針的繪製前對畫布旋轉 90°、180°、270° ，效果如下：

dial13.png

通過畫布旋轉實現了我們想要的效果，接下來就是讓指標根據時間旋轉相應的角度。可以通過 DateTime.now() 獲取當前時間物件，進而獲取當前的小時、分鐘和秒。然後根據對應的值計算出相應的角度：

```dart var date = DateTime.now();

/// 時針 canvas.rotate(2pi/60((date.hour - 3 + date.minute / 60 + date.second/60/60) * 5 ));

/// 分針 canvas.rotate(2*pi/60 * (date.minute - 15 + date.second / 60));

/// 秒針 canvas.rotate(2*pi/60 * (date.second - 15)); ```

首先將 360 度分為 60 份，時針一小時為 5 份，因為角度的起始是在右側中心點，所以獲取的小時需要減 3，再加上分鐘、秒鐘佔小時的比例；同理分別計算分鐘、秒鐘的角度，最終實現時針、分針、秒針根據當前時間展示。

角度計算對了以後，還需要重新整理整個錶盤，即每秒鐘重新整理一次，重新整理時獲取當前時間重新繪製時針、分針、秒針的位置，實現動態效果，這裡使用 Timer 每一秒鐘呼叫父佈局的 setState 實現。

```dart @override void initState() { super.initState();

Timer.periodic(const Duration(seconds: 1), (timer) {
  setState(() {});
});

} ``` 大功告成，最終實現了開始展示的錶盤動態效果。 dial.gif

原始碼地址：flutter_dial
本文已同步釋出到公眾號：loongwind

「」
「」