From f15b7f5d3c1aafb9afc28927c5872d0e705cefe6 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 25 Feb 2016 02:46:05 +0100 Subject: [PATCH 1/3] Update text.class.js --- src/shapes/text.class.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/shapes/text.class.js b/src/shapes/text.class.js index fb448ccd794..e4e2d9683b6 100644 --- a/src/shapes/text.class.js +++ b/src/shapes/text.class.js @@ -624,7 +624,9 @@ this.width, this.height ); - + // if there is background color no other shadows + // should be casted + this._removeShadow(ctx); }, /** @@ -635,11 +637,12 @@ if (!this.textBackgroundColor) { return; } - var lineTopOffset = 0, heightOfLine = this._getHeightOfLine(), + var lineTopOffset = 0, heightOfLine, lineWidth, lineLeftOffset; ctx.fillStyle = this.textBackgroundColor; for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this._getHeightOfLine(ctx, i); if (this._textLines[i] !== '') { lineWidth = this.textAlign === 'justify' ? this.width : this._getLineWidth(ctx, i); lineLeftOffset = this._getLineLeftOffset(lineWidth); @@ -647,11 +650,14 @@ this._getLeftOffset() + lineLeftOffset, this._getTopOffset() + lineTopOffset, lineWidth, - this.fontSize * this._fontSizeMult + heightOfLine / this.lineHeight ); } lineTopOffset += heightOfLine; } + // if there is text background color no + // other shadows should be casted + this._removeShadow(ctx); }, /** From 2f19e25ef28f49b66b521049d3d44a45e5a715f1 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 25 Feb 2016 02:48:20 +0100 Subject: [PATCH 2/3] Update itext.class.js --- src/shapes/itext.class.js | 85 +++++++++++---------------------------- 1 file changed, 23 insertions(+), 62 deletions(-) diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js index b7c0ceb75d0..583f8281a12 100644 --- a/src/shapes/itext.class.js +++ b/src/shapes/itext.class.js @@ -743,60 +743,43 @@ * @param {CanvasRenderingContext2D} ctx Context to render on */ _renderTextLinesBackground: function(ctx) { - if (!this.textBackgroundColor && !this.styles) { - return; - } - - ctx.save(); + this.callSuper('_renderTextLinesBackground', ctx); - if (this.textBackgroundColor) { - ctx.fillStyle = this.textBackgroundColor; - } - - var lineHeights = 0; + var lineTopOffset = 0, heightOfLine, + lineWidth, lineLeftOffset, + leftOffset = this._getLeftOffset(), + topOffset = this._getTopOffset(), + line, _char, style; for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this._getHeightOfLine(ctx, i); + line = this._textLines[i]; - var heightOfLine = this._getHeightOfLine(ctx, i); - if (this._textLines[i] === '') { - lineHeights += heightOfLine; + if (line === '' || !this.styles || !this._getLineStyle(i)) { + lineTopOffset += heightOfLine; continue; } - var lineWidth = this._getLineWidth(ctx, i), - lineLeftOffset = this._getLineLeftOffset(lineWidth); + lineWidth = this._getLineWidth(ctx, i); + lineLeftOffset = this._getLineLeftOffset(lineWidth); + + for (var j = 0, jlen = line.length; j < jlen; j++) { + style = this._getStyleDeclaration(i, j); + if (!style || !style.textBackgroundColor) { + continue; + } + _char = line[j]; - if (this.textBackgroundColor) { - ctx.fillStyle = this.textBackgroundColor; + ctx.fillStyle = style.textBackgroundColor; ctx.fillRect( - this._getLeftOffset() + lineLeftOffset, - this._getTopOffset() + lineHeights, - lineWidth, + leftOffset + lineLeftOffset + this._getWidthOfCharsAt(ctx, i, j), + topOffset + lineTopOffset, + this._getWidthOfChar(ctx, _char, i, j) + 1, heightOfLine / this.lineHeight ); } - if (this._getLineStyle(i)) { - for (var j = 0, jlen = this._textLines[i].length; j < jlen; j++) { - var style = this._getStyleDeclaration(i, j); - if (style && style.textBackgroundColor) { - - var _char = this._textLines[i][j]; - - ctx.fillStyle = style.textBackgroundColor; - - ctx.fillRect( - this._getLeftOffset() + lineLeftOffset + this._getWidthOfCharsAt(ctx, i, j), - this._getTopOffset() + lineHeights, - this._getWidthOfChar(ctx, _char, i, j) + 1, - heightOfLine / this.lineHeight - ); - } - } - } - lineHeights += heightOfLine; } - ctx.restore(); }, /** @@ -1070,28 +1053,6 @@ return height; }, - /** - * This method is overwritten to account for different top offset - * @private - */ - _renderTextBoxBackground: function(ctx) { - if (!this.backgroundColor) { - return; - } - - ctx.save(); - ctx.fillStyle = this.backgroundColor; - - ctx.fillRect( - this._getLeftOffset(), - this._getTopOffset(), - this.width, - this.height - ); - - ctx.restore(); - }, - /** * Returns object representation of an instance * @method toObject From 9c41f0923d7fd68538232b3b8c855d6ee43f318b Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 25 Feb 2016 02:59:04 +0100 Subject: [PATCH 3/3] Update itext.class.js --- src/shapes/itext.class.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js index 583f8281a12..b5edd508d11 100644 --- a/src/shapes/itext.class.js +++ b/src/shapes/itext.class.js @@ -657,6 +657,9 @@ charWidth = this._applyCharStylesGetWidth(ctx, _char, lineIndex, i, decl || {}); textDecoration = textDecoration || this.textDecoration; + if (decl && decl.textBackgroundColor) { + this._removeShadow(ctx); + } shouldFill && ctx.fillText(_char, left, top); shouldStroke && ctx.strokeText(_char, left, top);