Question

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

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

})

问题是，每次退出编辑时，宽度都会减小，顶行会向下移动。我只是无法理解发生了什么。请尽早帮忙。提前致谢。还请上传一个演示，以便我可以看到代码的效果。

更新1：如果我更改了行

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

到

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

它按预期工作。我不知道为什么会这样。

Answer 1

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

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

对于所有可能面临类似问题的人来说，这里是小提琴，这里是代码。

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宽度动态调整面料js

1 个答案: