Fabric.js IText 手动设置斜体 🎋

作者：德育处主任

2022 年 6 月 22 日
本文字数：1675 字
阅读完需：约 5 分钟

本文简介

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

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

其中包括：

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

初始化画布

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

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>
<!-- 引入 fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>
<script>  const canvas = new fabric.Canvas('c') // 创建画布，并绑定元素  const iText = new fabric.IText('hello world') // 创建文本  canvas.add(iText) // 将文本添加进画布中</script>

复制代码

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

创建文本时设置斜体

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

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

复制代码

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

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

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

复制代码

我将 “e” 设置成斜体。

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

手动设置斜体

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

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

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

操作如图所示

<button onclick="italic()">斜体</button><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>
<!-- 引入 fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>
<script>  const canvas = new fabric.Canvas('c') // 创建画布，并绑定元素  const iText = new fabric.IText('hello world') // 创建文本  canvas.add(iText) // 将文本添加进画布中
  function italic() {    let activeTxt = canvas.getActiveObject()
    if (!activeTxt) return
    if (activeTxt.isEditing) {      // 编辑状态，将被选中的文本进行斜体或恢复默认的操作      const state = activeTxt.getSelectionStyles().find(item => item.fontStyle !== 'italic')
      if (!state || (JSON.stringify(state) === '{}' && activeTxt['fontStyle'] === 'italic')) {        activeTxt.setSelectionStyles({ 'fontStyle': 'normal' })      } else {        activeTxt.setSelectionStyles({ 'fontStyle': 'italic' })      }    } else {      // 选择状态，全文进行斜体或恢复默认操作      if (activeTxt['fontStyle'] === 'italic') {        activeTxt.fontStyle = 'normal'        let s = activeTxt.styles        for(let i in s) {          for (let j in s[i]) {            s[i][j].fontStyle = 'normal'          }        }      } else {        activeTxt.fontStyle = 'italic'        let s = activeTxt.styles        for(let i in s) {          for (let j in s[i]) {            s[i][j].fontStyle = 'italic'          }        }      }    }
    canvas.renderAll()  }</script>