本文簡介
點贊 + 關(guān)注 + 收藏 = 學(xué)會了
IText 是 Fabric.js 提供的一個 可編輯文本 的元素袖瞻。
要設(shè)置文字顏色，可以設(shè)置 fill 。
但 fill 會設(shè)置所有文字的顏色，如果你只想修改指定文字的顏色实抡，只用 fill 就不是那么容易實現(xiàn)了。
本文要講的就是 設(shè)置指定文字的顏色和背景色疾就。
設(shè)置文字顏色或背景色，需要分情況討論的：
- 全文設(shè)置
- 設(shè)置指定文字顏色（單行）
- 設(shè)置指定文字顏色（多行）
接下來就將上述情況逐一講解艺蝴。
起步
<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')
// 創(chuàng)建文本
const iText = new fabric.IText('hello world')
// 將文本添加到畫布里
canvas.add(iText)
</script>
首先把 Fabric.js 引入猬腰，然后初始化畫布。如果對這個概念不太熟的話猜敢，可以看看 Fabric.js 從入門到膨脹姑荷。
最后通過 new fabric.IText 創(chuàng)建一段文字添加到畫布中。
全文設(shè)置
// 省略部分代碼
const iText = new fabric.IText('hello world', {
fill: 'pink'
})
fill 可以設(shè)置文字的填充顏色缩擂。在 Fabric.js 里是使用這個屬性設(shè)置顏色的鼠冕，和 css 設(shè)置文字顏色使用 color 不一樣~
單行：設(shè)置指定文字顏色
const iText = new fabric.IText('hello world', {
styles: {
0: {
1: {
fill: '#f00' // 文字顏色，#f00是紅色
}
}
}
})
第一次看到上面的代碼時我也覺得有點奇怪胯盯，后來仔細(xì)看了下才發(fā)現(xiàn)這樣設(shè)計的用意懈费。
styles 是一個對象。
styles: { // 設(shè)置樣式
0: { // 第1行
1: { // 第2個字符
// 要設(shè)置的樣式
}
}
}
上面這段代碼是這個意思博脑。行號和字符位置都是從0開始算起憎乙，有點像數(shù)組下標(biāo)的意思票罐。
我們這個例子只有1行，所以行號是0泞边。
e 的下標(biāo)是 1 该押。所以上面的代碼就把 e 設(shè)置成紅色了。其他字符還是默認(rèn)的顏色阵谚。
多行：設(shè)置指定文字顏色
const iText = new fabric.IText('hello\nworld', {
styles: { // 設(shè)置樣式
0: { // 第1行
1: {
fill: '#f00' // 文字顏色
}
},
1: { // 第2行
2: {
fill: 'hotpink'
}
}
}
})
IText 的換行是用 \n 來表達的蚕礼。
這個例子要 修改第1行第2個字符的文字顏色為紅色，第2行第3個字符為亮粉色 梢什。
從代碼里的注釋應(yīng)該可以看得懂本次操作奠蹬。
設(shè)置文字背景色
const iText = new fabric.IText('hello world', {
styles: {
0: {
1: {
textBackgroundColor: 'yellowgreen', // 背景色
}
},
})
和設(shè)置文字顏色的原理一樣，只是把關(guān)鍵字改一改就行绳矩。
textBackgroundColor 翻譯成中文就是文本背景色罩润。
代碼倉庫
?Fabric 設(shè)置IText指定字符顏色和背景色
推薦閱讀
點贊 + 關(guān)注 + 收藏 = 學(xué)會了
