From 41a3aa8a4ce76f84d031e8fd75458d5887e6bd73 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 8 Dec 2015 11:52:07 +0100 Subject: [PATCH 1/6] Update text.class.js --- src/shapes/text.class.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index fd9fc500..965656bd 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -926,7 +926,8 @@ _setSVGTextLineText: function(i, textSpans, height, textLeftOffset, textTopOffset) { var yPos = this.fontSize * (this._fontSizeMult - this._fontSizeFraction) - - textTopOffset + height - this.height / 2; + - textTopOffset + height - this.height / 2, + textLine = this.textAlign === 'justify' ? this._setSVGTextLineWords(i) : fabric.util.string.escapeXml(._textLines[i]); textSpans.push( ' elements since setting opacity // on containing one doesn't work in Illustrator this._getFillAttributes(this.fill), '>', - fabric.util.string.escapeXml(this._textLines[i]), + textLine, '' ); }, From 61daf814701da31f2f5fe78d920878dfbd1ba683 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Tue, 8 Dec 2015 19:53:44 +0100 Subject: [PATCH 2/6] Update text.class.js --- src/shapes/text.class.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index 965656bd..66666676 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -926,8 +926,12 @@ _setSVGTextLineText: function(i, textSpans, height, textLeftOffset, textTopOffset) { var yPos = this.fontSize * (this._fontSizeMult - this._fontSizeFraction) - - textTopOffset + height - this.height / 2, - textLine = this.textAlign === 'justify' ? this._setSVGTextLineWords(i) : fabric.util.string.escapeXml(._textLines[i]); + - textTopOffset + height - this.height / 2; + if (this.textAlign === 'justify') { + // i call from here to do not intefere with IText + this.setSVGTextLineJustifed(i, textSpans, height, textLeftOffset, textTopOffset); + return; + } textSpans.push( ' elements since setting opacity // on containing one doesn't work in Illustrator this._getFillAttributes(this.fill), '>', - textLine, + fabric.util.string.escapeXml(this._textLines[i]), '' ); }, + setSVGTextLineJustifed: function(i, textSpans, height, textLeftOffset, textTopOffset) { + textSpans.push('justified'); + }, + _setSVGTextLineBg: function(textBgRects, i, textLeftOffset, textTopOffset, height) { textBgRects.push( '\t\t Date: Wed, 9 Dec 2015 09:41:37 +0100 Subject: [PATCH 3/6] Update text.class.js --- src/shapes/text.class.js | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index 66666676..a84b84c8 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; } }, @@ -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' ); }, @@ -929,11 +930,11 @@ - textTopOffset + height - this.height / 2; if (this.textAlign === 'justify') { // i call from here to do not intefere with IText - this.setSVGTextLineJustifed(i, textSpans, height, textLeftOffset, textTopOffset); + this._setSVGTextLineJustifed(i, textSpans, height, textLeftOffset, textTopOffset); 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) { From f63cd9862f4d43a7aaef374ac017f8929aef6aa4 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 10 Dec 2015 09:36:24 +0100 Subject: [PATCH 6/6] Update text.js --- test/unit/text.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/test/unit/text.js b/test/unit/text.js index c62e3ce8..b21746db 100644 --- a/test/unit/text.js +++ b/test/unit/text.js @@ -49,7 +49,8 @@ 'transformMatrix': null }; - var TEXT_SVG = '\t\n\t\tx\n\t\n'; + var TEXT_SVG = '\t\n\t\t\n\t\t\tx\n\t\t\n\t\n'; + var TEXT_SVG_JUSTIFIED = '\t\n\t\t\n\t\t\tx\n\t\t\ty\n\t\t\n\t\n'; test('constructor', function() { ok(fabric.Text); @@ -261,5 +262,17 @@ equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG.replace('font-family="Times New Roman"', 'font-family="\'Arial Black\', Arial"'))); }); + test('toSVG justified', function() { + var text = new fabric.Text('x y'); + + function removeTranslate(str) { + return str.replace(/translate\(.*?\)/, ''); + } + + // temp workaround for text objects not obtaining width under node + text.width = 100; + text.textAlign = 'justify' + equal(removeTranslate(text.toSVG()), removeTranslate(TEXT_SVG_JUSTIFIED)); + }); })();