具有动态 fontsIze 的 FabricJS 固定大小文本框（缩小文本以适应大小）

Question

如果 TextBox 的文本变大，如何修复 TextBox 的大小并动态减小 fontSize？是的，存在类似的问题但它只适用于一行文本。

我想完全做到这一点：（示例来自 imgflip meme editor）

我试过以下方法：

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会根据文本框的宽度或高度变化的比例减小。但这有时会导致文本变得非常小，因为文本不会尽可能好地换行。 fontSize 和 wrapping 需要以某种方式找到最佳值。有任何想法吗？谢谢！

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

这可能效率低下，但它适用于我的用例。

具有动态 fontsIze 的 FabricJS 固定大小文本框（缩小文本以适应大小）

FabricJS fixed size TextBox with dynamic fontsIze (shrink text to fit size)

javascript

fabricjs

typescript