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

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

要设置文本颜色，您可以设置填充。

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

本篇文章是关于设置指定文本的颜色和背景色。

设置文字颜色或者背景颜色，需要根据情况讨论：

全文设置 设置指定文本颜色（单行） 设置指定文本颜色（多行）

下面对上述情况一一进行说明。

开始

  // 初始化画布
  const canvas = new fabric.Canvas('c')
  // 创建文本
  const iText = new fabric.IText('hello world')
  // 将文本添加到画布里
  canvas.add(iText)

复制代码

首先导入.js，然后初始化画布。 如果你对这个概念不熟悉，可以看一下.js从入门到扩展。

最后，通过new .IText创建一段文本并将其添加到画布中。

全文设置

// 省略部分代码
const iText = new fabric.IText('hello world', {
  fill: 'pink'
})
复制代码

fill可以设置文本的填充颜色。 在.js中，这个属性是用来设置颜色的，和css中用来设置文字颜色的颜色不同~

单行：设置指定文字颜色

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

当我第一次看到上面的代码时，我也觉得有点奇怪。 仔细一看，我发现了这样设计的目的。

是一个对象。

styles: { // 设置样式
  0: { // 第1行
    1: { // 第2个字符
      // 要设置的样式
    }
  }
}
复制代码

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

我们的示例只有 1 行，因此行号为 0。

e 的下标是 1 。 所以上面的代码将 e 设置为红色。 其他字符仍为默认颜色。

多行：设置指定文字颜色

const iText = new fabric.IText('hellonworld', {
  styles: { // 设置样式
    0: { // 第1行
      1: {
        fill: '#f00' // 文字颜色
      }
    },
    1: { // 第2行
      2: {
        fill: 'hotpink'
      }
    }
  }
})
复制代码

IText的换行符用n表示。

在此示例中，第 1 行中的第二个字符的文本颜色更改为红色，第 2 行中的第三个字符为亮粉色。

从代码中的注释中你应该能够理解这个操作。

设置文本背景颜色

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

原理和设置文字颜色一样，只是改变关键字而已。

翻译成中文就是文字背景色。

代码库

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

好了，今天的主题就讲到这里吧，不管如何，能帮到你我就很开心了，如果您觉得这篇文章写得不错，欢迎点赞和分享给身边的朋友。

kanqiu普通

打赏 收藏 海报 链接