本文簡介
按讚 + 追蹤 + 收藏 = 學會了
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/zh-Hant/articles/detail/Fabric-js-IText-she-zhi-zhi-ding-zi-fu-yan-se-he-bei-jing-se.html
支付宝扫一扫 
评论列表（196条）
测试