网络日志

Fabric.js 手动加粗文本iText

本文简介

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

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

效果如图所示:

要实现2种操作

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

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

全文加粗

只需把 ITextfontWeight 属性设置成 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 暂时还没右键事件,如果你想实现右键菜单的功能,可直接复制该文章的代码~

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