Fabric.js文字效果

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 更加轻松去修改文字的样式，

以及做更丰户的变化！