写点什么

Fabric.js IText 手动设置斜体 🎋

作者:德育处主任
  • 2022 年 6 月 22 日
  • 本文字数:1675 字

    阅读完需:约 5 分钟

Fabric.js IText 手动设置斜体 🎋

本文简介

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


不管是在富文本编辑器还是在 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 手动设置斜体

发布于: 刚刚阅读数: 3
用户头像

反派 2019.03.19 加入

用键盘绣花

评论

发布
暂无评论
Fabric.js IText 手动设置斜体 🎋_JavaScript_德育处主任_InfoQ写作社区