FabricJS固定大小的TextBox，具有动态的fonttsIze（缩小文本以适应大小）。

Question

如何固定TextBox的大小，并在文本对TextBox来说过大时动态减小字体大小？是的，类似的问题也存在 此处 但它只适用于一行文字。

我想实现的正是这一点。(例子来自 imgflip meme编辑器)

我尝试了以下方法。

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);

这样一来，字体大小就会随着文本框的宽度或高度的变化而减小。但这导致文字有时会变得非常小，因为文字不会得到很好的包装。fontSize和包装需要找到一个最佳的方法。有什么好办法吗？有什么办法吗？

Answer 1

实际上，我找到了一个解决方案。以防有人有同样的问题。

调整宽度的字体大小，在我的原始代码中效果很好。

if (text.width > box.width) {
    text.fontSize *= box.width / (text.width + 1);
    text.width = box.width;
}

只有在很长的文字中才会调整字体大小 因为Textbox会自动包裹文字。但是这种包装会导致我的原代码高度缩水太多。为了考虑到包裹的问题，我最终逐渐减小字体大小，并通过调用 canvas.renderAll() 每次都是这样。

while (text.height > box.height && text.fontSize > 12) {
    text.fontSize--;
    canvas.renderAll();
}

这可能是低效率的，但它满足了我的使用情况。