Flutter 112: 圖解自定義 ACEPieWidget 餅狀圖

    小菜準備展示一個簡單的餅狀圖，因需要比較簡單單一，所以小菜準備自己繪製一個；今天小菜只嘗試繪製過程，暫不涉及手勢操作；

ACEPieWidget

    小菜對於繪製分為三個步驟：

1. 類別選項球；
2. 切割繪製餅狀圖；
3. 餅狀圖中繪製文字；

1. 類別選項球

    對於兩側不同顏色類別選項卡，僅需要簡單設定一下 Container 的 decoration 裝飾器即可，只是方便使用者檢視餅狀圖分類而已；

return Container(
    height: 45, width: 45,
    margin: EdgeInsets.symmetric(vertical: 2.5, horizontal: 10),
    decoration: BoxDecoration(color: _color, borderRadius: BorderRadius.circular((25.0))),
    child: Center(child: Text(_text, style: TextStyle(fontSize: 12, color: Colors.white))));

2. 餅狀圖繪製

    對於 Canvas 的基本繪製，小菜在之前的部落格中有過簡單介紹；此次小菜也是使用最基本的 drawArc 繪製扇形拼接為一個完整圓形方式；

1. 獲取 ListData 總的資料值；
2. 遍歷 ListData 根據各個子類別資料比例和旋轉角度進行不同顏色的扇形圖繪製；
3. 最終拼接為完整餅狀圖；

    注意：在繪製扇形圖時需要注意扇形圖的起始角度和終止角度，需要累加上一次繪製的扇形圖角度；

// 1. 設定畫筆
Paint _paint = Paint()..color = Colors.grey
    ..strokeWidth = 4.0..style = PaintingStyle.fill;
// 2. 獲取 ListData 總的資料值
_sumData() {
  if (_listData != null) {
    for (int i = 0; i < _listData.length; i++) {
      _sum += _listData[i].values.first;
    }
  }
}
// 3. 根據各個子類別資料比例和旋轉角度進行不同顏色的扇形圖繪製
if (_listData != null) {
  for (int i = 0; i < _listData.length; i++) {
    startAngle += sweepAngle;
    sweepAngle = _listData[i].values.first * 2 * PI / _sum;
    canvas.drawArc(_circle, startAngle, sweepAngle, true,
        _paint..color = _subPaint(_listData[i].keys.first));
    }
  }
}

3. 文字繪製

    餅狀圖繪製好之後就是在各自的扇形面積上繪製文字；其中小菜規定，只有扇形圖角度大於等於 30 度的時候才會進行文字繪製，如果扇形圖角度太小繪製顯示效果不佳；

1. 文字的初始繪製點預設是以螢幕左上角為座標原點，此時在扇形面內進行繪製時首先需要透過 translate() 平移座標系至餅狀圖圓心；
2. 繪製文字的角度要與扇形的角平分線平行，此時透過 rotate() 對座標系進行適當角度的旋轉；
3. 小菜無法得知文字佔據座標長度，但是可以透過 Paragraph 獲取文字繪製時所佔據高度，因此在透過 drawParagraph 繪製文字時適當設定文字起始座標，y 軸座標向上平移文字高度的一半；
4. 再文字繪製結束之後，將座標系 rotate() 旋轉回正常水平豎直方向，並將起始座標 translate() 平移恢復至螢幕左上角；待下次文字繪製；

// 1. 繪製文筆屬性(顏色，尺寸等)和最大段落寬度
ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(
    textAlign: TextAlign.left, fontWeight: FontWeight.w600,
    fontStyle: FontStyle.normal, fontSize: 14))
  ..pushStyle(ui.TextStyle(color: Colors.white));
ParagraphConstraints _paragraph = ParagraphConstraints(width: size.width * 0.5);

if (sweepAngle >= PI / 6) {
  // 2. 平移座標系
  canvas.translate(size.width * 0.5, size.height * 0.5);
  // 3. 設定旋轉角度
  canvas.rotate(startAngle + sweepAngle * 0.5);
  // 4. 文字繪製
  Paragraph paragraph = (_pb..addText(_subName)).build()..layout(_paragraph);
  canvas.drawParagraph(paragraph, Offset(50.0, 0.0 - paragraph.height * 0.5));
  // 5. 恢復旋轉角度
  canvas.rotate(-startAngle - sweepAngle * 0.5);
  // 6. 恢復起始座標
  canvas.translate(-size.width * 0.5, -size.height * 0.5);
}

    [ACEPieWidget 案例原始碼] github.com/ACE-YANGCE/FlutterApp/blob/master/lib/page/ace_pie_page.dart

    小菜僅簡短的介紹了一下基本餅狀圖的樣式繪製，其功能還不夠完善，後續會加入適當的手勢操作；如有錯誤，請多多指導！

來源： 阿策小和尚