续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

本文简介

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

在 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. 编辑状态 获取当前被选中文字的中划线状态 如果被选中文字设置了中划线，就把中划线取消掉 如果被选中文字没设置中划线，就添加中划线
5. 如果不是编辑状态，只是单击了 iText 进入框选状态 如果需要全局取消中划线 全局取消 循环每个字符，并取消每个字符的中划线 需要全局设置中划线 全局设置 再逐个字符单独设置
6. 重新渲染画布

代码仓库

⭐IText 动态设置装饰线

https://gitee.com/k21vin/fabricjs-demo/blob/master/tutorial/IText/styles04decoration.html

文字添加删除线方法有两种，一种是使用html删除线标签<s>；另外一种是使用css删除线样式text-decoration：line-through。

html标签实现删除线样式

1，使用标签

< s > 我被加删除线</ s >

2，css删除线样式实现删除线效果

使用css实现删除线样式属性单词text-decoration：line-through

使用CSS text-decoration 属性 可以添加删除线

text-decoration定义和用法：

text-decoration 属性规定添加到文本的修饰。

注释：修饰的颜色由 “color” 属性设置。

说明：这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。

text-decoration可能的值：

none默认。定义标准的文本。

underline定义文本下的一条线。

overline定义文本上的一条线。

line-through定义穿过文本下的一条线。

blink定义闪烁的文本。

inherit规定应该从父元素继承 text-decoration 属性的值。

前端设计模式-面试题