本文简介

点赞 + 关注 + 珍藏 = 学会了


本文应用 Fabric.js 的 IText 演示。如果你还不懂 Fabric.js ，我墙裂举荐你浏览 《Fabric.js从入门到精通》。


一图胜千言，先看看图咱们再写作文~



剖析

需要

从上图能够看出以下性能需要：

  1. 文本被选中后能力批改字号
  2. 整体批改字号
  3. 批改被选中的几个字的字号，没被选中的不进行批改


解决思路

  1. 获取被选中的文字：canvas.getActiveObject() 。

  2. 是否只选中一部分文字：

    1. 我通过编辑状态来判断是否只选中一部分文字：isEditing 。
    2. 批改被选中文字的款式：setSelectionStyles({...}) 。
  3. 批改 fontSize 属性。
  4. 如果是全文批改，还要判断是否有些字符在本身设置了 fontSize ，如果文字本人设置了 fontSize ，那全文设置的权重没独立设置的那么高。



编码

<input type="range" min="5" max="150" value="40" id="size" onchange="changeSize(value)"><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><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)  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 动静批改字号



举荐浏览

《Fabric.js 激活输入框》

《Fabric.js 输入精简的JSON》

《Fabric.js 缩放画布》

《Fabric.js 锁定背景图，不受缩放和拖拽的影响》
点赞 + 关注 + 珍藏 = 学会了