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 动态修改字号