diff --git a/src/core/text/Text.js b/src/core/text/Text.js index e455052..6355be9 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -65,6 +65,14 @@ */ this._styleListener = null; + /** + * Private tracker for the current font. + * + * @member {string} + * @private + */ + this._font = ''; + var texture = Texture.fromCanvas(this.canvas); texture.trim = new math.Rectangle(); Sprite.call(this, texture); @@ -196,7 +204,12 @@ return; } var style = this._style; - this.context.font = style.font; + + // 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; + this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + + this.context.font = this._font; // word wrap // preserve original text @@ -208,7 +221,7 @@ // calculate text width var lineWidths = new Array(lines.length); var maxLineWidth = 0; - var fontProperties = this.determineFontProperties(style.font); + var fontProperties = this.determineFontProperties(this._font); var i; for (i = 0; i < lines.length; i++) @@ -248,7 +261,7 @@ //this.context.fillStyle="#FF0000"; //this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = style.font; + this.context.font = this._font; this.context.strokeStyle = style.stroke; this.context.lineWidth = style.strokeThickness; this.context.textBaseline = style.textBaseline; diff --git a/src/core/text/Text.js b/src/core/text/Text.js index e455052..6355be9 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -65,6 +65,14 @@ */ this._styleListener = null; + /** + * Private tracker for the current font. + * + * @member {string} + * @private + */ + this._font = ''; + var texture = Texture.fromCanvas(this.canvas); texture.trim = new math.Rectangle(); Sprite.call(this, texture); @@ -196,7 +204,12 @@ return; } var style = this._style; - this.context.font = style.font; + + // 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; + this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + + this.context.font = this._font; // word wrap // preserve original text @@ -208,7 +221,7 @@ // calculate text width var lineWidths = new Array(lines.length); var maxLineWidth = 0; - var fontProperties = this.determineFontProperties(style.font); + var fontProperties = this.determineFontProperties(this._font); var i; for (i = 0; i < lines.length; i++) @@ -248,7 +261,7 @@ //this.context.fillStyle="#FF0000"; //this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = style.font; + this.context.font = this._font; this.context.strokeStyle = style.stroke; this.context.lineWidth = style.strokeThickness; this.context.textBaseline = style.textBaseline; diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index d438a80..ce6716b 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -19,7 +19,11 @@ * @param [style.dropShadowDistance=5] {number} Set a distance of the drop shadow * @param [style.fill='black'] {string|number|CanvasGradient|CanvasPattern} A canvas fillstyle that will be used on the * text e.g 'red', '#00FF00'. @see {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} - * @param [style.font='bold 20pt Arial'] {string} The style and size of the font + * @param [style.fontFamily='Arial'] {string} The font family + * @param [style.fontSize=26] {number|string} The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * @param [style.fontStyle='normal'] {string} The font style ('normal', 'italic' or 'oblique') + * @param [style.fontVariant='normal'] {string} The font variant ('normal' or 'small-caps') + * @param [style.fontWeight='normal'] {string} The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') * @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 @@ -54,7 +58,11 @@ dropShadowColor: '#000000', dropShadowDistance: 5, fill: 'black', - font: 'bold 20pt Arial', + fontFamily: 'Arial', + fontSize: 26, + fontStyle: 'normal', + fontVariant: 'normal', + fontWeight: 'normal', letterSpacing: 0, lineHeight: 0, lineJoin: 'miter', @@ -218,16 +226,76 @@ } }, - font: { + fontFamily: { get: function () { - return this._font; + return this._fontFamily; }, - set: function (font) + set: function (fontFamily) { - if (this._font !== font) + if (this.fontFamily !== fontFamily) { - this._font = font; + this._fontFamily = fontFamily; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + fontSize: { + get: function () + { + return this._fontSize; + }, + set: function (fontSize) + { + if (this._fontSize !== fontSize) + { + this._fontSize = fontSize; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + fontStyle: { + get: function () + { + return this._fontStyle; + }, + set: function (fontStyle) + { + if (this._fontStyle !== fontStyle) + { + this._fontStyle = fontStyle; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + fontVariant: { + get: function () + { + return this._fontVariant; + }, + set: function (fontVariant) + { + if (this._fontVariant !== fontVariant) + { + this._fontVariant = fontVariant; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + fontWeight: { + get: function () + { + return this._fontWeight; + }, + set: function (fontWeight) + { + if (this._fontWeight !== fontWeight) + { + this._fontWeight = fontWeight; this.emit(CONST.TEXT_STYLE_CHANGED); } } diff --git a/src/core/text/Text.js b/src/core/text/Text.js index e455052..6355be9 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -65,6 +65,14 @@ */ this._styleListener = null; + /** + * Private tracker for the current font. + * + * @member {string} + * @private + */ + this._font = ''; + var texture = Texture.fromCanvas(this.canvas); texture.trim = new math.Rectangle(); Sprite.call(this, texture); @@ -196,7 +204,12 @@ return; } var style = this._style; - this.context.font = style.font; + + // 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; + this._font = style.fontStyle + ' ' + style.fontVariant + ' ' + style.fontWeight + ' ' + fontSizeString + ' ' + style.fontFamily; + + this.context.font = this._font; // word wrap // preserve original text @@ -208,7 +221,7 @@ // calculate text width var lineWidths = new Array(lines.length); var maxLineWidth = 0; - var fontProperties = this.determineFontProperties(style.font); + var fontProperties = this.determineFontProperties(this._font); var i; for (i = 0; i < lines.length; i++) @@ -248,7 +261,7 @@ //this.context.fillStyle="#FF0000"; //this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); - this.context.font = style.font; + this.context.font = this._font; this.context.strokeStyle = style.stroke; this.context.lineWidth = style.strokeThickness; this.context.textBaseline = style.textBaseline; diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index d438a80..ce6716b 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -19,7 +19,11 @@ * @param [style.dropShadowDistance=5] {number} Set a distance of the drop shadow * @param [style.fill='black'] {string|number|CanvasGradient|CanvasPattern} A canvas fillstyle that will be used on the * text e.g 'red', '#00FF00'. @see {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} - * @param [style.font='bold 20pt Arial'] {string} The style and size of the font + * @param [style.fontFamily='Arial'] {string} The font family + * @param [style.fontSize=26] {number|string} The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') + * @param [style.fontStyle='normal'] {string} The font style ('normal', 'italic' or 'oblique') + * @param [style.fontVariant='normal'] {string} The font variant ('normal' or 'small-caps') + * @param [style.fontWeight='normal'] {string} The font weight ('normal', 'bold', 'bolder', 'lighter' and '100', '200', '300', '400', '500', '600', '700', 800' or '900') * @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 @@ -54,7 +58,11 @@ dropShadowColor: '#000000', dropShadowDistance: 5, fill: 'black', - font: 'bold 20pt Arial', + fontFamily: 'Arial', + fontSize: 26, + fontStyle: 'normal', + fontVariant: 'normal', + fontWeight: 'normal', letterSpacing: 0, lineHeight: 0, lineJoin: 'miter', @@ -218,16 +226,76 @@ } }, - font: { + fontFamily: { get: function () { - return this._font; + return this._fontFamily; }, - set: function (font) + set: function (fontFamily) { - if (this._font !== font) + if (this.fontFamily !== fontFamily) { - this._font = font; + this._fontFamily = fontFamily; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + fontSize: { + get: function () + { + return this._fontSize; + }, + set: function (fontSize) + { + if (this._fontSize !== fontSize) + { + this._fontSize = fontSize; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + fontStyle: { + get: function () + { + return this._fontStyle; + }, + set: function (fontStyle) + { + if (this._fontStyle !== fontStyle) + { + this._fontStyle = fontStyle; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + fontVariant: { + get: function () + { + return this._fontVariant; + }, + set: function (fontVariant) + { + if (this._fontVariant !== fontVariant) + { + this._fontVariant = fontVariant; + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } + }, + + fontWeight: { + get: function () + { + return this._fontWeight; + }, + set: function (fontWeight) + { + if (this._fontWeight !== fontWeight) + { + this._fontWeight = fontWeight; this.emit(CONST.TEXT_STYLE_CHANGED); } } diff --git a/src/deprecation.js b/src/deprecation.js index e7dd550..3db6a01 100644 --- a/src/deprecation.js +++ b/src/deprecation.js @@ -3,7 +3,8 @@ mesh = require('./mesh'), particles = require('./particles'), extras = require('./extras'), - filters = require('./filters'); + filters = require('./filters'), + CONST = require('./core/const'); // provide method to give a stack track for warnings // useful for tracking-down where deprecated methods/properties/classes @@ -380,6 +381,90 @@ warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;'); }; +Object.defineProperties(core.TextStyle.prototype, { + font: { + get: function () + { + warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + var fontSizeString = (typeof this._fontSize === 'number') ? this._fontSize + 'px' : this._fontSize; + return this._fontStyle + ' ' + this._fontVariant + ' ' + this._fontWeight + ' ' + fontSizeString + ' ' + this._fontFamily; + }, + set: function (font) + { + warn('text style property \'font\' is now deprecated, please use the \'fontFamily\',\'fontSize\',fontStyle\',\'fontVariant\' and \'fontWeight\' properties from now on'); + + // can work out fontStyle from search of whole string + if ( font.indexOf('italic') > 1 ) + { + this._fontStyle = 'italic'; + } + else if ( font.indexOf('oblique') > -1 ) + { + this._fontStyle = 'oblique'; + } + else + { + this._fontStyle = 'normal'; + } + + // can work out fontVariant from search of whole string + if ( font.indexOf('small-caps') > -1 ) + { + this._fontVariant = 'small-caps'; + } + else + { + this._fontVariant = 'normal'; + } + + // fontWeight and fontFamily are tricker to find, but it's easier to find the fontSize due to it's units + var splits = font.split(' '); + var i; + var fontSizeIndex = -1; + + this._fontSize = 26; + for ( i = 0; i < splits.length; ++i ) + { + if ( splits[i].match( /(px|pt|em|%)/ ) ) + { + fontSizeIndex = i; + this._fontSize = splits[i]; + break; + } + } + + // we can now search for fontWeight as we know it must occur before the fontSize + this._fontWeight = 'normal'; + for ( i = 0; i < fontSizeIndex; ++i ) + { + if ( splits[i].match( /(bold|bolder|lighter|100|200|300|400|500|600|700|800|900)/ ) ) + { + this._fontWeight = splits[i]; + break; + } + } + + // and finally join everything together after the fontSize in case the font family has multiple words + if ( fontSizeIndex > -1 && fontSizeIndex < splits.length-1 ) + { + this._fontFamily = ''; + for ( i = fontSizeIndex + 1; i < splits.length; ++i ) + { + this._fontFamily += splits[i] + ' '; + } + + this._fontFamily = this._fontFamily.slice(0, -1); + } + else + { + this._fontFamily = 'Arial'; + } + + this.emit(CONST.TEXT_STYLE_CHANGED); + } + } +} ); + /** * @method * @name PIXI.Texture#setFrame