本文使用 Fabric.js
的 IText
演示。如果你还不懂 Fabric.js
,我墙裂推荐你阅读 《Fabric.js从入门到精通》。
一图胜千言,先看看图我们再写作文
分析需求
从上图可以看出以下功能需求:\n\n1. 文本被选中后才能修改字号\n2. 整体修改字号\n3. 修改被选中的几个字的字号,没被选中的不进行修改\n\n
解决思路\n\n1. 获取被选中的文字:canvas.getActiveObject()
。\n2. 是否只选中一部分文字:\n 1. 我通过编辑状态来判断是否只选中一部分文字:isEditing
。\n 2. 修改被选中文字的样式:setSelectionStyles({...})
。\n3. 修改 fontSize
属性。\n4. 如果是全文修改,还要判断是否有些字符在自身设置了 fontSize
,如果文字自己设置了 fontSize
,那全文设置的权重没独立设置的那么高。\n\n
编码html\n<input type="range" min="5" max="150" value="40" id="size" onchange="changeSize(value)">\n<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>\n\n<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>\n<script>\n const canvas = new fabric.Canvas('c')\n\n const iText = new fabric.IText('hello world')\n\n canvas.add(iText)\n\n function changeSize(value) {\n let activeTxt = canvas.getActiveObject()\n\n if (!activeTxt) return\n\n if (activeTxt.isEditing) {\n // 编辑状态\n activeTxt.setSelectionStyles({ 'fontSize': value})\n } else {\n activeTxt.fontSize = value\n let s = activeTxt.styles\n \n // 遍历行和列\n for(let i in s) {\n for (let j in s[i]) {\n s[i][j].fontSize = value // 针对每个字设置字号\n }\n }\n activeTxt.dirty = true\n }\n\n canvas.renderAll()\n }\n</script>\n
使用 isEditing
判断当前是否进入编辑状态,我是根据编辑状态下是否有选中文字来修改字号大小的。\n\n最后有2层循环:\n\njs\nfor(let i in s) {\n for (let j in s[i]) {\n s[i][j].fontSize = value\n }\n}\n
\n\n第一层循环 i
是行数的遍历;第二层循环 j
是当前行的文字的遍历。\n\n这么做是因为如果只使用 setSelectionStyles
设置字号大小是无法覆盖每个字本身被设置的 fontSize
。所以还是需要循环一遍,保证每个字都修改到位。
设置字号大小的例子还可以用在上标和下标里,比如 《Fabric.js 上标和下标的使用偏方》 一文中的用法。上标和小标适应用在合在数学公式和化学符号等场景。