Fabricjs Fixed TextBox

Question

入力時にサイズがオーバーフローするのを防ぐために、テキストボックスのサイズを固定するにはどうしたらいいですか？

var canvas = window._canvas = new fabric.Canvas('c'); 

var text = new fabric.Textbox('MyText', { 
    width: 300, 
    height: 300, 
    top: 5, 
    left: 5, 
    hasControls: false, 
    fontSize: 30, 
    fixedWidth: 300, 
    fixedFontSize: 30 
}); 
canvas.add(text); 

http://jsfiddle.net/643qazk0/2/

Answer 1

あなたはinsertCharsメソッドをオーバーライドして、テキストのオーバーフローをチェックすることができます。

以下のスニペットを参照してください。ファブリック1.7.20

でテスト

// Create canvas 
 
const canvas = new fabric.Canvas(document.querySelector('canvas')); 
 

 
// Define `LimitedTextbox` class which extends `Textbox` 
 
const LimitedTextbox = fabric.util.createClass(fabric.Textbox, { 
 

 
    // Override `insertChars` method 
 
    insertChars: function(chars) { 
 

 
    if (this.maxWidth) { 
 
     const textWidthUnderCursor = this._getLineWidth(this.ctx, this.get2DCursorLocation().lineIndex); 
 
     if (textWidthUnderCursor + this.ctx.measureText(chars).width > this.maxWidth) { 
 
     chars = '\n' + chars; 
 
     } 
 
    } 
 

 
    if (this.maxLines) { 
 
     const newLinesLength = this._wrapText(this.ctx, this.text + chars).length; 
 
     if (newLinesLength > this.maxLines) { 
 
     return; 
 
     } 
 
    } 
 

 
    // Call parent class method 
 
    this.callSuper('insertChars', chars); 
 
    } 
 

 
}); 
 

 
// Create limited text box with max width 300px and max 2 lines 
 
canvas.add(
 
    new LimitedTextbox('text', { 
 
    top: 10, 
 
    left: 10, 
 
    width: 300, 
 
    maxWidth: 300, 
 
    maxLines: 2 
 
    }) 
 
); 
 

 
canvas.renderAll();

.canvas-container { 
 
    border: 1px solid gray; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script> 
 

 
<canvas width="600" height="300"></canvas>