Fabric.js 上划线、中划线(删除线)、下划线
本文简介
点赞 + 关注 + 收藏 = 学会了
在 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 οnclick="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 = falseactiveTxt.dirty = true;let s = activeTxt.stylesfor(let i in s) {for (let j in s[i]) {s[i][j].linethrough = false}}} else {activeTxt.linethrough = trueactiveTxt.dirty = true;let s = activeTxt.stylesfor(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 实现文本文字加粗、下划线、斜体、竖排、字体对齐代码
原图 效果图 代码 index.html <!DOCTYPE HTML> <html> <head><meta charset="utf-8&quo ...
- Latex 删除线 下划线 波浪线 文字颜色 下划引用编号; Latex 对图像排版, 去除subfigure中的(a) 等
Latex部分用法记录 Latex颜色 \usepackage{color} \textcolor{red, blue, green}{233333} 下划线-1 (不会使期刊有下划线) \usepa ...
- markdown学习笔记——字体/分割线/删除线/下划线
markdown字体 markdown可以使用一下几种字体: 斜体文本 斜体文本 粗体文本 粗体文本 粗斜体文本 粗斜体文本 代码如下: *斜体文本* _斜体文本_ **粗体文本** __粗体文本__ ...
- HTML中的删除线:del和s的区别
在HTML中,删除线标签有两种:del标签和s标签. <s>我是s标签</s><del>我是del标签</del> 效果: 都可以实现删除线的效果,肯 ...
- 如何在word表格中添加删除线,划去不想要的部分?
如何在word表格中添加删除线,划去不想要的部分? 一.在word的表格中不能直接添加删除线,只能先在excel表格中加上删除线,再复制到word表格中 二.excel表格中添加删除线: 右击选中需要 ...
- java注释中添加删除线_如何在Word中添加和删除注释
java注释中添加删除线 Leaving comments in a Word document is a good way to leave feedback on a piece you're r ...
- 游戏中文本中间的下划线
游戏中文本中间的下划线 直接上代码 // An highlighted blockpublic Text txt ;public Image img;public GameObject go;priv ...
- html5中链接去除下划线,html超链接去掉下划线 html去除取消超链接下划线
html a超链接标签,默认有的涉猎器表现有下划线,有的不有下划线,大多锚文本超链接A标签内字体是有下划线的,怎么去除超链接下划线?html 超链接去除下划线怎么样做? 去掉去除超链接锚文本的下划线需 ...
- html语言添加下划线,HTML页面中怎么文本添加下划线?
怎么在HTML页面中给文本添加下划线?下面本篇文章就来给大家介绍一下HTML.CSS给文本添加下划线的方法,希望对大家有所帮助. HTML添加下划线 在HTML中可以使用标签定义下划线文本,即为文本添 ...
- 关于python中带下划线的变量和函数 的意义,class类带一个下划线和带两个下划线的定义
总结: 变量: 1. 前带_的变量: 标明是一个私有变量, 只用于标明, 外部类还是可以访问到这个变量 2. 前带两个_ ,后带两个_ 的变量: 标明是内置变量, 3. 大写加下划线的变量: ...
最新文章
- JSP第二次作业_4小题
- aspx页面事件执行顺序
- MFC - CStdioFile 读取txt文件UNICODE 中文异常
- 当 Messaging 遇上 Jepsen
- 数据库实验一:创建数据库和表
- java商城如何防止超卖_电商中怎么防止超卖
- Java OpenCV 裁剪图片
- 基于tesseract的文字识别
- 小米忙着营销,麻烦带上技术!
- go语言求时间的差值(按天数算)
- 面向对象的类、方法和对象
- 2021-02-07 - GraphQL - 学习/实践
- 多源异构数据整合在多规合一中的应用
- java web logout_java – spring-security login?logout重定向到登录
- 通过shell脚本自动化量产SD启动卡
- 准确率、精确率、召回率、F1-measure简单总结
- IT项目管理-看板管理
- [数论][组合数学]微信群
- 亚马逊又收新费用;沃尔玛销售不合格产品被罚超34万;长荣10亿美元将订造26艘新船…|洞悉跨境
- 超酷的摄像头魔法特效软件:ArcSoft Magic Visual Effects