Fabric.js 手动加粗文本iText

本文简介

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

本文介绍 Fabric.js 的 IText 在画布上如何让用户手动加粗文本。

效果如图所示：

要实现2种操作

1. 全文加粗
2. 只加粗选中的文字

如果你还不清楚 Fabric.js 有什么用，我强烈推荐你阅读 《Fabric.js 从入门到目中无人》 。该文能让你的前端技术再点亮一个技能点。

全文加粗

只需把 IText 的 fontWeight 属性设置成 bold 即可实现加粗。

如果想变回默认样式，可以将 fontWeight 设为 normal 。

修改完文字样式后，需要执行 canvas.renderAll() 重新渲染一下画布内容。

<button onclick="bold()">加粗</button>
<canvas id="c2" width="250" height="300" style="border: 1px solid #ccc"></canvas>

<!-- 引入fabric.js -->
<script src="js/fabric.js"></script>
<script>
  // 创建画布
  const canvas = new fabric.Canvas('c2')

  // 创建文本
  const iText = new fabric.IText('hello world')
  canvas.add(iText)

  function bold() {
    // 当前选中的元素
    let activeTxt = canvas.getActiveObject()

    // 只有选中文本才执行以下操作
    if (activeTxt) {
      activeTxt.fontWeight = 'bold' // 将字体加粗
      canvas.renderAll() // 重新渲染画布
    }
  }
</script>

加粗选中的文字

可以用 setSelectionStyles 设置被选中的文字样式，里面传一个样式对象即可。

<button onclick="bold()">加粗</button>
<canvas id="c2" width="250" height="300" style="border: 1px solid #ccc"></canvas>

<!-- 引入fabric.js -->
<script src="js/fabric.js"></script>
<script>
  // 创建画布
  const canvas = new fabric.Canvas('c2')

  // 创建文本
  const canvas = new fabric.Canvas('c2')

  // 创建文本
  const iText = new fabric.IText('hello world')
  canvas.add(iText)

  function bold() {
    // 当前选中的元素
    let activeTxt = canvas.getActiveObject()
    if (activeTxt) {
      activeTxt.setSelectionStyles({ 'fontWeight': 'bold' }) // 设置选中文字的样式
      canvas.renderAll() // 重新渲染画布
    }
  }
</script>

仓库

• ⭐本文代码仓库（完整版）

推荐阅读

文章	简介
《Fabric.js 橡皮擦的用法（包含恢复功能）》	橡皮擦需要下载一个工具包，详情可参考该文。
《Fabric.js 基础画笔的用法 BaseBrush》	画笔的基础用法
《Fabric.js 自由绘制圆形》	将“框选”动作改造成自由绘制圆形
《Fabric.js 3个api设置画布宽高》	宽高设置并不是在初始化是才能进行的，本文介绍3种方法设置画布宽高，让你的画布更容易适配不同的使用场景
《Fabric.js 更换图片的3种方法（包括更换分组内的图片，以及存在缓存的情况）》	如果你的项目需要动态更换画布上的图片，那我也给你总结了3中方法
《Fabric.js 摆正元素的4种方法（带过渡动画）》	一键摆正被你旋转过的元素
《Fabric.js 将本地图像上传到画布背景》	除了在初始化时设置画布背景外，我还做了本地上传背景的功能，让画布在运行时也能修改背景图
《在 Vue3中使用Fabric.js实现渐变(Gradient)效果，包括径向渐变radial》	官方入门教程也只有线性渐变，以至于某些文章说 Fabric.js 只支持线性渐变。但其实径向渐变也完全支持
《Fabric.js 从入门到目中无人》	Fabric.js 入门指南，学完能应付简单业务
《Fabric.js 右键菜单》	Fabric.js 暂时还没右键事件，如果你想实现右键菜单的功能，可直接复制该文章的代码~

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