关于前端:Fabricjs-上划线中划线删除线下划线

本文简介

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

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

下面的代码次要做这几步操作：

1. 初始化画布
2. 创立文字
3. 将文字增加到画布中
4. linethrough 办法增加或勾销中划线

最次要的操作逻辑写在 linethrough 办法里了。

linethrough 的逻辑如下

1. 获取以后选中的文字
2. 如果没选中就不做任何操作
3. 如果选中了，判断是否进入编辑状态

4. 编辑状态

   1. 获取以后被选中文字的中划线状态
   2. 如果被选中文字设置了中划线，就把中划线勾销掉
   3. 如果被选中文字没设置中划线，就增加中划线

5. 如果不是编辑状态，只是单击了 iText 进入框选状态

   1. 如果须要全局勾销中划线

      1. 全局勾销
      2. 循环每个字符，并勾销每个字符的中划线

   2. 须要全局设置中划线

      1. 全局设置
      2. 再一一字符独自设置
6. 从新渲染画布

代码仓库

⭐IText 动静设置装璜线

举荐浏览

👍《Fabric.js 动静设置字号大小 🎄》

👍《Fabric.js 激活输入框🎈》

👍《Fabric.js 输入精简的 JSON🎫》

👍《这 18 个网站能让你的页面背景炫酷起来》
点赞 + 关注 + 珍藏 = 学会了