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

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 總的數(shù)據(jù)值；
2. 遍歷 ListData 根據(jù)各個子類別數(shù)據(jù)比例和旋轉角度進行不同顏色的扇形圖繪制；
3. 最終拼接為完整餅狀圖；

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

// 1. 設置畫筆
Paint _paint = Paint()..color = Colors.grey
    ..strokeWidth = 4.0..style = PaintingStyle.fill;
// 2. 獲取 ListData 總的數(shù)據(jù)值
_sumData() {
  if (_listData != null) {
    for (int i = 0; i < _listData.length; i++) {
      _sum += _listData[i].values.first;
    }
  }
}
// 3. 根據(jù)各個子類別數(shù)據(jù)比例和旋轉角度進行不同顏色的扇形圖繪制
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. 文字繪制

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

1. 文字的初始繪制點默認是以屏幕左上角為坐標原點，此時在扇形面內進行繪制時首先需要通過 translate() 平移坐標系至餅狀圖圓心；
2. 繪制文字的角度要與扇形的角平分線平行，此時通過 rotate() 對坐標系進行適當角度的旋轉；
3. 小菜無法得知文字占據(jù)坐標長度，但是可以通過 Paragraph 獲取文字繪制時所占據(jù)高度，因此在通過 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 案例源碼

????小菜僅簡短的介紹了一下基本餅狀圖的樣式繪制，其功能還不夠完善，后續(xù)會加入適當?shù)氖謩莶僮鳎蝗缬绣e誤，請多多指導！

來源： 阿策小和尚