Flutter 114: 图解自定义 ACEProgressPainter 对比进度图

    小菜今天绘制一个简单的 收入-支出 进度对比图;大致效果是在两个梯形中进行简单的内容展示;为了提高可复用性,小菜预先设定如下规则;

  • 左右两侧按比例展示对应尺寸,并注意大比例异常情况
  • 左右两侧内容颜色支持自定义
  • 左右两侧文字颜色内容支持自定义
  • 左右两侧支持填充和边框两种样式

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 还有很多隐藏熟悉小菜未曾尝试;如有错误,请多多指导!

来源: 阿策小和尚

你可能感兴趣的:(Flutter 114: 图解自定义 ACEProgressPainter 对比进度图)