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

在 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 自定义右键菜单》
 
点赞 + 关注 + 收藏 = 学会了 代码仓库
                                        展开阅读全文 
                            我作为该项目的开发团队成员之一，在此说明: 1. 这个项目是完全由自己编写的，没有借助商业的帮助，没有他人冒充，也不存在父母帮我们编写后给我们挂名的问题。同时因为我们都是中学生，没有多少资金，也不可能进行"买广告"等不正当的商业行为; 2. 我们自己做的项目绝对没有博眼球，单纯就是想对Windows在网页上进行模仿和创新; 3. 我们的实力并不是那么差，我们开发团队成员曾获得C++二级全市第一、CSP-J国赛一等奖、蓝桥杯省赛一等奖等多个奖项，成员每人编程能力全国前4%-10%，并且我们人均精通前端和后端，就拿我来举例，我能熟练使用git命令行，从克隆仓库，提交、推送更改到拉取合并、暂存、设置远程、配置ssh密钥都烂熟于心，熟悉Linux系统，从查看当前目录下文件和文件夹到使用命令行手动安装驱动都熟悉，熟悉NodeJS，会下载、导入模块和程序编写与运行，精通HTML, CSS和JS，基本的东西都能灵活运用，并且熟悉Python, C, C++和汇编语言; 4. 我们项目链接在 https://github.com/tjy-gitnub/win12，现已经获得超1500颗Stars
                            本人原创作者，在此解释声明一二： 1. 我的父母还没有无耻到做这种无耻的事情，我也对我的能力有信心，目前也不需要这些偷鸡摸狗的见不得光的东西来造假，请各位不要以小人之心度君子之腹。 2. 我今年初三，项目是从初一开始做的，各位不相信的欢迎上github看提交记录，可以看一下初版和现在的区别，UI和js都有不小更改。 3. 团队组成：今年一位初三，一位初一，一位5+4制的初一。更新记录中明确记录了哪些功能是哪位所开发的。 4. 我在github上，bilibili上没有受到过任何一个人的质疑，我对中国的网络环境表示蔑视。 5. 本项目的初中只是为了兴趣，没有想到火了起来。 我不理解你们是如何通过代码读出作者年龄的？难道是语文考试要加入代码阅读赏析的题目了吗？真心觉得很厉害。 6. 不愿与某些人同流，也无众位深厚阅历经验，只望能得清白之名。感谢大家让我懂得了何乃人情世故，孰谓世态炎凉，世俗红尘。你们给我的人生上了重要的一课。人间哪有什么真善美啊，呵。社会的病胎罢了。
                            看了 wangEditor 的公告，如鲠在喉。去年七月，我在一篇《关于剔除 layedit 组件》的公告中，还推荐了几款 editor 组件用于替代，其中就包括了 wangEditor, 转眼之间，仿若时空交错，不免有些感慨。 在国内由个人发起的开源项目，似乎都很难跳出相同的宿命，不断有人走进这个赛道，但能抵达终点并完成突破的却屈指可数。Layui 曾经同样倒在了赛道，2021 年宣布关站之前，Layui 的百度指数还一度领先 Bootstrap, 如此一个拥有广泛用户群体的 UI 库，本该迎来新的突破，却在疾跑中戛然止步，至今令人迷惑。人们看到的，是一篇充满悲情色彩的公告，而公告的背后，是创作者在面对内外交织的困境中不得已做出的举措，当我们没有足够的力量冲破眼前的障碍，除了停下来避开它，还有别的更优选择么。你很难想象除此之外还有多少历史包袱… 譬如，也是由于种种原因，当初 Layui 在 Github 和 Gitee 待处理的 Issue 数量，不下于 2000，各种议题参次不齐，我差不多花了半年时间去逐一审阅，多少个日夜消耗，多少次自我情绪的对抗… 就不多提了。 尽管这两年来，Layui 的受众者已呈断崖式流失，但正因为小众，反而如释重负，甚至让我重新找回了一些开源的纯粹。 共勉 🙂