Flutter 115: 圖解自定義 View 之 Canvas (四) drawParagraph

    小菜在前兩節通過 Canvas 繪制圖形時涉及到部分文字繪制，之前隻是簡單的嘗試，有很多未注意到的地方；小菜今天嘗試全面的學習嘗試一下；通過 Canvas 繪制文字時使用的屬性效果與直接使用 TextView 對應基本一緻；

Canvas.drawParagraph

1. 建立一個 ParagraphBuilder 段落構造器；
2. 在構造器中添加文本的基本資訊，包括 ParagraphStyle 文本屬性等；
3. 通過 ParagraphConstraints 限制段落容器寬度；
4. 通過 layout 計算段落中每個字形的大小和位置；
5. 通過 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 案例源碼

來源： 阿策小和尚