小菜今天绘制一个简单的 收入-支出 进度对比图；大致效果是在两个梯形中进行简单的内容展示；为了提高可复用性，小菜预先设定如下规则；
左右两侧按比例展示对应尺寸，并注意大比例异常情况
左右两侧内容颜色支持自定义
左右两侧文字颜色内容支持自定义
左右两侧支持填充和边框两种样式
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));}
复制代码
ACEProgressPainter 案例源码
小菜对于进度对比图主要通过 Canvas 进行绘制，未单独封装 Widget，其中 drawParagraph 还有很多隐藏熟悉小菜未曾尝试；如有错误，请多多指导！
来源： 阿策小和尚
评论