【问题标题】:Fabric js Itext box sizing issue with custom fonts自定义字体的Fabric js Itext框大小问题
【发布时间】: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 标签,但似乎没有。所以我会照原样离开。谢谢。

标签: fonts size fabricjs


【解决方案1】:

看看这个https://github.com/kangax/fabric.js/issues/3588。如果我理解正确 - 这是同样的问题

【讨论】:

  • 是的,同样的问题。谢谢,我去看看。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-12-17
  • 2016-08-15
  • 1970-01-01
  • 2020-10-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多