diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js index 35f404c7..90adc70c 100644 --- a/src/shapes/itext.class.js +++ b/src/shapes/itext.class.js @@ -340,6 +340,26 @@ charIndex: linesBeforeCursor[linesBeforeCursor.length - 1].length }; }, + + /** + * Returns complete style of char at the current cursor + * @param {Number} lineIndex Line index + * @param {Number} charIndex Char index + * @return {Object} Character style + */ + getCurrentCharStyle: function(lineIndex, charIndex) { + var style = this.styles[lineIndex] && this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)]; + + return { + fontSize : style && style.fontSize || this.fontSize, + fill : style && style.fill || this.fill, + textBackgroundColor : style && style.textBackgroundColor || this.textBackgroundColor, + textDecoration : style && style.textDecoration || this.textDecoration, + fontFamily : style && style.fontFamily || this.fontFamily, + stroke : style && style.stroke || this.stroke, + strokeWidth : style && style.strokeWidth || this.strokeWidth + }; + }, /** * Returns fontSize of char at the current cursor @@ -582,14 +602,26 @@ lineWidth = this._getWidthOfLine(ctx, lineIndex, textLines), lineHeight = this._getHeightOfLine(ctx, lineIndex, textLines), lineLeftOffset = this._getLineLeftOffset(lineWidth), - chars = line.split(''); + chars = line.split(''), + prevStyle = null, + renderChars = ''; left += lineLeftOffset || 0; ctx.save(); - for (var i = 0, len = chars.length; i < len; i++) { - this._renderChar(method, ctx, lineIndex, i, chars[i], left, top, lineHeight); + + for (var i = 0, len = chars.length; i <= len; i++) { + prevStyle = prevStyle || this.getCurrentCharStyle(lineIndex, i); + var thisStyle = this.getCurrentCharStyle(lineIndex, i+1); + + if (this._hasStyleChanged(prevStyle, thisStyle) || i == len) { + this._renderChar(method, ctx, lineIndex, i-1, renderChars, left, top, lineHeight); + renderChars = ''; + prevStyle = thisStyle; + } + renderChars += chars[i]; } + ctx.restore(); }, @@ -651,6 +683,22 @@ ctx.translate(ctx.measureText(_char).width, 0); } }, + + /** + * @private + * @param {Object} prevStyle + * @param {Object} thisStyle + */ + _hasStyleChanged: function(prevStyle, thisStyle) { + return (prevStyle.fill !== thisStyle.fill || + prevStyle.fontSize !== thisStyle.fontSize || + prevStyle.textBackgroundColor !== thisStyle.textBackgroundColor || + prevStyle.textDecoration !== thisStyle.textDecoration || + prevStyle.fontFamily !== thisStyle.fontFamily || + prevStyle.stroke !== thisStyle.stroke || + prevStyle.strokeWidth !== thisStyle.strokeWidth + ); + }, /** * @private