diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js index 3de05f54..b7c0ceb7 100644 --- a/src/shapes/itext.class.js +++ b/src/shapes/itext.class.js @@ -1008,7 +1008,7 @@ return this.__widthOfSpace[lineIndex]; } var line = this._textLines[lineIndex], - wordsWidth = this._getWidthOfWords(ctx, line, lineIndex), + wordsWidth = this._getWidthOfWords(ctx, line, lineIndex, 0), widthDiff = this.width - wordsWidth, numSpaces = line.length - line.replace(this._reSpacesAndTabs, '').length, width = widthDiff / numSpaces; @@ -1022,14 +1022,14 @@ * @param {Number} line * @param {Number} lineIndex */ - _getWidthOfWords: function (ctx, line, lineIndex) { + _getWidthOfWords: function (ctx, line, lineIndex, charOffset) { var width = 0; for (var charIndex = 0; charIndex < line.length; charIndex++) { var _char = line[charIndex]; if (!_char.match(/\s/)) { - width += this._getWidthOfChar(ctx, _char, lineIndex, charIndex); + width += this._getWidthOfChar(ctx, _char, lineIndex, charIndex + charOffset); } } diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index fd9fc500..3a11db98 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -479,11 +479,12 @@ // stretch the line var words = line.split(/\s+/), - wordsWidth = this._getWidthOfWords(ctx, line, lineIndex), + charOffset = 0, + wordsWidth = this._getWidthOfWords(ctx, line, lineIndex, 0), widthDiff = this.width - wordsWidth, numSpaces = words.length - 1, spaceWidth = numSpaces > 0 ? widthDiff / numSpaces : 0, - leftOffset = 0, charOffset = 0, word; + leftOffset = 0, word; for (var i = 0, len = words.length; i < len; i++) { while (line[charOffset] === ' ' && charOffset < line.length) { @@ -491,7 +492,7 @@ } word = words[i]; this._renderChars(method, ctx, word, left + leftOffset, top, lineIndex, charOffset); - leftOffset += ctx.measureText(word).width + spaceWidth; + leftOffset += this._getWidthOfWords(ctx, word, lineIndex, charOffset) + spaceWidth; charOffset += word.length; } }, @@ -640,7 +641,7 @@ ctx.fillStyle = this.textBackgroundColor; for (var i = 0, len = this._textLines.length; i < len; i++) { if (this._textLines[i] !== '') { - lineWidth = this._getLineWidth(ctx, i); + lineWidth = this.textAlign === 'justify' ? this.width : this._getLineWidth(ctx, i); lineLeftOffset = this._getLineLeftOffset(lineWidth); ctx.fillRect( this._getLeftOffset() + lineLeftOffset, @@ -709,7 +710,7 @@ width = 0; } else if (this.textAlign === 'justify' && this._cacheLinesWidth) { - wordCount = line.split(' '); + wordCount = line.split(/\s+/); //consider not justify last line, not for now. if (wordCount.length > 1) { width = this.width; @@ -889,9 +890,9 @@ (this.fontStyle ? 'font-style="' + this.fontStyle + '" ': ''), (this.fontWeight ? 'font-weight="' + this.fontWeight + '" ': ''), (this.textDecoration ? 'text-decoration="' + this.textDecoration + '" ': ''), - 'style="', this.getSvgStyles(), '" >', + 'style="', this.getSvgStyles(), '" >\n', textAndBg.textSpans.join(''), - '\n', + '\t\t\n', '\t\n' ); }, @@ -927,8 +928,13 @@ _setSVGTextLineText: function(i, textSpans, height, textLeftOffset, textTopOffset) { var yPos = this.fontSize * (this._fontSizeMult - this._fontSizeFraction) - textTopOffset + height - this.height / 2; + if (this.textAlign === 'justify') { + // i call from here to do not intefere with IText + this._setSVGTextLineJustifed(i, textSpans, yPos, textLeftOffset); + return; + } textSpans.push( - ' elements since setting opacity + // on containing one doesn't work in Illustrator + attributes, '>', + fabric.util.string.escapeXml(word), + '\n' + ); + textLeftOffset += this._getWidthOfWords(ctx, word) + spaceWidth; + } + + }, + _setSVGTextLineBg: function(textBgRects, i, textLeftOffset, textTopOffset, height) { textBgRects.push( '\t\t