关于前端:Fabricjs-文本自动换行的实现方式

本文简介

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

在 fabric.js 提供的文本组件中，默认状态是不会主动换行。如果你的应用场景中须要主动文本主动换行，能够应用 Textbox，并将 splitByGrapheme 设置为 true 即可。

文本主动换行

如果须要实现本文主动换行的成果，能够应用 Textbox。

我倡议是在初始化时设置好 Textbox 的宽度，而后再将 splitByGrapheme 设置为 true。

举荐操作

<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas>

<script>
  // 创立画布
  let canvas = new fabric.Canvas('canvasBox')

  let textbox = new fabric.Textbox('雷猴',{
    width: 200,
    left: 20,
    top: 20,
    splitByGrapheme: true, // 主动换行
  })

  // 将文本增加到画布中
  canvas.add(textbox)
</script>

设置好宽度之后，输出文字时就能够依据宽度主动换行。

除了在初始化设置 splitByGrapheme 外，还能够拎进去设置。

// 省略局部代码
let textbox = new fabric.Textbox('雷猴', {...})
textbox.splitByGrapheme = true

没设置宽度的状况

如果没设置宽度，渲染时就会以 1 个字的宽度为准。

// 省略局部代码
let textbox = new fabric.Textbox('雷猴',{
  left: 20,
  top: 20,
  splitByGrapheme: true, // 主动换行
})

在运行时调整

除了初始化 Textbox 时设置宽度外，还能够在运行时让用户调整文本框的宽度，只有 splitByGrapheme 为 true 时，Textbox 里的文本就会实时依据宽度进行换行。

禁止用户调整文本框高度

理解过 fabric.js 的工友都晓得，fabric.js 默认是容许用户缩放元素的。

如果 Textbox 元素的在页面上被用户垂直拉伸，外面的文本就会变形。

此时咱们能够应用 setControlVisible 办法删除垂直缩放的操作点，禁止用户垂直缩放。

// 省略局部代码
textbox.setControlVisible('mt', false)
textbox.setControlVisible('mb', false)

setControlVisible 第一个参数是操作点（控件）的键，别离有 tl, tr, br, bl, ml, mt, mr, mb, mtr

mt 示意两头顶部的操作点，mb 示意两头底部的操作点。

第二个参数设置控件是否可见。true 是默认值，示意可见；设置成 false 代表指定控件不可见。

默认状况

最初回顾一下 Textbox 的默认状况。

在没将 splitByGrapheme 设置为 true 时，横向拉长文本框时，外面的文字不会变形。

但文本框的最小宽度取决于外面最长一行的文本宽度。

代码仓库

⭐文本主动换行

举荐浏览

⭐《Fabric.js 从入门到收缩》

👍《Fabric.js 激活输入框》

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

👍《Fabric.js 缩放画布》

👍《Fabric.js 锁定背景图，不受缩放和拖拽的影响》

⭐《Fabric.js 自定义右键菜单》

点赞 + 关注 + 珍藏 = 学会了
代码仓库