theme: smartblue 持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第20天,点击查看活动详情
本文简介 【javascript|Fabric.js 上划线、中划线(删除线)、下划线】点赞 + 关注 + 收藏 = 学会了
在 HTML
也好,Word
也好,基本都有下划线和删除线(中划线)。
Fabric.js
作为一个老牌 canvas
库,当然也提供中划线和下划线的配置啦,除此之外还提供了上划线的配置。
文章图片
本文要讲解的就是这3种装饰线在 fabric.js
中的使用方法。除了初始化配置外,还支持项目运行时,让用户动态配置。
本文案例使用了 IText
,该组件支持编辑功能。
初始化时设置 这是上划线、中划线和下划线的文档:
- 上划线 overline
- 中划线 linethrough
- 下划线 underline
文章图片
```html
```
本例只有3个字母
a
,而且都在同一行。styles
第一个元素的 key
为 0
的意思是第一行,行号下标从0开始。大概这个意思
js styles: { 0: { // 第1行 0:, // 第1行 第1个字 1:, // 第1行 第2个字 2: // 第1行 第3个字 } }
如果需要换行,那就要根据行号来定义了。换行的方法是文本内容里使用
\n
做换行。动态设置 除了在初始化时可以设置装饰线外,
Fabric.js
也提供了在运行时用户手动设置。不过代码会稍微复杂一点。其实动态设置上划线、中划线和下划线的操作都是一样的,唯一要变的就是属性名。
我以中划线为例,之后上划线和下划线只需改个属性名。
文章图片
```html 中划线
```
上面的代码主要做这几步操作:
- 初始化画布
- 创建文字
- 将文字添加到画布中
linethrough
方法添加或取消中划线
linethrough
方法里了。linethrough
的逻辑如下- 获取当前选中的文字
- 如果没选中就不做任何操作
- 如果选中了,判断是否进入编辑状态
- 编辑状态
- 获取当前被选中文字的中划线状态
- 如果被选中文字设置了中划线,就把中划线取消掉
- 如果被选中文字没设置中划线,就添加中划线
- 如果不是编辑状态,只是单击了
iText
进入框选状态- 如果需要全局取消中划线
- 全局取消
- 循环每个字符,并取消每个字符的中划线
- 需要全局设置中划线
- 全局设置
- 再逐个字符单独设置
- 如果需要全局取消中划线
- 重新渲染画布
推荐阅读 《Fabric.js 动态设置字号大小 》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《这18个网站能让你的页面背景炫酷起来》
推荐阅读
- Laravel|Laravel 博客开发|使用 Blade 设置布局模版
- JavaScript进阶必会的手写功能
- html js调试
- 呵呵,JavaScript 真好玩(苦笑脸)
- vue|手写一个webpack,看看AST怎么用
- 手写webpack核心原理,再也不怕面试官问我webpack原理
- js插件|webpack的构建原理小结
- webpack|webpack5原理
- nuxtjs|闲云旅游项目开发-(第一篇(使用Element-ui实现主页轮播图))