TextBox寬度動態調整結構js

Question

我想根據用戶輸入的最長行動態地修改爲文本框寬度。我初始化了我的畫布的寬度=寬度，但是一旦用戶退出編輯，寬度必須縮短爲寫入文本框的用戶文本中最長行的寬度。

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

    });