在Fabric.js中，可以通過 Text 或 IText；創建文字，但是文本是無法換行
Fabric.js 提供了 Textbox 類，繼承自 IText；
Textbox 類允許用戶調整文本矩形的大小并自動換行，文本框的Y比例已鎖定，用戶只能更改寬度，高度將根據線的環繞自動調整，
代碼
- 設定 splitByGrapheme
- 設定 width
- 設定 lockScalingY
let text = new fabric.Textbox(work, {
stroke: "red",
fill: "blue",
width: 100,
top: 0,
left: 0,
fontSize: 18,
lineHeight: 1,
fontWeight: "bold",
textAlign: "left", // 文字對齊
lockRotation: true, // 禁止旋轉
lockScalingY: true, // 禁止Y軸伸縮
lockScalingFlip: true, // 禁止負值反轉
splitByGrapheme: true, // 拆分中文，可以實作自動換行
objectCaching: false,
});效果
控制 mr 的 control 可以動態對文本進行換行，
Q：
但是，當Textbox選中（selected）一次后，再次選中修改寬度時，問題就來了，
修改寬度文本沒有自動換行，而是文本被拉長或壓縮了，
對比前后兩次的target屬性，發現再次修改時，target的屬性出現了scaleX、controls等屬性，以至于后面寬度變化不會自動換行，而是文字伸縮，
解決：
監聽 textbox 的 scaling 事件，修改 textbox 的 scaleX 和 width 屬性
text.on("scaling", (ev)=>{
let target = ev.transform.target
let width = target.get("width") * target.get("scaleX")
target.set("width", width)
target.set("scaleX", 1)
})轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/304997.html
標籤：區塊鏈