TextBox幅の動的調整ファブリックjs

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 + 1)); 

にライン

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

を変更した場合は、必要に応じてそれが動作します。なぜこれが起こっているのか分かりません。

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

    });