diff --git a/src/core/const.js b/src/core/const.js index 9af4c82..7caddaf 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -362,16 +362,7 @@ * @constant * @type {number} */ - SPRITE_MAX_TEXTURES: require('./utils/maxRecommendedTextures')(32), - - /** - * Name of the event that fires when a text style is changed. - * - * @static - * @constant - * @type {string} - */ - TEXT_STYLE_CHANGED: 'changed' + SPRITE_MAX_TEXTURES: require('./utils/maxRecommendedTextures')(32) }; module.exports = CONST; diff --git a/src/core/const.js b/src/core/const.js index 9af4c82..7caddaf 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -362,16 +362,7 @@ * @constant * @type {number} */ - SPRITE_MAX_TEXTURES: require('./utils/maxRecommendedTextures')(32), - - /** - * Name of the event that fires when a text style is changed. - * - * @static - * @constant - * @type {string} - */ - TEXT_STYLE_CHANGED: 'changed' + SPRITE_MAX_TEXTURES: require('./utils/maxRecommendedTextures')(32) }; module.exports = CONST; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 697405f..c714b25 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -20,9 +20,8 @@ * @memberof PIXI * @param text {string} The string that you would like the text to display * @param [style] {object|PIXI.TextStyle} The style parameters - * @param [resolution=1] {number} The current resolution / device pixel ratio of the canvas */ -function Text(text, style, resolution) +function Text(text, style) { /** * The canvas element that everything is drawn to @@ -38,11 +37,11 @@ this.context = this.canvas.getContext('2d'); /** - * The resolution / device pixel ratio of the canvas + * The resolution / device pixel ratio of the canvas. This is set automatically by the renderer. * @member {number} * @default 1 */ - this.resolution = resolution || CONST.RESOLUTION; + this.resolution = CONST.RESOLUTION; /** * Private tracker for the current text. @@ -82,6 +81,8 @@ this.text = text; this.style = style; + + this.localStyleID = -1; } // constructor @@ -153,10 +154,6 @@ }, set: function (style) { - if (this._style) - { - this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); - } style = style || {}; if (style instanceof TextStyle) @@ -167,7 +164,8 @@ { this._style = new TextStyle(style); } - this._style.on(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); + + this.localStyleID = -1; this.dirty = true; } }, @@ -205,10 +203,18 @@ */ Text.prototype.updateText = function (respectDirty) { + var style = this._style; + + // check if style has changed.. + if(this.localStyleID !== style.styleID) + { + this.dirty = true; + this.localStyleID = style.styleID; + } + if (!this.dirty && respectDirty) { return; } - var style = this._style; // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px var fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; @@ -242,6 +248,8 @@ width += style.dropShadowDistance; } + width += style.padding * 2; + this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); // calculate text height @@ -263,8 +271,8 @@ } - //this.context.fillStyle="#FF0000"; - //this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); +// this.context.fillStyle="#FF0000"; +// this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -304,12 +312,12 @@ if (style.fill) { - this.drawLetterSpacing(lines[i], linePositionX + xShadowOffset, linePositionY + yShadowOffset + style.padding); + this.drawLetterSpacing(lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding); if (style.stroke && style.strokeThickness) { this.context.strokeStyle = style.dropShadowColor; - this.drawLetterSpacing(lines[i], linePositionX + xShadowOffset, linePositionY + yShadowOffset + style.padding, true); + this.drawLetterSpacing(lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true); this.context.strokeStyle = style.stroke; } } @@ -336,12 +344,12 @@ if (style.stroke && style.strokeThickness) { - this.drawLetterSpacing(lines[i], linePositionX, linePositionY + style.padding, true); + this.drawLetterSpacing(lines[i], linePositionX + style.padding, linePositionY + style.padding, true); } if (style.fill) { - this.drawLetterSpacing(lines[i], linePositionX, linePositionY + style.padding); + this.drawLetterSpacing(lines[i], linePositionX + style.padding, linePositionY + style.padding); } } @@ -416,7 +424,7 @@ texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; - texture.trim.x = 0; + texture.trim.x = -style.padding; texture.trim.y = -style.padding; texture.orig.width = texture._frame.width; @@ -437,6 +445,12 @@ */ Text.prototype.renderWebGL = function (renderer) { + if(this.resolution !== renderer.resolution) + { + this.resolution = renderer.resolution; + this.dirty = true; + } + this.updateText(true); Sprite.prototype.renderWebGL.call(this, renderer); @@ -450,6 +464,12 @@ */ Text.prototype._renderCanvas = function (renderer) { + if(this.resolution !== renderer.resolution) + { + this.resolution = renderer.resolution; + this.dirty = true; + } + this.updateText(true); Sprite.prototype._renderCanvas.call(this, renderer); @@ -735,6 +755,5 @@ this.context = null; this.canvas = null; - this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); this._style = null; }; diff --git a/src/core/const.js b/src/core/const.js index 9af4c82..7caddaf 100644 --- a/src/core/const.js +++ b/src/core/const.js @@ -362,16 +362,7 @@ * @constant * @type {number} */ - SPRITE_MAX_TEXTURES: require('./utils/maxRecommendedTextures')(32), - - /** - * Name of the event that fires when a text style is changed. - * - * @static - * @constant - * @type {string} - */ - TEXT_STYLE_CHANGED: 'changed' + SPRITE_MAX_TEXTURES: require('./utils/maxRecommendedTextures')(32) }; module.exports = CONST; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 697405f..c714b25 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -20,9 +20,8 @@ * @memberof PIXI * @param text {string} The string that you would like the text to display * @param [style] {object|PIXI.TextStyle} The style parameters - * @param [resolution=1] {number} The current resolution / device pixel ratio of the canvas */ -function Text(text, style, resolution) +function Text(text, style) { /** * The canvas element that everything is drawn to @@ -38,11 +37,11 @@ this.context = this.canvas.getContext('2d'); /** - * The resolution / device pixel ratio of the canvas + * The resolution / device pixel ratio of the canvas. This is set automatically by the renderer. * @member {number} * @default 1 */ - this.resolution = resolution || CONST.RESOLUTION; + this.resolution = CONST.RESOLUTION; /** * Private tracker for the current text. @@ -82,6 +81,8 @@ this.text = text; this.style = style; + + this.localStyleID = -1; } // constructor @@ -153,10 +154,6 @@ }, set: function (style) { - if (this._style) - { - this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); - } style = style || {}; if (style instanceof TextStyle) @@ -167,7 +164,8 @@ { this._style = new TextStyle(style); } - this._style.on(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); + + this.localStyleID = -1; this.dirty = true; } }, @@ -205,10 +203,18 @@ */ Text.prototype.updateText = function (respectDirty) { + var style = this._style; + + // check if style has changed.. + if(this.localStyleID !== style.styleID) + { + this.dirty = true; + this.localStyleID = style.styleID; + } + if (!this.dirty && respectDirty) { return; } - var style = this._style; // build canvas api font setting from invididual components. Convert a numeric style.fontSize to px var fontSizeString = (typeof style.fontSize === 'number') ? style.fontSize + 'px' : style.fontSize; @@ -242,6 +248,8 @@ width += style.dropShadowDistance; } + width += style.padding * 2; + this.canvas.width = Math.ceil( ( width + this.context.lineWidth ) * this.resolution ); // calculate text height @@ -263,8 +271,8 @@ } - //this.context.fillStyle="#FF0000"; - //this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); +// this.context.fillStyle="#FF0000"; +// this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.font = this._font; this.context.strokeStyle = style.stroke; @@ -304,12 +312,12 @@ if (style.fill) { - this.drawLetterSpacing(lines[i], linePositionX + xShadowOffset, linePositionY + yShadowOffset + style.padding); + this.drawLetterSpacing(lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding); if (style.stroke && style.strokeThickness) { this.context.strokeStyle = style.dropShadowColor; - this.drawLetterSpacing(lines[i], linePositionX + xShadowOffset, linePositionY + yShadowOffset + style.padding, true); + this.drawLetterSpacing(lines[i], linePositionX + xShadowOffset + style.padding, linePositionY + yShadowOffset + style.padding, true); this.context.strokeStyle = style.stroke; } } @@ -336,12 +344,12 @@ if (style.stroke && style.strokeThickness) { - this.drawLetterSpacing(lines[i], linePositionX, linePositionY + style.padding, true); + this.drawLetterSpacing(lines[i], linePositionX + style.padding, linePositionY + style.padding, true); } if (style.fill) { - this.drawLetterSpacing(lines[i], linePositionX, linePositionY + style.padding); + this.drawLetterSpacing(lines[i], linePositionX + style.padding, linePositionY + style.padding); } } @@ -416,7 +424,7 @@ texture.trim.width = texture._frame.width = this.canvas.width / this.resolution; texture.trim.height = texture._frame.height = this.canvas.height / this.resolution; - texture.trim.x = 0; + texture.trim.x = -style.padding; texture.trim.y = -style.padding; texture.orig.width = texture._frame.width; @@ -437,6 +445,12 @@ */ Text.prototype.renderWebGL = function (renderer) { + if(this.resolution !== renderer.resolution) + { + this.resolution = renderer.resolution; + this.dirty = true; + } + this.updateText(true); Sprite.prototype.renderWebGL.call(this, renderer); @@ -450,6 +464,12 @@ */ Text.prototype._renderCanvas = function (renderer) { + if(this.resolution !== renderer.resolution) + { + this.resolution = renderer.resolution; + this.dirty = true; + } + this.updateText(true); Sprite.prototype._renderCanvas.call(this, renderer); @@ -735,6 +755,5 @@ this.context = null; this.canvas = null; - this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); this._style = null; }; diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 35f1e38..367779a 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -1,13 +1,11 @@ -var EventEmitter = require('eventemitter3'), - CONST = require('../const'), +var CONST = require('../const'), utils = require('../utils'); /** - * A TextStyle Object decorates a Text Object. It acts as an event emitter, and can be shared between - * multiple Text objects. + * A TextStyle Object decorates a Text Object. It can be shared between + * multiple Text objects. Changing the style will update all text objects using it. * * @class - * @extends EventEmitter * @memberof PIXI * @param [style] {object} The style parameters * @param [style.align='left'] {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text @@ -41,11 +39,10 @@ */ function TextStyle(style) { - EventEmitter.call(this); + this.styleID = 0; Object.assign(this, this._defaults, style); } -TextStyle.prototype = Object.create(EventEmitter.prototype); TextStyle.prototype.constructor = TextStyle; module.exports = TextStyle; @@ -79,7 +76,7 @@ /** * Creates a new TextStyle object with the same values as this one. - * Note that the only the properties of the object are cloned, not its event emitter. + * Note that the only the properties of the object are cloned. * * @return {PIXI.TextStyle} New cloned TextStyle object */ @@ -103,7 +100,6 @@ /** * Create setters and getters for each of the style properties. Converts colors where necessary. - * Any set operation will emit a styleChanged event. */ Object.defineProperties(TextStyle.prototype, { align: { @@ -116,7 +112,7 @@ if (this._align !== align) { this._align = align; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -131,7 +127,7 @@ if (this._breakWords !== breakWords) { this._breakWords = breakWords; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -146,7 +142,7 @@ if (this._dropShadow !== dropShadow) { this._dropShadow = dropShadow; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -161,7 +157,7 @@ if (this._dropShadowAngle !== dropShadowAngle) { this._dropShadowAngle = dropShadowAngle; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -176,7 +172,7 @@ if (this._dropShadowBlur !== dropShadowBlur) { this._dropShadowBlur = dropShadowBlur; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -192,7 +188,7 @@ if (this._dropShadowColor !== outputColor) { this._dropShadowColor = outputColor; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -207,7 +203,7 @@ if (this._dropShadowDistance !== dropShadowDistance) { this._dropShadowDistance = dropShadowDistance; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -223,7 +219,7 @@ if (this._fill !== outputColor) { this._fill = outputColor; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -238,7 +234,7 @@ if (this._fillGradientType !== fillGradientType) { this._fillGradientType = fillGradientType; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -253,7 +249,7 @@ if (this.fontFamily !== fontFamily) { this._fontFamily = fontFamily; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -268,7 +264,7 @@ if (this._fontSize !== fontSize) { this._fontSize = fontSize; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -283,7 +279,7 @@ if (this._fontStyle !== fontStyle) { this._fontStyle = fontStyle; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -298,7 +294,7 @@ if (this._fontVariant !== fontVariant) { this._fontVariant = fontVariant; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -313,7 +309,7 @@ if (this._fontWeight !== fontWeight) { this._fontWeight = fontWeight; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -328,7 +324,7 @@ if (this._letterSpacing !== letterSpacing) { this._letterSpacing = letterSpacing; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -343,7 +339,7 @@ if (this._lineHeight !== lineHeight) { this._lineHeight = lineHeight; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -358,7 +354,7 @@ if (this._lineJoin !== lineJoin) { this._lineJoin = lineJoin; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -373,7 +369,7 @@ if (this._miterLimit !== miterLimit) { this._miterLimit = miterLimit; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -388,7 +384,7 @@ if (this._padding !== padding) { this._padding = padding; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -404,7 +400,7 @@ if (this._stroke !== outputColor) { this._stroke = outputColor; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -419,7 +415,7 @@ if (this._strokeThickness !== strokeThickness) { this._strokeThickness = strokeThickness; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -434,7 +430,7 @@ if (this._textBaseline !== textBaseline) { this._textBaseline = textBaseline; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -449,7 +445,7 @@ if (this._wordWrap !== wordWrap) { this._wordWrap = wordWrap; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }, @@ -464,7 +460,7 @@ if (this._wordWrapWidth !== wordWrapWidth) { this._wordWrapWidth = wordWrapWidth; - this.emit(CONST.TEXT_STYLE_CHANGED); + this.styleID++; } } }