Fabricjs 不只能只是建立圖形和圖像這些 2D 物件而已，他還能夠建立文字物件來讓使用者自由的縮放、觀看、修改位置。

fabric.Text

從　fabric.Text 所建立的文字，可以輕鬆做到以下設定。

• 基本文字樣式　(文字大小、字型、粗細)
• 多行文字
• 文字對齊
• 文字背景顏色
• 文字外觀
• 行高
• 文字間距
• 上下標
• 支援表情符號
• 輕鬆地在　canvas 中編輯文字

快速建立文字物件

fabric.Text 這個物件也是繼承於　fabric.Object 所以我們也能輕鬆地使用一切　fabric.Object 所有的屬性和方法。

// 建立一個文字物件
const text = new fabric.Text('Day 7 fabricjs')
canvas.add(text)

設定樣式

字型 fontFamily

可支援中文英文字型 (需網頁可支援)

大小　fontSize

不能透過　width、height 去改變 text　的大小，需要透過　fontSize 屬性來設定原始大小，但新增後我們仍可以透過滑鼠去縮放他們！

粗細　fontWeight

同 css 用法，可以透過數字或文字來改變粗，也和 css 一樣要注意載入的文字是否支援該粗細。

// 設定一些字體樣式
const helveticatext = new fabric.Text('helvetica 文字', {
  top: 100,
  fontFamily: 'helvetica',　// 字型
  fontSize: 100, // 字體大小
  fontWeight: 'bold'　// 字體粗細
})

文字樣式 textDecoration

• underline 底線
• linethrough 刪除線
• overline 上邊線

// 底線
const underlineText = new fabric.Text('幫我加底線', {
  underline: true,
  top: 200,
  fill: 'yellow'
})
canvas.add(underlineText)
const strokeThroughText = new fabric.Text('幫我加刪除縣', {
  linethrough: true,
  top: 250,
  fill: 'blue'
})
canvas.add(strokeThroughText)

const overlineText = new fabric.Text('幫我加上邊線', {
  overline: true,
  top: 300,
  fill: 'red'
})
canvas.add(overlineText)

陰影和斜體

我們可以使用和 css 相同的方式增加陰影和斜體，且陰影也支援 rgba，使用起來相當方便！

// 陰影
const shadowText = new fabric.Text("幫文字加上陰影", {
  shadow: 'rgba(0,0,0,0.7) 5px 5px 5px',
  fontStyle: 'italic',
  top: 350
})
canvas.add(shadowText)

邊框效果

透過設定 stroke 設定邊框顏色
設定 strokeWidth 設定邊框粗細

// 邊框效果
const strokeText = new fabric.Text('text stroke 123 邊框', {
  strokeWidth: 2, // 邊框粗細
  stroke: 'blue',
  top: 400,
  fontSize: 50,
  fill: '#999'
})
canvas.add(strokeText)

多行操作

可以透過在文字中加入 \n 來換行，

文字對齊 textAlign

使用 textAlign 屬性來設定文字對齊屬性(同 css text-align)。

文字行高 lineHeight

設定 lineHeight 設定文字高度。屬性的數值為文字原始大小倍率。　

文字背景色 textBackgroundColor

設定　textBackgroundColor 來加入文字背景

// 多行文字置中
const alignText = new fabric.Text('鐵人賽　day7\nfabricjs\n好好玩\n 文字置中', {
  textAlign: 'center',
  left: 400,
  lineHeight: 2,
  textBackgroundColor: 'green'
})
canvas.add(alignText)

可編輯文字框

透過產生 fabric.IText 物件，來產生出能讓使用者自由編輯內文的文字框。

// 可編輯文字框
const editText = new fabric.IText('雙擊我編輯', {
  top: 400,
  left: 400
})
canvas.add(editText)

設定上下標　superscript、subscript

上標　superscript

setSuperscript(0,2)

上標　subscript

setSubscript(0,2)

輕鬆使用 emoji

本日小結

今天學會了 fabricjs 文字的操作，
fabricjs 讓我們能比原生 api 更加輕鬆去修改文字的樣式，
以及做更豐戶的變化！
今日　codepen - https://codepen.io/nono1526/pen/vVrwaL?editors=1010

fabricjs doc text - http://fabricjs.com/docs/fabric.Text.html
fabricjs doc iText - http://fabricjs.com/docs/fabric.IText.html