当前位置：网站首页>Fabric.js 上划线、中划线（删除线）、下划线

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

2022-06-26 09:49:00 【InfoQ】

本文简介

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

在

HTML

也好，

Word

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

Fabric.js

作为一个老牌

canvas

库，当然也提供

中划线

和

下划线

的配置啦，除此之外还提供了

上划线

的配置。

本文要讲解的就是这3种装饰线在

fabric.js

中的使用方法。除了初始化配置外，还支持项目运行时，让用户动态配置。

本文案例使用了

IText

，该组件支持编辑功能。

初始化时设置

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

上划线 overline

中划线 linethrough

下划线 underline

<canvas id=&quot;c&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;border: 1px solid #ccc&quot;></canvas>

<script src=&quot;../../script/fabric.5.2.1.js&quot;></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=&quot;linethrough()&quot;>中划线</button>

<canvas id=&quot;c&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;border: 1px solid #ccc&quot;></canvas>

<canvas id=&quot;c&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;border: 1px solid #ccc&quot;></canvas>

<!-- 引入fabric -->
<script src=&quot;../../script/fabric.5.2.1.js&quot;></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>