Fabric.js IText設定指定字元顔色和背景色

本文簡介

點贊 + 關注 + 收藏 = 學會了

IText 是 Fabric.js 提供的一個 可編輯文本 的元素。

要設定文字顔色，可以設定 fill 。

但 fill 會設定所有文字的顔色，如果你隻想修改指定文字的顔色，隻用 fill 就不是那麼容易實作了。

本文要講的就是 設定指定文字的顔色和背景色。

設定文字顔色或背景色，需要分情況讨論的：

1. 全文設定
2. 設定指定文字顔色（單行）
3. 設定指定文字顔色（多行）

接下來就将上述情況逐一講解。

起步

<canvas id="c" width="600" height="400" style="border: 1px solid #ccc;"></canvas>

<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

<script>
  // 初始化畫布
  const canvas = new fabric.Canvas('c')

  // 建立文本
  const iText = new fabric.IText('hello world')

  // 将文本添加到畫布裡
  canvas.add(iText)
</script>
複制代碼           

首先把 Fabric.js 引入，然後初始化畫布。如果對這個概念不太熟的話，可以看看 Fabric.js 從入門到膨脹。

最後通過 new fabric.IText 建立一段文字添加到畫布中。

全文設定

// 省略部分代碼

const iText = new fabric.IText('hello world', {
  fill: 'pink'
})
複制代碼           

fill 可以設定文字的填充顔色。在 Fabric.js 裡是使用這個屬性設定顔色的，和 css 設定文字顔色使用 color 不一樣~

單行：設定指定文字顔色

const iText = new fabric.IText('hello world', {
  styles: {
    0: {
      1: {
        fill: '#f00' // 文字顔色，#f00是紅色
      }
    }
  }
})
複制代碼           

第一次看到上面的代碼時我也覺得有點奇怪，後來仔細看了下才發現這樣設計的用意。

styles 是一個對象。

styles: { // 設定樣式
  0: { // 第1行
    1: { // 第2個字元
      // 要設定的樣式
    }
  }
}
複制代碼           

上面這段代碼是這個意思。行号和字元位置都是從0開始算起，有點像數組下标的意思。

我們這個例子隻有1行，是以行号是0。

e 的下标是 1 。是以上面的代碼就把 e 設定成紅色了。其他字元還是預設的顔色。

多行：設定指定文字顔色

const iText = new fabric.IText('hello\nworld', {
  styles: { // 設定樣式
    0: { // 第1行
      1: {
        fill: '#f00' // 文字顔色
      }
    },
    1: { // 第2行
      2: {
        fill: 'hotpink'
      }
    }
  }
})
複制代碼           

IText 的換行是用 \n 來表達的。

這個例子要 修改第1行第2個字元的文字顔色為紅色，第2行第3個字元為亮粉色 。

從代碼裡的注釋應該可以看得懂本次操作。

設定文字背景色

const iText = new fabric.IText('hello world', {
  styles: {
  0: {
    1: {
      textBackgroundColor: 'yellowgreen', // 背景色
    }
  },
})
複制代碼           

和設定文字顔色的原理一樣，隻是把關鍵字改一改就行。

textBackgroundColor 翻譯成中文就是文本背景色。

代碼倉庫

⭐Fabric 設定IText指定字元顔色和背景色

推薦閱讀

《Fabric.js 筆刷到底怎麼用？》

《Fabric.js 圓形筆刷》

《純CSS 紅磚背景牆》

《Fabric.js 自由繪制橢圓》