Fabric.js IText 手动设置斜体

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第29天,点击查看活动详情


本文简介

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


不管是在富文本编辑器还是在Word里,都有“斜体”功能。而 Fabric.js 也不例外。本文主要讲解在 Fabric.js 中使用 IText 创建的文本进行斜体设置。

其中包括:

  • 在创建文字时就设置斜体
  • 让用户手动设置斜体



初始化画布

初始化画布是必须的,之后讲解的内容都会基于这小节的代码进行开发。

file






初始化的代码非常简单,如果你对上面的代码不太理解的话可以先看看 《Fabric.js 从入门到膨胀》



创建文本时设置斜体

IText 要设置斜体可以用 italic 或者 oblique 这两个关键字,用哪个都行,本文使用 italic 进行讲解。

// 省略部分代码
const iText = new fabric.IText('hello world', {
  fontStyle: 'italic'
})

要在初始化时设置斜体,只需将 fontStyle 设置成 italic 或者 oblique 即可。

file


上面的代码是全文进行斜体设置的,如果你只是想设置某个字符,可以使用下面的方法

// 省略部分代码
const iText = new fabric.IText('hello world', {
  styles: {
    0: {
      1: {
        fontStyle: 'italic'
      }
    }
  }
})
file

我将 “e” 设置成斜体。

使用 styles 可以逐行逐字进行设置。“e” 位于第1行第2个字符,而计算行和列是从下标0 开始的,所以 “e” 的位置是 0-1



手动设置斜体

手动设置斜体分2种情况:

  1. 全文斜体 / 恢复默认
  2. 被选中的文本进行斜体 / 恢复默认


为了可以手动设置,我在页面上添加了一个按钮。

操作如图所示

file







以上代码的思路和步骤是:

  1. 通过 canvas.getActiveObject() 方法获取当前被选中的对象。
  2. 如果当前没选中任何文本,就不做操作。
  3. 通过 isEditing 属性检测文本是否处于编辑状态。
  4. 编辑状态下,将被选中的文本进行斜体或恢复默认的操作。
  5. 非编辑状态下,全文进行斜体或恢复默认操作。


以上就是本文主要想讲解的内容。



代码仓库

⭐Fabric.js IText 手动设置斜体



推荐阅读

《Fabric.js 控制元素层级》

《Fabric.js 上划线、中划线(删除线)、下划线》

《Fabric.js 激活输入框》

《Fabric.js 输出精简的JSON》

《Fabric.js 动态设置字号大小》
点赞 + 关注 + 收藏 = 学会了

你可能感兴趣的:(Fabric.js IText 手动设置斜体)