本文简介

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

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

文本自动换行

如果需要实现本文自动换行的效果，可以使用 Textbox 。

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

推荐操作

01.gif

<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个字的宽度为准。

02.gif

// 省略部分代码
let textbox = new fabric.Textbox('雷猴',{