本文简介
点赞 + 关注 + 收藏 = 学会了
IText 是 Fabric.js 提供的一个 可编辑文本 的元素。
要设置文字颜色,可以设置 fill 。
但 fill 会设置所有文字的颜色,如果你只想修改指定文字的颜色,只用 fill 就不是那么容易实现了。
本文要讲的就是 设置指定文字的颜色和背景色。
设置文字颜色或背景色,需要分情况讨论的:
- 全文设置
- 设置指定文字颜色(单行)
- 设置指定文字颜色(多行)
接下来就将上述情况逐一讲解。
起步
<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 自由绘制椭圆》
文章为用户上传,仅供非商业浏览。发布者:Lomu,转转请注明出处: https://www.daogebangong.com/articles/detail/Fabric-js-IText-she-zhi-zhi-ding-zi-fu-yan-se-he-bei-jing-se.html
评论列表(196条)
测试