亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

FabricJS 固定大小文本框與動態字體大?。s小文本以適合大?。?/h1>

FabricJS 固定大小文本框與動態字體大?。s小文本以適合大?。?/h1>
倚天杖 2022-08-18 16:24:23
如何修復文本框的大小并動態減小字體大小,如果文本變大,文本框?是的,這里存在類似的問題,但它僅適用于一行文本。我想實現這個目標:(來自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);這樣,字體大小將按文本框的寬度或高度更改的比率減小。但這有時會導致文本變得非常小,因為文本不會盡可能很好地換行。字體大小和換行需要以某種方式找到最佳效果。有什么想法嗎?謝謝!
查看完整描述

1 回答

?
墨色風雨

TA貢獻1853條經驗 獲得超6個贊

我實際上找到了一個解決方案。以防有人遇到同樣的問題。


調整寬度的字體大小與我的原始代碼配合得很好:


if (text.width > box.width) {

    text.fontSize *= box.width / (text.width + 1);

    text.width = box.width;

}

這只會調整真正長的單詞的字體大小,因為文本框會自動換行文本。但是這種包裝會導致高度在我的原始代碼中縮小太多。為了考慮換行,我最終逐漸減小了字體大小,并通過每次調用來重新計算文本換行:canvas.renderAll()


while (text.height > box.height && text.fontSize > 12) {

    text.fontSize--;

    canvas.renderAll();

}

這可能效率低下,但它服務于我的用例。


查看完整回答
反對 回復 2022-08-18
  • 1 回答
  • 0 關注
  • 736 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號