????小菜在前兩節(jié)通過 Canvas 繪制圖形時涉及到部分文字繪制靴拱，之前只是簡單的嘗試，有很多未注意到的地方；小菜今天嘗試全面的學(xué)習(xí)嘗試一下；通過 Canvas 繪制文字時使用的屬性效果與直接使用 TextView 對應(yīng)基本一致亩鬼；

Canvas.drawParagraph

1. 新建一個 ParagraphBuilder 段落構(gòu)造器；
2. 在構(gòu)造器中添加文本的基本信息阿蝶，包括 ParagraphStyle 文本屬性等辛孵；
3. 通過 ParagraphConstraints 約束段落容器寬度；
4. 通過 layout 計算段落中每個字形的大小和位置赡磅；
5. 通過 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 計算文本位置及尺寸
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 用于繪制文本的字形的粗細(xì)冶匹，從 w100 -> w900 逐級變粗；默認(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 為文字的字體袒餐，使用其他字體時需要倒入字體包資源文件并在 pubspec.yaml 中進(jìn)行資源文件注冊聲明飞蛹；可以從 Google Fonts 字體庫中選擇適當(dāng)?shù)淖煮w類型；

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 為段落最長繪制行數(shù)，一般與 ellipsis 通過使用匕积，ellipsis 為最后繪制不完時展示的文本內(nèi)容盈罐；

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

6. textDirection & textAlign

????textDirection & textAlign 的使用是小菜覺得應(yīng)當(dāng)注意的地方；textDirection 為文字繪制方向闪唆，ltr 即 left-to-right 從左至右盅粪；rtl 即 right-to-left 從右至左，類似于 'ar/fa/he/ps/ur' 阿拉伯語和希伯來語等悄蕾；textAlign 為文本的對齊方式票顾；

????使用 rtl 方式時，標(biāo)點均會展示在左側(cè)笼吟，符合從右向左的繪制順序库物；TextAlign 對齊方式注意區(qū)分 left / start 和 right / end 的不同；

• TextAlign.center 文本內(nèi)容居中
• TextAlign.justify 以 TextDirection 設(shè)置為準(zhǔn)贷帮，自動延展填充至容器寬度
• TextAlign.left 均與容器左側(cè)對齊
• TextAlign.start 以 TextDirection 設(shè)置為準(zhǔn)戚揭，開始位置進(jìn)行對齊
• TextAlign.right 均與容器右側(cè)對齊
• TextAlign.end 以 TextDirection 設(shè)置為準(zhǔn)，結(jié)束位置進(jìn)行對齊

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 倍數(shù)一致民晒；

height: 2,

8. strutStyle

????strutStyle 小菜理解為段落高度屬性，通過設(shè)置一系列垂直方向的維度定義更高級的行高屬性锄禽；其中 StrutStyle 設(shè)置的 fontSize / fontFamily 等都是以此為基準(zhǔn)線潜必，借此改變的是段落行高，而不會改變段落文本屬性(字號/字體等)沃但；

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 為準(zhǔn)；其中對于文本顏色晒他，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é)束后添加占位饺蔑；且有多種垂直占位對齊方式锌介；

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 的嘗試暫時到目前為止，還有很多特有屬性會在實際過程中進(jìn)行研究嘗試猾警；如有錯誤孔祸，請多多指導(dǎo)！

????Canvas.drawParagraph 案例源碼

來源： 阿策小和尚