Fabric.js 2.0 breakwords
My implementation of the breakWords textbox functionality from version 1 of fabric
by Kris
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>
JavaScript
var _wrapLine = function(_line, lineIndex, desiredWidth, reservedSpace) {
var lineWidth = 0;
var graphemeLines = [];
var line = [];
var words = _line.split(this._reSpaceAndTab);
var word = '';
var offset = 0;
var infix = ' ';
var wordWidth = 0;
var infixWidth = 0;
var largestWordWidth = 0;
var lineJustStarted = true;
var additionalSpace = this._getWidthOfCharSpacing();
reservedSpace = reservedSpace || 0;
desiredWidth -= reservedSpace;
this.wordsBroke = false;
var i = 0;
var wordLength = words.length;
for (; i < wordLength; i++) {
word = fabric.util.string.graphemeSplit(words[i]);
wordWidth = this._measureWord(word, lineIndex, offset);
offset += word.length;
if (this.breakWords && wordWidth >= desiredWidth) {
if (!lineJustStarted) line.push(infix);
var e = 0;
var len = word.length;
for (; e < len; e++) {
var letter = word[e];
var letterWidth = this.getMeasuringContext().measureText(letter).width * this.fontSize / this.CACHE_FONT_SIZE;
if (lineWidth + letterWidth > desiredWidth) {
this.wordsBroke = true;
graphemeLines.push(line);
line = [];
lineWidth = 0;
}
line.push(letter);
offset++;
lineWidth += letterWidth;
}
word = [];
} else {
lineWidth += infixWidth + wordWidth - additionalSpace;
}
if (lineWidth >= desiredWidth && !lineJustStarted) {
graphemeLines.push(line);
line = [];
lineWidth = wordWidth;
lineJustStarted = true;
} else {
lineWidth += additionalSpace;
}
if (!lineJustStarted) {
line.push(infix);
}
line = line.concat(word);
infixWidth =...