diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 27d1fa9..9e1f261 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'), - utils = require('../utils'), - CONST = require('../const'); + CONST = require('../const'), + TextStyle = require('./TextStyle'); /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, @@ -17,30 +17,9 @@ * @class * @extends PIXI.Sprite * @memberof PIXI - * @param text {string} The copy that you would like the text to display - * @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. + * @param text {string} The string 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 */ function Text(text, style, resolution) { @@ -78,6 +57,13 @@ * @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(); @@ -106,10 +92,7 @@ width: { get: function () { - if (this.dirty) - { - this.updateText(); - } + this.updateText(true); return this.scale.x * this._texture._frame.width; }, @@ -129,10 +112,7 @@ height: { get: function () { - if (this.dirty) - { - this.updateText(); - } + this.updateText(true); return this.scale.y * this._texture._frame.height; }, @@ -144,29 +124,9 @@ }, /** - * Set the style of the text + * 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. * - * @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. + * @param [style] {object|PIXI.TextStyle} The style parameters * @memberof PIXI.Text# */ style: { @@ -176,44 +136,21 @@ }, 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); + if (style instanceof TextStyle) + { + this._style = style; } - - if (typeof style.stroke === 'number') { - style.stroke = utils.hex2string(style.stroke); + else + { + this._style = new TextStyle(style); } - - 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._style.on(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); this.dirty = true; } }, @@ -233,7 +170,7 @@ text = text || ' '; text = text.toString(); - + if (this._text === text) { return; @@ -246,11 +183,14 @@ /** * 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 () +Text.prototype.updateText = function (respectDirty) { + if (!this.dirty && respectDirty) { + return; + } var style = this._style; this.context.font = style.font; @@ -265,7 +205,9 @@ var lineWidths = new Array(lines.length); var maxLineWidth = 0; var fontProperties = this.determineFontProperties(style.font); - for (var i = 0; i < lines.length; i++) + + var i; + for (i = 0; i < lines.length; i++) { var lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -461,12 +403,7 @@ */ Text.prototype.renderWebGL = function (renderer) { - if (this.dirty) - { - //this.resolution = 1//renderer.resolution; - - this.updateText(); - } + this.updateText(true); Sprite.prototype.renderWebGL.call(this, renderer); }; @@ -479,12 +416,7 @@ */ Text.prototype._renderCanvas = function (renderer) { - if (this.dirty) - { - // this.resolution = 1//renderer.resolution; - - this.updateText(); - } + this.updateText(true); Sprite.prototype._renderCanvas.call(this, renderer); }; @@ -673,15 +605,21 @@ */ Text.prototype.getBounds = function (matrix) { - if (this.dirty) - { - this.updateText(); - } + this.updateText(true); 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 @@ -692,6 +630,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); diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 27d1fa9..9e1f261 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'), - utils = require('../utils'), - CONST = require('../const'); + CONST = require('../const'), + TextStyle = require('./TextStyle'); /** * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, @@ -17,30 +17,9 @@ * @class * @extends PIXI.Sprite * @memberof PIXI - * @param text {string} The copy that you would like the text to display - * @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. + * @param text {string} The string 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 */ function Text(text, style, resolution) { @@ -78,6 +57,13 @@ * @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(); @@ -106,10 +92,7 @@ width: { get: function () { - if (this.dirty) - { - this.updateText(); - } + this.updateText(true); return this.scale.x * this._texture._frame.width; }, @@ -129,10 +112,7 @@ height: { get: function () { - if (this.dirty) - { - this.updateText(); - } + this.updateText(true); return this.scale.y * this._texture._frame.height; }, @@ -144,29 +124,9 @@ }, /** - * Set the style of the text + * 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. * - * @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. + * @param [style] {object|PIXI.TextStyle} The style parameters * @memberof PIXI.Text# */ style: { @@ -176,44 +136,21 @@ }, 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); + if (style instanceof TextStyle) + { + this._style = style; } - - if (typeof style.stroke === 'number') { - style.stroke = utils.hex2string(style.stroke); + else + { + this._style = new TextStyle(style); } - - 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._style.on(CONST.TEXT_STYLE_CHANGED, this._onStyleChange, this); this.dirty = true; } }, @@ -233,7 +170,7 @@ text = text || ' '; text = text.toString(); - + if (this._text === text) { return; @@ -246,11 +183,14 @@ /** * 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 () +Text.prototype.updateText = function (respectDirty) { + if (!this.dirty && respectDirty) { + return; + } var style = this._style; this.context.font = style.font; @@ -265,7 +205,9 @@ var lineWidths = new Array(lines.length); var maxLineWidth = 0; var fontProperties = this.determineFontProperties(style.font); - for (var i = 0; i < lines.length; i++) + + var i; + for (i = 0; i < lines.length; i++) { var lineWidth = this.context.measureText(lines[i]).width + ((lines[i].length - 1) * style.letterSpacing); lineWidths[i] = lineWidth; @@ -461,12 +403,7 @@ */ Text.prototype.renderWebGL = function (renderer) { - if (this.dirty) - { - //this.resolution = 1//renderer.resolution; - - this.updateText(); - } + this.updateText(true); Sprite.prototype.renderWebGL.call(this, renderer); }; @@ -479,12 +416,7 @@ */ Text.prototype._renderCanvas = function (renderer) { - if (this.dirty) - { - // this.resolution = 1//renderer.resolution; - - this.updateText(); - } + this.updateText(true); Sprite.prototype._renderCanvas.call(this, renderer); }; @@ -673,15 +605,21 @@ */ Text.prototype.getBounds = function (matrix) { - if (this.dirty) - { - this.updateText(); - } + this.updateText(true); 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 @@ -692,6 +630,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); diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 7c3d7be..3c57ac2 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -10,26 +10,28 @@ * @extends EventEmitter * @memberof PIXI * @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 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='black'] {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.lineHeight] {number} The line height, a number that represents the vertical space that a letter uses + * @param [style.breakWords=false] {boolean} Indicates if lines can be wrapped within words, it needs wordWrap to be set to true * @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/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.dropShadowColor='#000000'] {string} A fill style to be used on the dropshadow e.g 'red', '#00FF00' + * @param [style.dropShadowDistance=5] {number} Set a distance of the drop shadow + * @param [style.fill='black'] {string|Number|CanvasGradient} A canvas fillstyle that will be used on the text e.g 'red', '#00FF00' + * @param [style.font='bold 20pt Arial'] {string} The style and size of the font + * @param [style.letterSpacing=0] {number} The amount of spacing between letters, default is 0 + * @param [style.lineHeight] {number} The line height, a number that represents the vertical space that a letter uses * @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. + * @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.stroke='black'] {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.textBaseline='alphabetic'] {string} The baseline of the text that is rendered. + * @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 */ function TextStyle(style) { @@ -44,15 +46,17 @@ // Default settings. Explained in the constructor. TextStyle.prototype._defaults = { align: 'left', + breakWords: false, dropShadow: false, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, dropShadowColor: '#000000', dropShadowDistance: 5, - lineHeight: null, - lineJoin: 'miter', fill: 'black', font: 'bold 20pt Arial', + letterSpacing: 0, + lineHeight: 0, + lineJoin: 'miter', miterLimit: 10, padding: 0, stroke: 'black', @@ -91,38 +95,12 @@ * Any set operation will emit a styleChanged event. */ Object.defineProperties(TextStyle.prototype, { - font: { - get: function () - { - return this._font; - }, set: function (font) - { - if (this._font !== font) - { - this._font = font; - this.emit(CONST.TEXT_STYLE_CHANGED); - } - } - }, - fill: { - get: function () - { - return this._fill; - }, set: function (fill) - { - var outputColor = getColor(fill); - if (this._fill !== outputColor) - { - this._fill = outputColor; - this.emit(CONST.TEXT_STYLE_CHANGED); - } - } - }, - align: { + align: { get: function () { return this._align; - }, set: function (align) + }, + set: function (align) { if (this._align !== align) { @@ -131,64 +109,28 @@ } } }, - stroke: { + + breakWords: { get: function () { - return this._stroke; - }, set: function (stroke) + return this._breakWords; + }, + set: function (breakWords) { - var outputColor = getColor(stroke); - if (this._stroke !== outputColor) + if (this._breakWords !== breakWords) { - this._stroke = outputColor; + this._breakWords = breakWords; this.emit(CONST.TEXT_STYLE_CHANGED); } } }, - strokeThickness: { - get: function () - { - return this._strokeThickness; - }, set: function (strokeThickness) - { - if (this._strokeThickness !== strokeThickness) - { - this._strokeThickness = strokeThickness; - this.emit(CONST.TEXT_STYLE_CHANGED); - } - } - }, - wordWrap: { - get: function () - { - return this._wordWrap; - }, set: function (wordWrap) - { - if (this._wordWrap !== wordWrap) - { - this._wordWrap = wordWrap; - this.emit(CONST.TEXT_STYLE_CHANGED); - } - } - }, - wordWrapWidth: { - get: function () - { - return this._wordWrapWidth; - }, set: function (wordWrapWidth) - { - if (this._wordWrapWidth !== wordWrapWidth) - { - this._wordWrapWidth = wordWrapWidth; - this.emit(CONST.TEXT_STYLE_CHANGED); - } - } - }, + dropShadow: { get: function () { return this._dropShadow; - }, set: function (dropShadow) + }, + set: function (dropShadow) { if (this._dropShadow !== dropShadow) { @@ -197,11 +139,43 @@ } } }, + + dropShadowAngle: { + get: function () + { + return this._dropShadowAngle; + }, + set: function (dropShadowAngle) + { + if (this._dropShadowAngle !== dropShadowAngle) + { + this._dropShadowAngle = dropShadowAngle; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + dropShadowBlur: { + get: function () + { + return this._dropShadowBlur; + }, + set: function (dropShadowBlur) + { + if (this._dropShadowBlur !== dropShadowBlur) + { + this._dropShadowBlur = dropShadowBlur; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + dropShadowColor: { get: function () { return this._dropShadowColor; - }, set: function (dropShadowColor) + }, + set: function (dropShadowColor) { var outputColor = getColor(dropShadowColor); if (this._dropShadowColor !== outputColor) @@ -211,24 +185,13 @@ } } }, - dropShadowAngle: { - get: function () - { - return this._dropShadowAngle; - }, set: function (dropShadowAngle) - { - if (this._dropShadowAngle !== dropShadowAngle) - { - this._dropShadowAngle = dropShadowAngle; - this.emit(CONST.TEXT_STYLE_CHANGED); - } - } - }, + dropShadowDistance: { get: function () { return this._dropShadowDistance; - }, set: function (dropShadowDistance) + }, + set: function (dropShadowDistance) { if (this._dropShadowDistance !== dropShadowDistance) { @@ -237,63 +200,59 @@ } } }, - dropShadowBlur: { + + fill: { get: function () { - return this._dropShadowBlur; - }, set: function (dropShadowBlur) + return this._fill; + }, + set: function (fill) { - if (this._dropShadowBlur !== dropShadowBlur) + var outputColor = getColor(fill); + if (this._fill !== outputColor) { - this._dropShadowBlur = dropShadowBlur; + this._fill = outputColor; this.emit(CONST.TEXT_STYLE_CHANGED); } } }, - padding: { + + font: { get: function () { - return this._padding; - }, set: function (padding) + return this._font; + }, + set: function (font) { - if (this._padding !== padding) + if (this._font !== font) { - this._padding = padding; + this._font = font; this.emit(CONST.TEXT_STYLE_CHANGED); } } }, - textBaseline: { + + letterSpacing: { get: function () { - return this._textBaseline; - }, set: function (textBaseline) + return this._letterSpacing; + }, + set: function (letterSpacing) { - if (this._textBaseline !== textBaseline) + if (this._letterSpacing !== letterSpacing) { - this._textBaseline = textBaseline; + this._letterSpacing = letterSpacing; this.emit(CONST.TEXT_STYLE_CHANGED); } } }, - lineJoin: { - get: function () - { - return this._lineJoin; - }, set: function (lineJoin) - { - if (this._lineJoin !== lineJoin) - { - this._lineJoin = lineJoin; - this.emit(CONST.TEXT_STYLE_CHANGED); - } - } - }, + lineHeight: { get: function () { return this._lineHeight; - }, set: function (lineHeight) + }, + set: function (lineHeight) { if (this._lineHeight !== lineHeight) { @@ -302,11 +261,28 @@ } } }, + + lineJoin: { + get: function () + { + return this._lineJoin; + }, + set: function (lineJoin) + { + if (this._lineJoin !== lineJoin) + { + this._lineJoin = lineJoin; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + miterLimit: { get: function () { return this._miterLimit; - }, set: function (miterLimit) + }, + set: function (miterLimit) { if (this._miterLimit !== miterLimit) { @@ -314,6 +290,97 @@ this.emit(CONST.TEXT_STYLE_CHANGED); } } + }, + + padding: { + get: function () + { + return this._padding; + }, + set: function (padding) + { + if (this._padding !== padding) + { + this._padding = padding; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + stroke: { + get: function () + { + return this._stroke; + }, + set: function (stroke) + { + var outputColor = getColor(stroke); + if (this._stroke !== outputColor) + { + this._stroke = outputColor; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + strokeThickness: { + get: function () + { + return this._strokeThickness; + }, + set: function (strokeThickness) + { + if (this._strokeThickness !== strokeThickness) + { + this._strokeThickness = strokeThickness; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + textBaseline: { + get: function () + { + return this._textBaseline; + }, + set: function (textBaseline) + { + if (this._textBaseline !== textBaseline) + { + this._textBaseline = textBaseline; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + wordWrap: { + get: function () + { + return this._wordWrap; + }, + set: function (wordWrap) + { + if (this._wordWrap !== wordWrap) + { + this._wordWrap = wordWrap; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + wordWrapWidth: { + get: function () + { + return this._wordWrapWidth; + }, + set: function (wordWrapWidth) + { + if (this._wordWrapWidth !== wordWrapWidth) + { + this._wordWrapWidth = wordWrapWidth; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } } });