likes
comments
collection
share

Fabric.js 动态设置字号大小

作者站长头像
站长
· 阅读数 329

本文简介

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

本文使用 Fabric.jsIText 演示。如果你还不懂 Fabric.js ,我墙裂推荐你阅读 《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 锁定背景图,不受缩放和拖拽的影响》点赞 + 关注 + 收藏 = 学会了