如何修復(fù)文本框的大小并動態(tài)減小字體大小，如果文本變大，文本框？是的，這里存在類似的問題，但它僅適用于一行文本。我想實現(xiàn)這個目標(biāo)：（來自imgflip meme編輯器的示例)https://i.stack.imgur.com/SmaXL.gif 我嘗試了以下方法：let text = new fabric.Textbox(box.text, { top: box.top, left: box.left, width: box.width,});if (text.width > box.width) { text.fontSize *= box.width / (text.width + 1); text.width = box.width;}if (text.height > box.height) { text.fontSize *= box.height / (text.height + 1); text.height = box.height;}canvas.add(text);這樣，字體大小將按文本框的寬度或高度更改的比率減小。但這有時會導(dǎo)致文本變得非常小，因為文本不會盡可能很好地?fù)Q行。字體大小和換行需要以某種方式找到最佳效果。有什么想法嗎？謝謝！
1 回答
墨色風(fēng)雨
TA貢獻(xiàn)1853條經(jīng)驗 獲得超6個贊
我實際上找到了一個解決方案。以防有人遇到同樣的問題。
調(diào)整寬度的字體大小與我的原始代碼配合得很好：
if (text.width > box.width) {
text.fontSize *= box.width / (text.width + 1);
text.width = box.width;
}
這只會調(diào)整真正長的單詞的字體大小，因為文本框會自動換行文本。但是這種包裝會導(dǎo)致高度在我的原始代碼中縮小太多。為了考慮換行，我最終逐漸減小了字體大小，并通過每次調(diào)用來重新計算文本換行：canvas.renderAll()
while (text.height > box.height && text.fontSize > 12) {
text.fontSize--;
canvas.renderAll();
}
這可能效率低下，但它服務(wù)于我的用例。