Fabric.js 動態設置字號大小

本文簡介

點贊 + 關注 + 收藏 = 學會了

本文使用 

Fabric.js

 的 

IText

 演示。如果你還不懂 

Fabric.js

 ，我牆裂推薦你閱讀 

《Fabric.js從入門到精通》

。

一圖勝千言，先看看圖我們再寫作文~

分析

需求

從上圖可以看出以下功能需求：

• 文本被選中後才能修改字號

• 整體修改字號

• 修改被選中的幾個字的字號，沒被選中的不進行修改

解决思路

• 獲取被選中的文字：
  canvas.getActiveObject()
   。

• 是否只選中一部分文字：

• 我通過編輯狀態來判斷是否只選中一部分文字：
  isEditing
   。

• 修改被選中文字的樣式：
  setSelectionStyles({...})
   。

• 修改 
  fontSize
   屬性。

• 如果是全文修改，還要判斷是否有些字符在自身設置了 
  fontSize
   ，如果文字自己設置了 
  fontSize
   ，那全文設置的權重沒獨立設置的那麼高。

編碼

<input type=&quot;range&quot; min=&quot;5&quot; max=&quot;150&quot; value=&quot;40&quot; id=&quot;size&quot; onchange=&quot;changeSize(value)&quot;>
<canvas id=&quot;c&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;border: 1px solid #ccc&quot;></canvas>

<script src=&quot;https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js&quot;></script>
<script>
 const canvas = new fabric.Canvas('c')

 const iText = new fabric.IText('hello world')

 canvas.add(iText)

 function changeSize(value) {
 let activeTxt = canvas.getActiveObject()

 if (!activeTxt) return

 if (activeTxt.isEditing) {
 // 編輯狀態
 activeTxt.setSelectionStyles({ 'fontSize': value})
 } else {
 activeTxt.fontSize = value
 let s = activeTxt.styles
 // 遍曆行和列
 for(let i in s) {
 for (let j in s[i]) {
 s[i][j].fontSize = value // 針對每個字設置字號
 }
 }
 activeTxt.dirty = true
 }

 canvas.renderAll()
 }
</script>


使用 

isEditing

 判斷當前是否進入編輯狀態，我是根據編輯狀態下是否有選中文字來修改字號大小的。

最後有2層循環：

for(let i in s) {
 for (let j in s[i]) {
 s[i][j].fontSize = value
 }
}


第一層循環 

i

 是行數的遍曆；第二層循環 

j

 是當前行的文字的遍曆。

這麼做是因為如果只使用 

setSelectionStyles

 設置字號大小是無法覆蓋每個字本身被設置的 

fontSize

 。所以還是需要循環一遍，保證每個字都修改到比特。

設置字號大小的例子還可以用在

上標

和

下標

裏，比如 

《Fabric.js 上標和下標的使用偏方》

 一文中的用法。上標和小標適應用在合在數學公式和化學符號等場景。

代碼倉庫

IText 動態修改字號