Fabric.js 动态设置字号大小 🎄

作者：德育处主任

2022 年 6 月 11 日
本文字数：1028 字
阅读完需：约 3 分钟

本文简介

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

本文使用 Fabric.js 的 IText 演示。如果你还不懂 Fabric.js ，我墙裂推荐你阅读《Fabric.js从入门到精通》。

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

分析

需求

从上图可以看出以下功能需求：

文本被选中后才能修改字号
整体修改字号
修改被选中的几个字的字号，没被选中的不进行修改

解决思路

获取被选中的文字：canvas.getActiveObject() 。
是否只选中一部分文字：
我通过编辑状态来判断是否只选中一部分文字：isEditing 。
修改被选中文字的样式：setSelectionStyles({...}) 。
修改 fontSize 属性。
如果是全文修改，还要判断是否有些字符在自身设置了 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 动态修改字号

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/5f54a77802b651a1d04588295】。文章转载请联系作者。

德育处主任

关注

反派 2019.03.19 加入

用键盘绣花

发布

暂无评论

创作场景

Fabric.js 动态设置字号大小 🎄

本文简介

分析

编码

代码仓库

德育处主任

评论