Fabric.js 上划线、中划线（删除线）、下划线

作者：德育处主任

2022 年 6 月 26 日
本文字数：1834 字
阅读完需：约 6 分钟

本文简介

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

在 HTML 也好，Word 也好，基本都有下划线和删除线（中划线）。

Fabric.js 作为一个老牌 canvas 库，当然也提供中划线和下划线的配置啦，除此之外还提供了上划线的配置。

本文要讲解的就是这 3 种装饰线在 fabric.js 中的使用方法。除了初始化配置外，还支持项目运行时，让用户动态配置。

本文案例使用了 IText ，该组件支持编辑功能。

初始化时设置

这是上划线、中划线和下划线的文档：

<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>