????小菜在前兩節(jié)通過(guò) Canvas 繪制圖形時(shí)涉及到部分文字繪制，之前只是簡(jiǎn)單的嘗試，有很多未注意到的地方；小菜今天嘗試全面的學(xué)習(xí)嘗試一下；通過(guò) Canvas 繪制文字時(shí)使用的屬性效果與直接使用 TextView 對(duì)應(yīng)基本一致；
Canvas.drawParagraph
- 新建一個(gè) ParagraphBuilder 段落構(gòu)造器；
- 在構(gòu)造器中添加文本的基本信息，包括 ParagraphStyle 文本屬性等；
- 通過(guò) ParagraphConstraints 約束段落容器寬度；
- 通過(guò) layout 計(jì)算段落中每個(gè)字形的大小和位置；
- 通過(guò) Canvas.drawParagraph 進(jìn)行文字繪制；
// 1-2 段落構(gòu)造器并添加文本信息
ParagraphBuilder _pb = ParagraphBuilder(
ParagraphStyle(fontWeight: FontWeight.normal, fontSize: 17))
..pushStyle(ui.TextStyle(color: Colors.blue))
..addText(str);
// 3 設(shè)置段落容器寬度
ParagraphConstraints pc = ParagraphConstraints(width: size.width - 100);
// 4 計(jì)算文本位置及尺寸
Paragraph paragraph = _pb.build()..layout(pc);
// 5 文本繪制
canvas.drawParagraph(paragraph, Offset(50.0, 50.0));
ParagraphStyle
1. fontSize
????fontSize 為字體繪制時(shí)字號(hào)，以邏輯像素為單位；
fontSize: 14.0 + (i + 1)
2. fontWeight
????fontWeight 用于繪制文本的字形的粗細(xì)，從 w100 -> w900 逐級(jí)變粗；默認(rèn)是 w400；
fontWeight: FontWeight.values[i + 1],
3. fontStyle
????fontStyle 為字體樣式，是否為 normal 正規(guī)或 italic 斜體；
fontStyle: (i % 2 == 0) ? FontStyle.normal : FontStyle.italic,
4. fontFamily
????fontFamily 為文字的字體，使用其他字體時(shí)需要倒入字體包資源文件并在 pubspec.yaml 中進(jìn)行資源文件注冊(cè)聲明；可以從 Google Fonts 字體庫(kù)中選擇適當(dāng)?shù)淖煮w類型；
fontFamily: 'DancingScript',
// pubspec.yaml
flutter:
fonts:
- family: DancingScript
fonts:
- asset: images/DancingScript-Regular.ttf
????小菜在添加字體時(shí)，遇到 A dependency specification must be a string or a mapping. 問(wèn)題，其原因是字體資源的注冊(cè)需要在 flutter: 中添加，而不是在 dependencies: 依賴中添加，dependencies: 都是添加的依賴鍵值對(duì)；
5. maxLines & ellipsis
????maxLines 為段落最長(zhǎng)繪制行數(shù)，一般與 ellipsis 通過(guò)使用，ellipsis 為最后繪制不完時(shí)展示的文本內(nèi)容；
maxLines: 4,
ellipsis: '...',
6. textDirection & textAlign
????textDirection & textAlign 的使用是小菜覺(jué)得應(yīng)當(dāng)注意的地方；textDirection 為文字繪制方向，ltr 即 left-to-right 從左至右；rtl 即 right-to-left 從右至左，類似于 'ar/fa/he/ps/ur' 阿拉伯語(yǔ)和希伯來(lái)語(yǔ)等；textAlign 為文本的對(duì)齊方式；
????使用 rtl 方式時(shí)，標(biāo)點(diǎn)均會(huì)展示在左側(cè)，符合從右向左的繪制順序；TextAlign 對(duì)齊方式注意區(qū)分 left / start 和 right / end 的不同；
- TextAlign.center 文本內(nèi)容居中
- TextAlign.justify 以 TextDirection 設(shè)置為準(zhǔn)，自動(dòng)延展填充至容器寬度
- TextAlign.left 均與容器左側(cè)對(duì)齊
- TextAlign.start 以 TextDirection 設(shè)置為準(zhǔn)，開(kāi)始位置進(jìn)行對(duì)齊
- TextAlign.right 均與容器右側(cè)對(duì)齊
- TextAlign.end 以 TextDirection 設(shè)置為準(zhǔn)，結(jié)束位置進(jìn)行對(duì)齊
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 簡(jiǎn)單理解為行高，但并非完全與 fontSize 倍數(shù)一致；
height: 2,
8. strutStyle
????strutStyle 小菜理解為段落高度屬性，通過(guò)設(shè)置一系列垂直方向的維度定義更高級(jí)的行高屬性；其中 StrutStyle 設(shè)置的 fontSize / fontFamily 等都是以此為基準(zhǔn)線，借此改變的是段落行高，而不會(huì)改變段落文本屬性(字號(hào)/字體等)；
ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(
height: 2, fontSize: 17,
strutStyle: ui.StrutStyle(fontFamily: 'DancingScript', fontSize: 20, height: 2),
))
ParagraphBuilder
1. pushStyle()
????pushStyle() 將給定的 TextStyle 樣式添加到文本屬性中，包括文字的顏色，背景等一系列樣式；
????TextStyle 中涉及多種文本樣式，對(duì)于與 ParagraphStyle 段落屬性相同的 fontSize / fontFamily 等，以 TextStyle 為準(zhǔn)；其中對(duì)于文本顏色，color 不能與 foreground 一同使用；wordSpacing 為單詞間隔，letterSpacing 為文字字母之間間隔，兩者要有區(qū)分；
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() 將給定的文本添加到段落中，并以設(shè)置好的段落樣式進(jìn)行繪制；
3. addPlaceholder()
????addPlaceholder() 為文字繪制中設(shè)置占位區(qū)域；若在 addText() 之前設(shè)置優(yōu)先展示占位區(qū)域在進(jìn)行文本繪制，若在之后設(shè)置則是文本繪制結(jié)束后添加占位；且有多種垂直占位對(duì)齊方式；
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;
}
????小菜對(duì)于 Canvas.drawParagraph 的嘗試暫時(shí)到目前為止，還有很多特有屬性會(huì)在實(shí)際過(guò)程中進(jìn)行研究嘗試；如有錯(cuò)誤，請(qǐng)多多指導(dǎo)！
來(lái)源： 阿策小和尚
