【发布时间】:2017-09-01 09:49:19
【问题描述】:
我对自定义字体的 fabircjs IText 框大小有疑问。
- 金剑
- 蜈蚣厂
当我选择上述字体之一时,文本框大小大于默认文本“Vloz Text”(文本和框边框的末尾有空格),但对于某些标准字体,例如“Arial”文本英尺到文本框(没有提到空格)。同样在“Goldsaber”的情况下,文本框的大小会比文本本身越来越大(提到的空间越来越大)。 我希望它的行为方式与 Arial 相同。这意味着文本大小应始终以文本框为单位,文本的最后一个字符和文本框边框之间没有任何空格。
javascript:
var canvas = window._canvas = new fabric.Canvas('c');
addText("Vlož Text", "Arial", 50, 50);
addText("Vlož Tssssssssssssssssext", "Arial", 50, 250);
addText("Vlož Text", "Goldsaber", 100, 50);
addText("Vlož Tssssssssssssssssext", "Goldsaber", 100, 250);
addText("Vlož Text", "Earwig factory", 150, 50);
addText("Vlož Tssssssssssssssssext", "Earwig Factory", 150, 250);
function addText(text, font, top, left) {
var text = new fabric.IText(text, {
fontFamily: font,
fontSize: 25,
top: top,
left: left,
originY: 'top',
originX: 'left',
padding: 0,
lineHeight: 0.9,
transparentCorners: false
});
canvas.add(text);
}
html:
<canvas id="c" width="600" height="600"></canvas>
这里是 jsfiddle: https://jsfiddle.net/13zgk2fs/12/
要查看问题,请在本地安装上述字体。我在 jsfiddle 中设置自定义字体时遇到问题。
【问题讨论】:
-
我删除了 iText 标签。请检查 iText 标签的描述。您会注意到 iText® 与您使用的完全不同。 (iText 是注册商标;第三方确实不应该使用它。他们应该重命名他们使用 iText 名称的任何内容,以避免混淆。)
-
是的,我看到了。我试图找到与 fabricjs 相关的 Itext 标签,但似乎没有。所以我会照原样离开。谢谢。