本文简介
点赞 + 关注 + 收藏 = 学会了
在 HTML 也好，Word 也好，基本都有下划线和删除线（中划线）。
Fabric.js 作为一个老牌 canvas 库，当然也供应中划线和下划线的配置啦，除此之外还供应了上划线的配置。
本文要讲解的便是这3种装饰线在 fabric.js 中的利用方法。除了初始化配置外，还支持项目运行时，让用户动态配置。
本文案例利用了 IText ，该组件支持编辑功能。
初始化时设置
这是上划线、中划线和下划线的文档：
上划线 overline中划线 linethrough下划线 underline<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><script src="../../script/fabric.5.2.1.js"></script><script> const canvas = new fabric.Canvas('c') const iText = new fabric.IText('aaa',{ styles: { 0: { 0: { overline: true }, // 上划线 1: { linethrough: true }, // 中划线 2: { underline: true } // 下划线 } } }) canvas.add(iText)</script>
本例只有3个字母 a ，而且都在同一行。
styles 第一个元素的 key 为 0 的意思是第一行，行号下标从0开始。
大概这个意思
styles: { 0: { // 第1行 0:, // 第1行 第1个字 1:, // 第1行 第2个字 2: // 第1行 第3个字 }}
如果须要换行，那就要根据行号来定义了。换行的方法是文本内容里利用 \n 做换行。
动态设置除了在初始化时可以设置装饰线外，Fabric.js 也供应了在运行时用户手动设置。不过代码会轻微繁芜一点。
实在动态设置上划线、中划线和下划线的操作都是一样的，唯一要变的便是属性名。
我以中划线为例，之后上划线和下划线只需改个属性名。
<button onclick="linethrough()">中划线</button><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><!-- 引入fabric --><script src="../../script/fabric.5.2.1.js"></script><script> const canvas = new fabric.Canvas('c') // 初始化画布 const iText = new fabric.IText('hello wor\nld') // 创建笔墨 canvas.add(iText) function linethrough() { let activeTxt = canvas.getActiveObject() // 获取当前选中的笔墨 // 如果当前没选中笔墨，那什么都不操作 if (!activeTxt) return // 判断当前是否进入编辑状态 if (activeTxt.isEditing) { // 编辑状态 const state = activeTxt.getSelectionStyles().find(item => item.linethrough !== true) // 如果当前 if (!state || (JSON.stringify(state) === '{}' && activeTxt['linethrough'] === true)) { // 如果当前已经设置了中划线，那就把全局中划线取消 activeTxt.setSelectionStyles({ 'linethrough': false }) } else { // 如果当前没设置中划线，那就添加上中划线 activeTxt.setSelectionStyles({ 'linethrough': true }) } } else { // 选择状态 if (activeTxt['linethrough'] === true) { activeTxt.linethrough = false activeTxt.dirty = true; let s = activeTxt.styles for(let i in s) { for (let j in s[i]) { s[i][j].linethrough = false } } } else { activeTxt.linethrough = true activeTxt.dirty = true; let s = activeTxt.styles for(let i in s) { for (let j in s[i]) { s[i][j].linethrough = true } } } } canvas.renderAll() }</script>
上面的代码紧张做这几步操作：
初始化画布创建笔墨将笔墨添加到画布中linethrough 方法添加或取消中划线最紧张的操作逻辑写在 linethrough 方法里了。
linethrough 的逻辑如下
获取当前选中的笔墨如果没选中就不做任何操作如果选中了，判断是否进入编辑状态编辑状态 获取当前当选中笔墨的中划线状态 如果当选中笔墨设置了中划线，就把中划线取消掉 如果当选中笔墨没设置中划线，就添加中划线如果不是编辑状态，只是单击了 iText 进入框选状态 如果须要全局取消中划线 全局取消 循环每个字符，并取消每个字符的中划线 须要全局设置中划线 全局设置 再逐个字符单独设置重新渲染画布代码仓库⭐IText 动态设置装饰线
https://gitee.com/k21vin/fabricjs-demo/blob/master/tutorial/IText/styles04decoration.html
