本文简介
点赞 + 关注 + 珍藏 = 学会了
在 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 动静设置装璜线
举荐浏览
👍《Fabric.js 动静设置字号大小 🎄》
👍《Fabric.js 激活输入框🎈》
👍《Fabric.js 输入精简的 JSON🎫》
👍《这 18 个网站能让你的页面背景炫酷起来》
点赞 + 关注 + 珍藏 = 学会了