Flutter 115: 图解自定义 View 之 Canvas (四) drawParagraph

2021-12-20 20:24:30

小菜在前两节通过 Canvas 绘制图形时涉及到部分文字绘制，之前只是简单的尝试，有很多未注意到的地方；小菜今天尝试全面的学习尝试一下；通过 Canvas 绘制文字时使用的属性效果与直接使用 TextView 对应基本一致；

Canvas.drawParagraph

新建一个 ParagraphBuilder 段落构造器；
在构造器中添加文本的基本信息，包括 ParagraphStyle 文本属性等；
通过 ParagraphConstraints 约束段落容器宽度；
通过 layout 计算段落中每个字形的大小和位置；
通过 Canvas.drawParagraph 进行文字绘制；

// 1-2 段落构造器并添加文本信息
ParagraphBuilder _pb = ParagraphBuilder(
    ParagraphStyle(fontWeight: FontWeight.normal, fontSize: 17))
  ..pushStyle(ui.TextStyle(color: Colors.blue))
  ..addText(str);
// 3 设置段落容器宽度
ParagraphConstraints pc = ParagraphConstraints(width: size.width - 100);
// 4 计算文本位置及尺寸
Paragraph paragraph = _pb.build()..layout(pc);
// 5 文本绘制
canvas.drawParagraph(paragraph, Offset(50.0, 50.0));

ParagraphStyle

1. fontSize

fontSize 为字体绘制时字号，以逻辑像素为单位；

fontSize: 14.0 + (i + 1)

2. fontWeight

fontWeight 用于绘制文本的字形的粗细，从 w100 -> w900 逐级变粗；默认是 w400；

fontWeight: FontWeight.values[i + 1],

3. fontStyle

fontStyle 为字体样式，是否为 normal 正规或 italic 斜体；

fontStyle: (i % 2 == 0) ? FontStyle.normal : FontStyle.italic,

4. fontFamily

fontFamily 为文字的字体，使用其他字体时需要倒入字体包资源文件并在 pubspec.yaml 中进行资源文件注册声明；可以从 Google Fonts 字体库中选择适当的字体类型；

fontFamily: 'DancingScript',
// pubspec.yaml
flutter:
  fonts:
    - family: DancingScript
      fonts:
        - asset: images/DancingScript-Regular.ttf

小菜在添加字体时，遇到 A dependency specification must be a string or a mapping. 问题，其原因是字体资源的注册需要在 flutter: 中添加，而不是在 dependencies: 依赖中添加，dependencies: 都是添加的依赖键值对；

5. maxLines & ellipsis

maxLines 为段落最长绘制行数，一般与 ellipsis 通过使用，ellipsis 为最后绘制不完时展示的文本内容；

maxLines: 4,
ellipsis: '...',

6. textDirection & textAlign

textDirection & textAlign 的使用是小菜觉得应当注意的地方；textDirection 为文字绘制方向，ltr 即 left-to-right 从左至右；rtl 即 right-to-left 从右至左，类似于 'ar/fa/he/ps/ur' 阿拉伯语和希伯来语等；textAlign 为文本的对齐方式；

使用 rtl 方式时，标点均会展示在左侧，符合从右向左的绘制顺序；TextAlign 对齐方式注意区分 left / start 和 right / end 的不同；

TextAlign.center 文本内容居中
TextAlign.justify 以 TextDirection 设置为准，自动延展填充至容器宽度
TextAlign.left 均与容器左侧对齐
TextAlign.start 以 TextDirection 设置为准，开始位置进行对齐
TextAlign.right 均与容器右侧对齐
TextAlign.end 以 TextDirection 设置为准，结束位置进行对齐

textAlign: _paragraphTextAlign(i),
textDirection: (i % 2 == 0) ? TextDirection.ltr : TextDirection.rtl,

// TextAlign & TextDirection
enum TextAlign { left, right, center, justify, start, end, }
enum TextDirection { ltr, rtl }

7. height

height 简单理解为行高，但并非完全与 fontSize 倍数一致；

height: 2,

8. strutStyle

strutStyle 小菜理解为段落高度属性，通过设置一系列垂直方向的维度定义更高级的行高属性；其中 StrutStyle 设置的 fontSize / fontFamily 等都是以此为基准线，借此改变的是段落行高，而不会改变段落文本属性(字号/字体等)；

ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(
  height: 2, fontSize: 17,
  strutStyle: ui.StrutStyle(fontFamily: 'DancingScript', fontSize: 20, height: 2),
))

ParagraphBuilder

1. pushStyle()

pushStyle() 将给定的 TextStyle 样式添加到文本属性中，包括文字的颜色，背景等一系列样式；

TextStyle 中涉及多种文本样式，对于与 ParagraphStyle 段落属性相同的 fontSize / fontFamily 等，以 TextStyle 为准；其中对于文本颜色，color 不能与 foreground 一同使用；wordSpacing 为单词间隔，letterSpacing 为文字字母之间间隔，两者要有区分；

var _gradient = ui.Gradient.linear(
    Offset(0.0, 0.0),
    Offset(0.0, size.height),
    [Colors.orange, Colors.deepOrange, Colors.green],
    [0 / 3, 1 / 3, 2 / 3]);
var _bgGradient = ui.Gradient.linear(
    Offset(0.0, 0.0),
    Offset(0.0, size.height),
    [Colors.blueGrey, Colors.white, Colors.grey],
    [0 / 3, 1 / 3, 2 / 3]);
var _shadow = [
  Shadow(offset: Offset(2.0, 2.0), blurRadius: 4.0, color: Colors.grey)
];
ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(fontSize: 17))
  ..pushStyle(ui.TextStyle(
      // color: Colors.green,
      foreground: Paint()..shader = _gradient,
      // background: Paint()..shader = _bgGradient,
      fontSize: 20,
      fontWeight: FontWeight.w700,
      wordSpacing: 4,
      letterSpacing: 2,
      shadows: _shadow))
  ..addText(str);
ParagraphConstraints pc = ParagraphConstraints(width: size.width - 100);
Paragraph paragraph = _pb.build()..layout(pc);
canvas.drawParagraph(paragraph, Offset(50.0, 50 + _spaceHeight));

2. addText()

addText() 将给定的文本添加到段落中，并以设置好的段落样式进行绘制；

3. addPlaceholder()

addPlaceholder() 为文字绘制中设置占位区域；若在 addText() 之前设置优先展示占位区域在进行文本绘制，若在之后设置则是文本绘制结束后添加占位；且有多种垂直占位对齐方式；

for (int i = 0; i < 3; i++) {
  ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(fontSize: 18))
    ..pushStyle(ui.TextStyle(
        foreground: Paint()..shader = _gradient,
        fontWeight: FontWeight.w700, wordSpacing: 4));
  if (i == 0) {
    _pb = _pb..addPlaceholder(60, 60, i <= 1 ? PlaceholderAlignment.bottom : PlaceholderAlignment.middle);
    _pb = _pb..addText(str);
  } else {
    _pb = _pb..addText(str);
    _pb = _pb..addPlaceholder(60, 60, i <= 1 ? PlaceholderAlignment.bottom : PlaceholderAlignment.middle);
  }
  ParagraphConstraints pc = ParagraphConstraints(width: size.width - 100);
  Paragraph paragraph = _pb.build()..layout(pc);
  canvas.drawParagraph(paragraph, Offset(50.0, 50 + _spaceHeight));
  canvas.drawRect(
      Rect.fromPoints(Offset(49.0, 50.0 + _spaceHeight),
          Offset(size.width - 49, 50.0 + paragraph.height + _spaceHeight)),
      _paint..shader = _gradient);
  _spaceHeight += paragraph.height;
}

小菜对于 Canvas.drawParagraph 的尝试暂时到目前为止，还有很多特有属性会在实际过程中进行研究尝试；如有错误，请多多指导！

Canvas.drawParagraph 案例源码

来源：阿策小和尚

码农公寓