2017-04-06 65 views
0

我对自定义字体的fabircjs IText框尺寸有问题。Fabric js自定义字体的Itext框尺寸问题

  • Goldsaber
  • 偷听厂

当我选择上面一个提到字体的文本框的大小是更大然后默认文本“Vloz文本”(那里的文字到底是空间和盒子边框),但是对于一些标准字体,例如“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中设置自定义字体。

+0

我删除了iText标签。请检查iText标签的描述。您会注意到iText®与您所使用的完全不同。 (iText是一个注册商标;第三方真的不应该使用它,为了避免混淆,他们应该重命名他们使用的名称iText。) –

+0

是的,我看到了。我试图找到fabricjs相关的Itext标签,但似乎没有。所以我会保持原样。谢谢。 –

回答