小菜在前两节通过 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 的尝试暂时到目前为止，还有很多特有属性会在实际过程中进行研究尝试；如有错误，请多多指导！
来源： 阿策小和尚
