diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 5b2fb23..ca9d118 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -1,8 +1,8 @@ var Sprite = require('../sprites/Sprite'), Texture = require('../textures/Texture'), math = require('../math'), - CONST = require('../const'), - TextStyle = require('./TextStyle'); + utils = require('../utils'), + CONST = require('../const'); /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, @@ -18,8 +18,29 @@ * @extends PIXI.Sprite * @memberof PIXI * @param text {string} The copy that you would like the text to display - * @param [style] {object|PIXI.TextStyle} The style parameters - * @param [resolution=CONST.RESOLUTION] The resolution of the canvas + * @param [style] {object} The style parameters + * @param [style.font] {string} default 'bold 20px Arial' The style and size of the font + * @param [style.fill='black'] {String|Number} A canvas fillstyle that will be used on the text e.g 'red', '#00FF00' + * @param [style.align='left'] {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * @param [style.stroke] {String|Number} A canvas fillstyle that will be used on the text stroke e.g 'blue', '#FCFF00' + * @param [style.strokeThickness=0] {number} A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param [style.wordWrap=false] {boolean} Indicates if word wrap should be used + * @param [style.wordWrapWidth=100] {number} The width at which text will wrap, it needs wordWrap to be set to true + * @param [style.letterSpacing=0] {number} The amount of spacing between letters, default is 0 + * @param [style.breakWords=false] {boolean} Indicates if lines can be wrapped within words, it needs wordWrap to be set to true + * @param [style.lineHeight] {number} The line height, a number that represents the vertical space that a letter uses + * @param [style.dropShadow=false] {boolean} Set a drop shadow for the text + * @param [style.dropShadowColor='#000000'] {string} A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param [style.dropShadowAngle=Math.PI/4] {number} Set a angle of the drop shadow + * @param [style.dropShadowDistance=5] {number} Set a distance of the drop shadow + * @param [style.dropShadowBlur=0] {number} Set a shadow blur radius + * @param [style.padding=0] {number} Occasionally some fonts are cropped on top or bottom. Adding some padding will + * prevent this from happening by adding padding to the top and bottom of text height. + * @param [style.textBaseline='alphabetic'] {string} The baseline of the text that is rendered. + * @param [style.lineJoin='miter'] {string} The lineJoin property sets the type of corner created, it can resolve + * spiked text issues. Default is 'miter' (creates a sharp corner). + * @param [style.miterLimit=10] {number} The miter limit to use when using the 'miter' lineJoin mode. This can reduce + * or increase the spikiness of rendered text. */ function Text(text, style, resolution) { @@ -57,13 +78,6 @@ * @private */ this._style = null; - /** - * Private listener to track style changes. - * - * @member {Function} - * @private - */ - this._styleListener = null; var texture = Texture.fromCanvas(this.canvas); texture.trim = new math.Rectangle(); @@ -92,7 +106,10 @@ width: { get: function () { - this.updateText(true); + if (this.dirty) + { + this.updateText(); + } return this.scale.x * this._texture._frame.width; }, @@ -112,7 +129,10 @@ height: { get: function () { - this.updateText(true); + if (this.dirty) + { + this.updateText(); + } return this.scale.y * this._texture._frame.height; }, @@ -124,9 +144,29 @@ }, /** - * Set the style of the text. Set up an event listener to listen for changes on the style object and mark the text as dirty. + * Set the style of the text * - * @param [style] {object|TextStyle} The style parameters + * @param [style] {object} The style parameters + * @param [style.font='bold 20pt Arial'] {string} The style and size of the font + * @param [style.fill='black'] {string|number} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * @param [style.stroke='black'] {string|number} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' + * @param [style.strokeThickness=0] {number} A number that represents the thickness of the stroke. Default is 0 (no stroke) + * @param [style.wordWrap=false] {boolean} Indicates if word wrap should be used + * @param [style.wordWrapWidth=100] {number} The width at which text will wrap + * @param [style.lineHeight] {number} The line height, a number that represents the vertical space that a letter uses + * @param [style.dropShadow=false] {boolean} Set a drop shadow for the text + * @param [style.dropShadowColor='#000000'] {string|number} A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param [style.dropShadowAngle=Math.PI/6] {number} Set a angle of the drop shadow + * @param [style.dropShadowDistance=5] {number} Set a distance of the drop shadow + * @param [style.dropShadowBlur=0] {number} Set a shadow blur radius + * @param [style.padding=0] {number} Occasionally some fonts are cropped on top or bottom. Adding some padding will + * prevent this from happening by adding padding to the top and bottom of text height. + * @param [style.textBaseline='alphabetic'] {string} The baseline of the text that is rendered. + * @param [style.lineJoin='miter'] {string} The lineJoin property sets the type of corner created, it can resolve + * spiked text issues. Default is 'miter' (creates a sharp corner). + * @param [style.miterLimit=10] {number} The miter limit to use when using the 'miter' lineJoin mode. This can reduce + * or increase the spikiness of rendered text. * @memberof PIXI.Text# */ style: { @@ -136,19 +176,44 @@ }, set: function (style) { - if (this._style) { - this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); + style = style || {}; + + if (typeof style.fill === 'number') { + style.fill = utils.hex2string(style.fill); } - style = style || {}; - if (style instanceof TextStyle) - { - this._style = style; - } else - { - this._style = new TextStyle(style); + if (typeof style.stroke === 'number') { + style.stroke = utils.hex2string(style.stroke); } - this._style.on(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); + + if (typeof style.dropShadowColor === 'number') { + style.dropShadowColor = utils.hex2string(style.dropShadowColor); + } + + style.font = style.font || 'bold 20pt Arial'; + style.fill = style.fill || 'black'; + style.align = style.align || 'left'; + style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/pixijs/pixi.js/issues/136 + style.strokeThickness = style.strokeThickness || 0; + style.wordWrap = style.wordWrap || false; + style.wordWrapWidth = style.wordWrapWidth || 100; + style.breakWords = style.breakWords || false; + style.letterSpacing = style.letterSpacing || 0; + + style.dropShadow = style.dropShadow || false; + style.dropShadowColor = style.dropShadowColor || '#000000'; + style.dropShadowAngle = style.dropShadowAngle !== undefined ? style.dropShadowAngle : Math.PI / 6; + style.dropShadowDistance = style.dropShadowDistance !== undefined ? style.dropShadowDistance : 5; + style.dropShadowBlur = style.dropShadowBlur !== undefined ? style.dropShadowBlur : 0; //shadowBlur is '0' by default according to HTML + + style.padding = style.padding || 0; + + style.textBaseline = style.textBaseline || 'alphabetic'; + + style.lineJoin = style.lineJoin || 'miter'; + style.miterLimit = style.miterLimit || 10; + + this._style = style; this.dirty = true; } }, @@ -168,7 +233,7 @@ text = text || ' '; text = text.toString(); - + if (this._text === text) { return; @@ -181,14 +246,11 @@ /** * Renders text and updates it when needed - * @param respectDirty {boolean} Whether to abort updating the text if the Text isn't dirty and the function is called. + * * @private */ -Text.prototype.updateText = function (respectDirty) +Text.prototype.updateText = function () { - if (!this.dirty && respectDirty) { - return; - } var style = this._style; this.context.font = style.font; @@ -399,7 +461,12 @@ */ Text.prototype.renderWebGL = function (renderer) { - this.updateText(true); + if (this.dirty) + { + //this.resolution = 1//renderer.resolution; + + this.updateText(); + } Sprite.prototype.renderWebGL.call(this, renderer); }; @@ -412,7 +479,12 @@ */ Text.prototype._renderCanvas = function (renderer) { - this.updateText(true); + if (this.dirty) + { + // this.resolution = 1//renderer.resolution; + + this.updateText(); + } Sprite.prototype._renderCanvas.call(this, renderer); }; @@ -601,21 +673,15 @@ */ Text.prototype.getBounds = function (matrix) { - this.updateText(true); + if (this.dirty) + { + this.updateText(); + } return Sprite.prototype.getBounds.call(this, matrix); }; /** - * Method to be called upon a TextStyle change. - * @private - */ -Text.prototype._onStyleChange = function () -{ - this.dirty = true; -}; - -/** * Destroys this text object. * * @param [destroyBaseTexture=true] {boolean} whether to destroy the base texture as well @@ -626,9 +692,7 @@ this.context = null; this.canvas = null; - this._style.off(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); this._style = null; this._texture.destroy(destroyBaseTexture === undefined ? true : destroyBaseTexture); - };