TextBox宽度动态调整fabric js

debugcn 发表于 Dev

安吉特·乔希

我想根据用户输入的最长行动态修改文本框宽度。我初始化了画布的宽度 = 宽度，但是一旦用户退出编辑，宽度必须缩短到用户在 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));

它按需要工作。我不知道为什么会这样。

安吉特·乔希

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

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();

    });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。