Fabric.js IText设置指定字符颜色和背景色

---

theme: smartblue

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

本文简介

点赞 + 关注 + 收藏 = 学会了

IText 是 Fabric.js 提供的一个 可编辑文本 的元素。

要设置文字颜色，可以设置 fill 。

但 fill 会设置所有文字的颜色，如果你只想修改指定文字的颜色，只用 fill 就不是那么容易实现了。

本文要讲的就是 设置指定文字的颜色和背景色。

设置文字颜色或背景色，需要分情况讨论的：

1. 全文设置
2. 设置指定文字颜色(单行)
3. 设置指定文字颜色(多行)

接下来就将上述情况逐一讲解。

起步

```html

```

首先把 Fabric.js 引入，然后初始化画布。如果对这个概念不太熟的话，可以看看 Fabric.js 从入门到膨胀。

最后通过 new fabric.IText 创建一段文字添加到画布中。

全文设置

```js // 省略部分代码

const iText = new fabric.IText('hello world', { fill: 'pink' }) ```

fill 可以设置文字的填充颜色。在 Fabric.js 里是使用这个属性设置颜色的，和 css 设置文字颜色使用 color 不一样~

单行：设置指定文字颜色

js const iText = new fabric.IText('hello world', { styles: { 0: { 1: { fill: '#f00' // 文字颜色，#f00是红色 } } } })

第一次看到上面的代码时我也觉得有点奇怪，后来仔细看了下才发现这样设计的用意。

styles 是一个对象。

js styles: { // 设置样式 0: { // 第1行 1: { // 第2个字符 // 要设置的样式 } } }

上面这段代码是这个意思。行号和字符位置都是从0开始算起，有点像数组下标的意思。

我们这个例子只有1行，所以行号是0。

e 的下标是 1 。所以上面的代码就把 e 设置成红色了。其他字符还是默认的颜色。

多行：设置指定文字颜色

js const iText = new fabric.IText('hello\nworld', { styles: { // 设置样式 0: { // 第1行 1: { fill: '#f00' // 文字颜色 } }, 1: { // 第2行 2: { fill: 'hotpink' } } } })

IText 的换行是用 \n 来表达的。

这个例子要 修改第1行第2个字符的文字颜色为红色，第2行第3个字符为亮粉色 。

从代码里的注释应该可以看得懂本次操作。

设置文字背景色

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

和设置文字颜色的原理一样，只是把关键字改一改就行。

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

代码仓库

⭐Fabric 设置IText指定字符颜色和背景色

推荐阅读

👍《Fabric.js 笔刷到底怎么用？》

👍《Fabric.js 圆形笔刷》

👍《纯CSS 红砖背景墙》

👍《Fabric.js 自由绘制椭圆》