????小菜今天繪制一個簡單的 收入-支出 進度對比圖；大致效果是在兩個梯形中進行簡單的內容展示；為了提高可復用性，小菜預先設定如下規則；
- 左右兩側按比例展示對應尺寸，并注意大比例異常情況
- 左右兩側內容顏色支持自定義
- 左右兩側文字顏色內容支持自定義
- 左右兩側支持填充和邊框兩種樣式
ACEProgressPainter
????小菜確定了設定的規則，接下來就是實操了，主要是通過 Canvas 進行繪制，再分為繪制圖形和繪制文字兩部分；
Canvas.drawPath 繪制梯形(三角形)
1. 根據比例繪制梯形
????小菜預設一個左側提醒比例，其中比例是以屏幕寬度整體計算，位于梯形中位線上，其中梯形角度預設為 45度 角，這樣根據梯形高度即可計算梯形位置；而右側梯形類似，注意與左側梯形間隔的 spaceWidth 寬度即可；
// 左側
canvas.drawPath(
Path()..moveTo(_spaceWidth * 0.5 + _strokeWidth, _strokeWidth * 0.5)
..lineTo(_spaceWidth * 0.5 + _strokeWidth, _height - _strokeWidth * 0.5)
..lineTo(size.width * leftProgress + _height * 0.5 - _spaceWidth * sqrt(2) - _strokeWidth * sqrt(2), _height - _strokeWidth * 0.5)
..lineTo(size.width * leftProgress + _height * 0.5 - _spaceWidth * sqrt(2) - _strokeWidth * sqrt(2) - _height + _strokeWidth, _strokeWidth * 0.5)
..lineTo(_spaceWidth * 0.5 + _strokeWidth, _strokeWidth * 0.5)
..close(),
_paint..color = leftColor ?? _kProLeftColor);
// 右側
canvas.drawPath(
Path()..moveTo(size.width - _kProPaddingWidth - _strokeWidth * 0.5, Offset.zero.dy)
..lineTo(size.width - _kProPaddingWidth - _strokeWidth * 0.5, _height)
..lineTo(size.width * leftProgress + _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, _height)
..lineTo(size.width * leftProgress - _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, Offset.zero.dy)
..lineTo(size.width - _kProPaddingWidth - _strokeWidth * 0.5, Offset.zero.dy)
..close(),
_paint..color = rightColor ?? _kProRightColor);
2. 異常比例
????對于比例過小或過大的情況，小菜計劃展示一個固定的三角形，并且在此狀況下不進行文字繪制；
// 左側
if ((size.width * leftProgress + _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth) <= _height) {
_leftPath.lineTo(
_height + _kProPaddingWidth + _strokeWidth * 0.5, _height);
} else if ((size.width * leftProgress + _height * 0.5) >= size.width - _height) {
_leftPath.lineTo(
size.width - _spaceWidth - _strokeWidth * 2 - _kProPaddingWidth, _height);
_leftPath.lineTo(
size.width - _spaceWidth - _strokeWidth * 2 - _height - _kProPaddingWidth, Offset.zero.dy);
} else {
_leftPath.lineTo(
size.width * leftProgress + _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth, _height);
_leftPath.lineTo(
size.width * leftProgress - _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth, Offset.zero.dy);
}
// 右側
if ((size.width * leftProgress + _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth) <= _height) {
_rightPath.lineTo(
_height + _spaceWidth + _strokeWidth * 2 + _kProPaddingWidth, _height);
_rightPath.lineTo(
_spaceWidth + _strokeWidth * 2 + _kProPaddingWidth, Offset.zero.dy);
} else if ((size.width * leftProgress + _height * 0.5) >= size.width - _height) {
_rightPath.lineTo(
size.width - _height - _strokeWidth * 0.5 - _kProPaddingWidth, Offset.zero.dy);
} else {
_rightPath.lineTo(
size.width * leftProgress + _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, _height);
_rightPath.lineTo(
size.width * leftProgress - _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, Offset.zero.dy);
}
3. 是否填充
????對于梯形內容是否填充，可以通過 Paint().style = PaintingStyle.fill / stroke 來處理，但是需要注意的是，當 Path 設置了 strokeWidth 時，其填充狀態是邊框以內的范圍，即邊框設置越粗，填充范圍越小，其繪制的整體圖形也會越大，因此在計算時需要以邊框中間位置計算；小菜為了避免填充范圍不夠，設置在 PaintingStyle.fill 時降低邊框粗細為 0.5；
_paint = _paint
..strokeWidth = (isFill == null || isFill == false) ? _strokeWidth : 0.5
..style = (isFill == null || isFill == false) ? PaintingStyle.stroke : PaintingStyle.fill;
Canvas.drawParagraph 繪制文字
????之前小菜有簡單介紹過 drawParagraph 文字繪制，其關鍵是對文字屬性及定位進行處理；
1. 左側文字
????文字范圍需要在梯形內，不能超過梯形長度，因此通過計算設置 ParagraphConstraints(width: _leftTextWidth) 文字寬度范圍；通過 ParagraphStyle 設置文字屬性，包括顏色，大小是否換行等；而最后通過 canvas.drawParagraph 設置文字起始位置(可以獲取段落高度)；
if (_leftTextWidth > 0.0) {
Color _leftColor;
if (leftTextColor != null) {
_leftColor = leftTextColor;
} else if (isFill != null && this.isFill == true) {
_leftColor = Colors.white;
} else if (leftColor != null) {
_leftColor = leftColor;
} else {
_leftColor = _kProLeftColor;
}
ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(
textAlign: TextAlign.left, fontWeight: FontWeight.w500,
fontStyle: FontStyle.normal, maxLines: 1,
ellipsis: '...', fontSize: 16))
..pushStyle(ui.TextStyle(color: _leftColor))
..addText(leftText);
ParagraphConstraints pc = ParagraphConstraints(width: _leftTextWidth);
Paragraph paragraph = _pb.build()..layout(pc);
canvas.drawParagraph(paragraph, Offset(_kProPaddingWidth * 2 + _strokeWidth, _height * 0.5 - paragraph.height * 0.5));
}
2. 右側文字
????右側文字相對于左側略微復雜，首先通過 ParagraphStyle.textAlign 設置文字居右，再計算右側文字寬度時注意右側文字繪制的起始位置，注意邊框寬度及兩個梯形 spaceWidth 間距；最重要的是右側要有空余，小菜通過 addPlaceholder 添加占位符；
????注意：在起始位置與屏幕右側距離差小于設置的寬度時，占位符起作用但整體范圍在屏幕外，因此注意起始位置與文字段落寬度計算正確；
if (_rightTextWidth > 0.0) {
Color _rightColor;
if (rightTextColor != null) {
_rightColor = rightTextColor;
} else if (isFill != null && this.isFill == true) {
_rightColor = Colors.white;
} else if (rightColor != null) {
_rightColor = rightColor;
} else {
_rightColor = _kProRightColor;
}
ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(
textAlign: TextAlign.right, fontWeight: FontWeight.w500,
fontStyle: FontStyle.normal, maxLines: 1,
ellipsis: '...', fontSize: 16))
..pushStyle(ui.TextStyle(color: _rightColor))
..addText(rightText)
..addPlaceholder(_kProPaddingWidth * 2 + _strokeWidth, Offset.zero.dy, PlaceholderAlignment.middle);
ParagraphConstraints pc = ParagraphConstraints(width: _rightTextWidth);
Paragraph paragraph = _pb.build()..layout(pc);
canvas.drawParagraph(paragraph, Offset(_rightStartWidth, _height * 0.5 - paragraph.height * 0.5));
}
????小菜對于進度對比圖主要通過 Canvas 進行繪制，未單獨封裝 Widget，其中 drawParagraph 還有很多隱藏熟悉小菜未曾嘗試；如有錯誤，請多多指導！
來源： 阿策小和尚
