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

代码颜色表_代码颜色怎么打_html颜色代码

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

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

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

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

全文设置 设置指定文本颜色(单行) 设置指定文本颜色(多行)

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

开始

代码颜色怎么打_代码颜色表_html颜色代码




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

复制代码

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

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

全文设置

代码颜色怎么打_html颜色代码_代码颜色表

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

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

单行:设置指定文字颜色

html颜色代码_代码颜色表_代码颜色怎么打

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

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

是一个对象。

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

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

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

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

多行:设置指定文字颜色

代码颜色怎么打_代码颜色表_html颜色代码

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

IText的换行符用n表示。

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

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

设置文本背景颜色

代码颜色怎么打_代码颜色表_html颜色代码

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

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

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

代码库

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

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注