关于前端:Fabricjs-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 自在绘制椭圆》

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