--- theme: smartblue --- 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，[点击查看活动详情](https://juejin.cn/post/7099702781094674468)
# 本文简介 **点赞 + 关注 + 收藏 = 学会了**
在 `HTML` 也好，`Word` 也好，基本都有下划线和删除线（中划线）。 `Fabric.js` 作为一个老牌 `canvas` 库，当然也提供**中划线**和**下划线**的配置啦，除此之外还提供了**上划线**的配置。 ![01.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/61ec170275ca40578268e70b4ce233cb~tplv-k3u1fbpfcp-watermark.image?) 本文要讲解的就是这3种装饰线在 `fabric.js` 中的使用方法。除了初始化配置外，还支持项目运行时，让用户动态配置。本文案例使用了 `IText` ，该组件支持编辑功能。

# 初始化时设置这是上划线、中划线和下划线的文档： - [上划线 overline](http://fabricjs.com/docs/fabric.IText.html#overline) - [中划线 linethrough](http://fabricjs.com/docs/fabric.IText.html#linethrough) - [下划线 underline](http://fabricjs.com/docs/fabric.IText.html#underline)
![01.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6369f6d764b43749780fa757bc1e9f7~tplv-k3u1fbpfcp-watermark.image?) ```html

``` 本例只有3个字母 `a` ，而且都在同一行。 `styles` 第一个元素的 `key` 为 `0` 的意思是第一行，行号下标从0开始。大概这个意思 ```js styles: { 0: { // 第1行 0:, // 第1行第1个字 1:, // 第1行第2个字 2: // 第1行第3个字 } } ``` 如果需要换行，那就要根据行号来定义了。换行的方法是文本内容里使用 `\n` 做换行。 # 动态设置除了在初始化时可以设置装饰线外，`Fabric.js` 也提供了在运行时用户手动设置。不过代码会稍微复杂一点。其实动态设置上划线、中划线和下划线的操作都是一样的，唯一要变的就是属性名。我以中划线为例，之后上划线和下划线只需改个属性名。 ![02.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41886dd3bb834818a16ff859a3a0991f~tplv-k3u1fbpfcp-watermark.image?) ```html

``` 上面的代码主要做这几步操作： 1. 初始化画布 2. 创建文字 3. 将文字添加到画布中 4. `linethrough` 方法添加或取消中划线
最主要的操作逻辑写在 `linethrough` 方法里了。 `linethrough` 的逻辑如下 1. 获取当前选中的文字 2. 如果没选中就不做任何操作 3. 如果选中了，判断是否进入编辑状态 4. 编辑状态 1. 获取当前被选中文字的中划线状态 2. 如果被选中文字设置了中划线，就把中划线取消掉 3. 如果被选中文字没设置中划线，就添加中划线 5. 如果不是编辑状态，只是单击了 `iText` 进入框选状态 1. 如果需要全局取消中划线 1. 全局取消 2. 循环每个字符，并取消每个字符的中划线 2. 需要全局设置中划线 1. 全局设置 2. 再逐个字符单独设置 6. 重新渲染画布

# 代码仓库 ⭐[IText 动态设置装饰线](https://gitee.com/k21vin/fabricjs-demo/blob/master/tutorial/IText/styles04decoration.html)

# 推荐阅读 👍[《Fabric.js 动态设置字号大小 🎄》](https://juejin.cn/post/7107767051162238990) 👍[《Fabric.js 激活输入框🎈》](https://juejin.cn/post/7107000176283222047) 👍[《Fabric.js 输出精简的JSON🎫》](https://juejin.cn/post/7106159817361719304) 👍[《这18个网站能让你的页面背景炫酷起来》](https://juejin.cn/post/7044397764368662559)