关于前端:Fabricjs-IText-手动设置斜体

继续创作，减速成长！这是我参加「掘金日新打算 · 6 月更文挑战」的第 29 天，点击查看流动详情

本文简介

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

不论是在富文本编辑器还是在 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 种状况：

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>

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

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

以上就是本文次要想解说的内容。

代码仓库

⭐Fabric.js IText 手动设置斜体

举荐浏览

👍《Fabric.js 管制元素层级》

👍《Fabric.js 上划线、中划线（删除线）、下划线》

👍《Fabric.js 激活输入框》

👍《Fabric.js 输入精简的 JSON》

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