本文简介
点赞 + 关注 + 珍藏 = 学会了
在 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 自定义右键菜单》
点赞 + 关注 + 珍藏 = 学会了
代码仓库