Fabric.jsのテキストボックスは長い単語をラップしません

Question

TextboxをFabric.jsとしています。私は一定の幅を与えました。しかし、ユーザーがテキストボックスの幅を超えるスペースを使わずに長い単語を入力すると、折り返されません。

Answer 1

はい、ありあなたが好きなことや単語分割を実装していない解決策：

オーバーライド改行のための生地のデフォルト機能：

fabric.Textbox.prototype._wrapLine = function(ctx, text, lineIndex) { 
var lineWidth  = 0, 
    lines   = [], 
    line    = '', 
    words   = text.split(' '), 
    word    = '', 
    letter   = '', 
    offset   = 0, 
    infix   = ' ', 
    wordWidth  = 0, 
    infixWidth  = 0, 
    letterWidth  = 0, 
    largestWordWidth = 0; 

for (var i = 0; i < words.length; i++) { 
    word = words[i]; 
    wordWidth = this._measureText(ctx, word, lineIndex, offset); 
    lineWidth += infixWidth; 

    // Break Words if wordWidth is greater than textbox width 
    if (this.breakWords && wordWidth > this.width) { 
     line += infix; 
     var wordLetters = word.split(''); 
     while (wordLetters.length) { 
      letterWidth = this._getWidthOfChar(ctx, wordLetters[0], lineIndex, offset); 
      if (lineWidth + letterWidth > this.width) { 
       lines.push(line); 
       line = ''; 
       lineWidth = 0; 
      } 
      line += wordLetters.shift(); 
      offset++; 
      lineWidth += letterWidth; 
     } 
     word = ''; 
    } else { 
     lineWidth += wordWidth; 
    } 

    if (lineWidth >= this.width && line !== '') { 
     lines.push(line); 
     line = ''; 
     lineWidth = wordWidth; 
    } 

    if (line !== '' || i === 1) { 
     line += infix; 
    } 
    line += word; 
    offset += word.length; 
    infixWidth = this._measureText(ctx, infix, lineIndex, offset); 
    offset++; 

    // keep track of largest word 
    if (wordWidth > largestWordWidth && !this.breakWords) { 
     largestWordWidth = wordWidth; 
    } 
} 

i && lines.push(line); 

if (largestWordWidth > this.dynamicMinWidth) { 
     this.dynamicMinWidth = largestWordWidth; 
    } 

    return lines; 
}; 

使用法：あなたがいる

var breakingTextbox = new fabric.Textbox(longText, { 
     width: 200, 
     breakWords: true 
});