小编San*_*ogo的帖子

FabricJS 固定大小的 TextBox 与动态 fontIze (缩小文本以适合大小)

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

我想完全实现这一点:(来自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);
Run Code Online (Sandbox Code Playgroud)

这样,fontSize 将按照文本框的宽度或高度变化的比例减小。但这有时会导致文本变得非常小,因为文本无法很好地换行。字体大小和换行需要以某种方式找到最佳值。有任何想法吗?谢谢!

javascript fabricjs typescript

3
推荐指数
1
解决办法
2679
查看次数

标签 统计

fabricjs ×1

javascript ×1

typescript ×1