fabric.js calcTextWidth()无法正常工作

时间:2019-01-10 21:25:41

标签: html5-canvas fabricjs

我看到上面的方法给出了错误的宽度。例如

var canvas = new fabric.Canvas('canvas',{
    backgroundColor: "#fff000",
    width: 1200,
    height: 600
});

var itext = new fabric.IText('Hello World', {
    left: 10,
    top: 140,
    fontSize: 172,
    fontFamily: 'Comic Sans MS',
    stroke: "#D81B60",
    fontStyle: 'italic',
    fontWeight: 'bold',
});

var rect = new fabric.Rect({
            left: 10,
            top: 150,
            width: itext.calcTextWidth()+4,// adjust for border
            height: 182,
            fill: 'rgba(0,0,0,0)',
            strokeWidth: 2,
            stroke: "#D81B60",
         });

canvas.add(rect);
canvas.add(itext);
canvas.renderAll();

产生enter image description here。如您所见,文本不应该放入框中。任何想法如何纠正它?对于某些字体,似乎只能使用斜体。我知道像ctx.measureText(txt).width这样的普通Canvas JS代码似乎也存在类似的问题,但不确定如何最好地在fabric.js中解决此问题。想法?

感谢汤姆

0 个答案:

没有答案
相关问题