TextBox宽度动态调整fabric js

Question

我想根据用户输入的最长行动态修改文本框宽度。我初始化 canvas 的 width = width 但是一旦用户退出编辑，宽度必须缩短到用户在 textBox 中写入的文本中最长行的宽度。

obj.on(("editing:exited"),function()  {
    can.setActiveObject(textBox);
    var largest = Math.max.apply(Math, can.getActiveObject().__lineWidths); 
    can.getActiveObject().set("width",largest);

})

问题是每次我退出编辑时，宽度都会减小，顶线会移到下面。我只是不明白发生了什么。请尽早提供帮助。提前致谢。也请上传一个demo，让我看看你代码的效果。

更新 1：如果我更改行

    can.getActiveObject().set("width",largest);

到

    can.getActiveObject().set("width",(largest + 1));

效果如愿。我不知道为什么会这样。

Answer 1

我自己通过一些编码找到了这个问题的答案。

https://jsfiddle.net/xpntggdo/8/

对于所有可能面临类似问题的人，这里是 fiddle 和代码。

textBox.on(("changed"),function(){
       var actualWidth = textBox.scaleX * textBox.width;
        var largest = canvas.getActiveObject().__lineWidths[0];
        var tryWidth = (largest + 15) * textBox.scaleX;
        canvas.getActiveObject().set("width",tryWidth);
        if((textBox.left + actualWidth) >= canvas.width - 10)
         {
             textBox.set("width", canvas.width - left - 10)
        }
            canvas.renderAll();

    });

    textBox.on(("modified"),function(){
      left = textBox.left;
      canvas.renderAll();

    });

TextBox宽度动态调整fabric js

TextBox width dynamic adjustment fabric js

html5-canvas

fabricjs