????小菜準(zhǔn)備展示一個簡單的餅狀圖埋凯，因需要比較簡單單一点楼，所以小菜準(zhǔn)備自己繪制一個；今天小菜只嘗試?yán)L制過程白对，暫不涉及手勢操作掠廓；
ACEPieWidget
????小菜對于繪制分為三個步驟：
- 類別選項(xiàng)球；
- 切割繪制餅狀圖甩恼；
- 餅狀圖中繪制文字蟀瞧；
1. 類別選項(xiàng)球
????對于兩側(cè)不同顏色類別選項(xiàng)卡，僅需要簡單設(shè)置一下 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 繪制扇形拼接為一個完整圓形方式切端；
- 獲取 ListData 總的數(shù)據(jù)值；
- 遍歷 ListData 根據(jù)各個子類別數(shù)據(jù)比例和旋轉(zhuǎn)角度進(jìn)行不同顏色的扇形圖繪制子巾；
- 最終拼接為完整餅狀圖帆赢；
????注意：在繪制扇形圖時需要注意扇形圖的起始角度和終止角度，需要累加上一次繪制的扇形圖角度线梗；
// 1. 設(shè)置畫筆
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ù)比例和旋轉(zhuǎn)角度進(jìn)行不同顏色的扇形圖繪制
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 度的時候才會進(jìn)行文字繪制仪搔，如果扇形圖角度太小繪制顯示效果不佳瘾婿；
- 文字的初始繪制點(diǎn)默認(rèn)是以屏幕左上角為坐標(biāo)原點(diǎn)，此時在扇形面內(nèi)進(jìn)行繪制時首先需要通過 translate() 平移坐標(biāo)系至餅狀圖圓心烤咧；
- 繪制文字的角度要與扇形的角平分線平行偏陪，此時通過 rotate() 對坐標(biāo)系進(jìn)行適當(dāng)角度的旋轉(zhuǎn)；
- 小菜無法得知文字占據(jù)坐標(biāo)長度煮嫌，但是可以通過 Paragraph 獲取文字繪制時所占據(jù)高度笛谦，因此在通過 drawParagraph 繪制文字時適當(dāng)設(shè)置文字起始坐標(biāo)，y 軸坐標(biāo)向上平移文字高度的一半昌阿；
- 再文字繪制結(jié)束之后饥脑，將坐標(biāo)系 rotate() 旋轉(zhuǎn)回正常水平豎直方向恳邀，并將起始坐標(biāo) translate() 平移恢復(fù)至屏幕左上角；待下次文字繪制灶轰；
// 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. 平移坐標(biāo)系
canvas.translate(size.width * 0.5, size.height * 0.5);
// 3. 設(shè)置旋轉(zhuǎn)角度
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. 恢復(fù)旋轉(zhuǎn)角度
canvas.rotate(-startAngle - sweepAngle * 0.5);
// 6. 恢復(fù)起始坐標(biāo)
canvas.translate(-size.width * 0.5, -size.height * 0.5);
}
????小菜僅簡短的介紹了一下基本餅狀圖的樣式繪制，其功能還不夠完善笋颤，后續(xù)會加入適當(dāng)?shù)氖謩莶僮魅楦剑蝗缬绣e誤，請多多指導(dǎo)伴澄！
來源： 阿策小和尚
