FabricJS 固定大小文本框与动态字体大小（缩小文本以适合大小）

Question

如何修复文本框的大小并动态减小字体大小，如果文本变大，文本框？是的，这里存在类似的问题，但它仅适用于一行文本。

我想实现这个目标：（来自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);

这样，字体大小将按文本框的宽度或高度更改的比率减小。但这有时会导致文本变得非常小，因为文本不会尽可能很好地换行。字体大小和换行需要以某种方式找到最佳效果。有什么想法吗？谢谢！

Answer 1

我实际上找到了一个解决方案。以防有人遇到同样的问题。调整宽度的字体大小与我的原始代码配合得很好：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();}这可能效率低下，但它服务于我的用例。