乐趣区

关于前端:Fabricjs-手动加粗文本iText

jiezi

本文简介

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

本文介绍 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 临时还没右键事件，如果你想实现右键菜单的性能，可间接复制该文章的代码~

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

退出移动版