diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 86cdf2f..66162a9 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -5,7 +5,8 @@ CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), - CONST = require('../const'); + CONST = require('../const'), + tempPoint = new math.Point(); /** * The Graphics class contains methods used to draw primitive shapes such as lines, circles and @@ -889,6 +890,40 @@ }; /** +* Tests if a point is inside this graphics object +* +* @param point {Point} the point to test +* @return {boolean} the result of the test +*/ +Graphics.prototype.containsPoint = function( point ) +{ + this.worldTransform.applyInverse(point, tempPoint); + + var graphicsData = this.graphicsData; + + for (var i = 0; i < graphicsData.length; i++) + { + var data = graphicsData[i]; + + if (!data.fill) + { + continue; + } + + // only deal with fills.. + if (data.shape) + { + if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + { + return true; + } + } + } + + return false; +}; + +/** * Update the bounds of the object * */ diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 86cdf2f..66162a9 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -5,7 +5,8 @@ CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), - CONST = require('../const'); + CONST = require('../const'), + tempPoint = new math.Point(); /** * The Graphics class contains methods used to draw primitive shapes such as lines, circles and @@ -889,6 +890,40 @@ }; /** +* Tests if a point is inside this graphics object +* +* @param point {Point} the point to test +* @return {boolean} the result of the test +*/ +Graphics.prototype.containsPoint = function( point ) +{ + this.worldTransform.applyInverse(point, tempPoint); + + var graphicsData = this.graphicsData; + + for (var i = 0; i < graphicsData.length; i++) + { + var data = graphicsData[i]; + + if (!data.fill) + { + continue; + } + + // only deal with fills.. + if (data.shape) + { + if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + { + return true; + } + } + } + + return false; +}; + +/** * Update the bounds of the object * */ diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 7b7de67..4dc4cc3 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -40,7 +40,7 @@ */ WebGLMaskManager.prototype.pushStencil = function (graphics, webGLData) { - this.renderer.currentRenderTarget.attachStenilBuffer(); + this.renderer.currentRenderTarget.attachStencilBuffer(); var gl = this.renderer.gl, sms = this.stencilMaskStack; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 86cdf2f..66162a9 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -5,7 +5,8 @@ CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), - CONST = require('../const'); + CONST = require('../const'), + tempPoint = new math.Point(); /** * The Graphics class contains methods used to draw primitive shapes such as lines, circles and @@ -889,6 +890,40 @@ }; /** +* Tests if a point is inside this graphics object +* +* @param point {Point} the point to test +* @return {boolean} the result of the test +*/ +Graphics.prototype.containsPoint = function( point ) +{ + this.worldTransform.applyInverse(point, tempPoint); + + var graphicsData = this.graphicsData; + + for (var i = 0; i < graphicsData.length; i++) + { + var data = graphicsData[i]; + + if (!data.fill) + { + continue; + } + + // only deal with fills.. + if (data.shape) + { + if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + { + return true; + } + } + } + + return false; +}; + +/** * Update the bounds of the object * */ diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 7b7de67..4dc4cc3 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -40,7 +40,7 @@ */ WebGLMaskManager.prototype.pushStencil = function (graphics, webGLData) { - this.renderer.currentRenderTarget.attachStenilBuffer(); + this.renderer.currentRenderTarget.attachStencilBuffer(); var gl = this.renderer.gl, sms = this.stencilMaskStack; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 14f9830..24585ed 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -129,7 +129,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); }; -RenderTarget.prototype.attachStenilBuffer = function() +RenderTarget.prototype.attachStencilBuffer = function() { if ( this.stencilBuffer ) diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 86cdf2f..66162a9 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -5,7 +5,8 @@ CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), - CONST = require('../const'); + CONST = require('../const'), + tempPoint = new math.Point(); /** * The Graphics class contains methods used to draw primitive shapes such as lines, circles and @@ -889,6 +890,40 @@ }; /** +* Tests if a point is inside this graphics object +* +* @param point {Point} the point to test +* @return {boolean} the result of the test +*/ +Graphics.prototype.containsPoint = function( point ) +{ + this.worldTransform.applyInverse(point, tempPoint); + + var graphicsData = this.graphicsData; + + for (var i = 0; i < graphicsData.length; i++) + { + var data = graphicsData[i]; + + if (!data.fill) + { + continue; + } + + // only deal with fills.. + if (data.shape) + { + if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + { + return true; + } + } + } + + return false; +}; + +/** * Update the bounds of the object * */ diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 7b7de67..4dc4cc3 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -40,7 +40,7 @@ */ WebGLMaskManager.prototype.pushStencil = function (graphics, webGLData) { - this.renderer.currentRenderTarget.attachStenilBuffer(); + this.renderer.currentRenderTarget.attachStencilBuffer(); var gl = this.renderer.gl, sms = this.stencilMaskStack; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 14f9830..24585ed 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -129,7 +129,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); }; -RenderTarget.prototype.attachStenilBuffer = function() +RenderTarget.prototype.attachStencilBuffer = function() { if ( this.stencilBuffer ) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 75cdd8e..127d3cf 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -3,7 +3,8 @@ Container = require('../display/Container'), CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), utils = require('../utils'), - CONST = require('../const'); + CONST = require('../const'), + tempPoint = new math.Point(); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -11,7 +12,7 @@ * A sprite can be created directly from an image like this: * * ```js - * var sprite = new Sprite.fromImage('assets/image.png'); + * var sprite = new PIXI.Sprite.fromImage('assets/image.png'); * ``` * * @class Sprite @@ -80,6 +81,11 @@ */ this.shader = null; + /** + * An internal cached value of the tint. + * + * @member {number} + */ this.cachedTint = 0xFFFFFF; // call texture setter @@ -322,6 +328,34 @@ }; /** +* Tests if a point is inside this sprite +* +* @param point {Point} the point to test +* @return {boolean} the result of the test +*/ +Sprite.prototype.containsPoint = function( point ) +{ + this.worldTransform.applyInverse(point, tempPoint); + + var width = this._texture._frame.width; + var height = this._texture._frame.height; + var x1 = -width * this.anchor.x; + var y1; + + if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) + { + y1 = -height * this.anchor.y; + + if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) + { + return true; + } + } + + return false; +}; + +/** * Renders the object using the Canvas renderer * * @param renderer {CanvasRenderer} The renderer diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 86cdf2f..66162a9 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -5,7 +5,8 @@ CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), - CONST = require('../const'); + CONST = require('../const'), + tempPoint = new math.Point(); /** * The Graphics class contains methods used to draw primitive shapes such as lines, circles and @@ -889,6 +890,40 @@ }; /** +* Tests if a point is inside this graphics object +* +* @param point {Point} the point to test +* @return {boolean} the result of the test +*/ +Graphics.prototype.containsPoint = function( point ) +{ + this.worldTransform.applyInverse(point, tempPoint); + + var graphicsData = this.graphicsData; + + for (var i = 0; i < graphicsData.length; i++) + { + var data = graphicsData[i]; + + if (!data.fill) + { + continue; + } + + // only deal with fills.. + if (data.shape) + { + if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + { + return true; + } + } + } + + return false; +}; + +/** * Update the bounds of the object * */ diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 7b7de67..4dc4cc3 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -40,7 +40,7 @@ */ WebGLMaskManager.prototype.pushStencil = function (graphics, webGLData) { - this.renderer.currentRenderTarget.attachStenilBuffer(); + this.renderer.currentRenderTarget.attachStencilBuffer(); var gl = this.renderer.gl, sms = this.stencilMaskStack; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 14f9830..24585ed 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -129,7 +129,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); }; -RenderTarget.prototype.attachStenilBuffer = function() +RenderTarget.prototype.attachStencilBuffer = function() { if ( this.stencilBuffer ) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 75cdd8e..127d3cf 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -3,7 +3,8 @@ Container = require('../display/Container'), CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), utils = require('../utils'), - CONST = require('../const'); + CONST = require('../const'), + tempPoint = new math.Point(); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -11,7 +12,7 @@ * A sprite can be created directly from an image like this: * * ```js - * var sprite = new Sprite.fromImage('assets/image.png'); + * var sprite = new PIXI.Sprite.fromImage('assets/image.png'); * ``` * * @class Sprite @@ -80,6 +81,11 @@ */ this.shader = null; + /** + * An internal cached value of the tint. + * + * @member {number} + */ this.cachedTint = 0xFFFFFF; // call texture setter @@ -322,6 +328,34 @@ }; /** +* Tests if a point is inside this sprite +* +* @param point {Point} the point to test +* @return {boolean} the result of the test +*/ +Sprite.prototype.containsPoint = function( point ) +{ + this.worldTransform.applyInverse(point, tempPoint); + + var width = this._texture._frame.width; + var height = this._texture._frame.height; + var x1 = -width * this.anchor.x; + var y1; + + if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) + { + y1 = -height * this.anchor.y; + + if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) + { + return true; + } + } + + return false; +}; + +/** * Renders the object using the Canvas renderer * * @param renderer {CanvasRenderer} The renderer diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index 9a0f4fb..96c57f0 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -1,6 +1,5 @@ var core = require('../core'); -var tempPoint = new core.math.Point(); core.DisplayObject.prototype.interactive = false; core.DisplayObject.prototype.buttonMode = false; @@ -11,55 +10,10 @@ core.DisplayObject.prototype._over = false; core.DisplayObject.prototype._touchDown = false; -core.Sprite.prototype.hitTest = function( point ) -{ - this.worldTransform.applyInverse(point, tempPoint); - var width = this._texture._frame.width; - var height = this._texture._frame.height; - var x1 = -width * this.anchor.x; - var y1; - - if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) - { - y1 = -height * this.anchor.y; - - if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) - { - return true; - } - } - - return false; -}; +core.Sprite.prototype.hitTest = core.Sprite.prototype.containsPoint; -core.Graphics.prototype.hitTest = function( point ) -{ - this.worldTransform.applyInverse(point, tempPoint); - - var graphicsData = this.graphicsData; - - for (var i = 0; i < graphicsData.length; i++) - { - var data = graphicsData[i]; - - if (!data.fill) - { - continue; - } - - // only deal with fills.. - if (data.shape) - { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) - { - return true; - } - } - } - - return false; -}; +core.Graphics.prototype.hitTest = core.Graphics.prototype.containsPoint; module.exports = {}; diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index 86cdf2f..66162a9 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -5,7 +5,8 @@ CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'), GraphicsData = require('./GraphicsData'), math = require('../math'), - CONST = require('../const'); + CONST = require('../const'), + tempPoint = new math.Point(); /** * The Graphics class contains methods used to draw primitive shapes such as lines, circles and @@ -889,6 +890,40 @@ }; /** +* Tests if a point is inside this graphics object +* +* @param point {Point} the point to test +* @return {boolean} the result of the test +*/ +Graphics.prototype.containsPoint = function( point ) +{ + this.worldTransform.applyInverse(point, tempPoint); + + var graphicsData = this.graphicsData; + + for (var i = 0; i < graphicsData.length; i++) + { + var data = graphicsData[i]; + + if (!data.fill) + { + continue; + } + + // only deal with fills.. + if (data.shape) + { + if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) + { + return true; + } + } + } + + return false; +}; + +/** * Update the bounds of the object * */ diff --git a/src/core/renderers/webgl/managers/StencilManager.js b/src/core/renderers/webgl/managers/StencilManager.js index 7b7de67..4dc4cc3 100644 --- a/src/core/renderers/webgl/managers/StencilManager.js +++ b/src/core/renderers/webgl/managers/StencilManager.js @@ -40,7 +40,7 @@ */ WebGLMaskManager.prototype.pushStencil = function (graphics, webGLData) { - this.renderer.currentRenderTarget.attachStenilBuffer(); + this.renderer.currentRenderTarget.attachStencilBuffer(); var gl = this.renderer.gl, sms = this.stencilMaskStack; diff --git a/src/core/renderers/webgl/utils/RenderTarget.js b/src/core/renderers/webgl/utils/RenderTarget.js index 14f9830..24585ed 100644 --- a/src/core/renderers/webgl/utils/RenderTarget.js +++ b/src/core/renderers/webgl/utils/RenderTarget.js @@ -129,7 +129,7 @@ gl.clear(gl.COLOR_BUFFER_BIT); }; -RenderTarget.prototype.attachStenilBuffer = function() +RenderTarget.prototype.attachStencilBuffer = function() { if ( this.stencilBuffer ) diff --git a/src/core/sprites/Sprite.js b/src/core/sprites/Sprite.js index 75cdd8e..127d3cf 100644 --- a/src/core/sprites/Sprite.js +++ b/src/core/sprites/Sprite.js @@ -3,7 +3,8 @@ Container = require('../display/Container'), CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'), utils = require('../utils'), - CONST = require('../const'); + CONST = require('../const'), + tempPoint = new math.Point(); /** * The Sprite object is the base for all textured objects that are rendered to the screen @@ -11,7 +12,7 @@ * A sprite can be created directly from an image like this: * * ```js - * var sprite = new Sprite.fromImage('assets/image.png'); + * var sprite = new PIXI.Sprite.fromImage('assets/image.png'); * ``` * * @class Sprite @@ -80,6 +81,11 @@ */ this.shader = null; + /** + * An internal cached value of the tint. + * + * @member {number} + */ this.cachedTint = 0xFFFFFF; // call texture setter @@ -322,6 +328,34 @@ }; /** +* Tests if a point is inside this sprite +* +* @param point {Point} the point to test +* @return {boolean} the result of the test +*/ +Sprite.prototype.containsPoint = function( point ) +{ + this.worldTransform.applyInverse(point, tempPoint); + + var width = this._texture._frame.width; + var height = this._texture._frame.height; + var x1 = -width * this.anchor.x; + var y1; + + if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) + { + y1 = -height * this.anchor.y; + + if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) + { + return true; + } + } + + return false; +}; + +/** * Renders the object using the Canvas renderer * * @param renderer {CanvasRenderer} The renderer diff --git a/src/interaction/interactiveTarget.js b/src/interaction/interactiveTarget.js index 9a0f4fb..96c57f0 100644 --- a/src/interaction/interactiveTarget.js +++ b/src/interaction/interactiveTarget.js @@ -1,6 +1,5 @@ var core = require('../core'); -var tempPoint = new core.math.Point(); core.DisplayObject.prototype.interactive = false; core.DisplayObject.prototype.buttonMode = false; @@ -11,55 +10,10 @@ core.DisplayObject.prototype._over = false; core.DisplayObject.prototype._touchDown = false; -core.Sprite.prototype.hitTest = function( point ) -{ - this.worldTransform.applyInverse(point, tempPoint); - var width = this._texture._frame.width; - var height = this._texture._frame.height; - var x1 = -width * this.anchor.x; - var y1; - - if ( tempPoint.x > x1 && tempPoint.x < x1 + width ) - { - y1 = -height * this.anchor.y; - - if ( tempPoint.y > y1 && tempPoint.y < y1 + height ) - { - return true; - } - } - - return false; -}; +core.Sprite.prototype.hitTest = core.Sprite.prototype.containsPoint; -core.Graphics.prototype.hitTest = function( point ) -{ - this.worldTransform.applyInverse(point, tempPoint); - - var graphicsData = this.graphicsData; - - for (var i = 0; i < graphicsData.length; i++) - { - var data = graphicsData[i]; - - if (!data.fill) - { - continue; - } - - // only deal with fills.. - if (data.shape) - { - if ( data.shape.contains( tempPoint.x, tempPoint.y ) ) - { - return true; - } - } - } - - return false; -}; +core.Graphics.prototype.hitTest = core.Graphics.prototype.containsPoint; module.exports = {}; diff --git a/src/text/Text.js b/src/text/Text.js index 08d9c7f..e306986 100644 --- a/src/text/Text.js +++ b/src/text/Text.js @@ -4,6 +4,12 @@ * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. * + * A Text can be created directly from a string and a style object + * + * ```js + * var text = new PIXI.Text('This is a pixi text',{font : '24px Arial', fill : 0xff1010, align : 'center'}); + * ``` + * * @class * @extends Sprite * @memberof PIXI.text @@ -16,6 +22,7 @@ * @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.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 @@ -131,6 +138,7 @@ * @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} 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 @@ -199,10 +207,10 @@ // preserve original text var outputText = style.wordWrap ? this.wordWrap(this._text) : this._text; - //split text into lines + // split text into lines var lines = outputText.split(/(?:\r\n|\r|\n)/); - //calculate text width + // calculate text width var lineWidths = new Array(lines.length); var maxLineWidth = 0; var fontProperties = this.determineFontProperties(style.font); @@ -221,8 +229,8 @@ this.canvas.width = ( width + this.context.lineWidth ) * this.resolution; - //calculate text height - var lineHeight = fontProperties.fontSize + style.strokeThickness; + // calculate text height + var lineHeight = this.style.lineHeight || fontProperties.fontSize* + style.strokeThickness; var height = lineHeight * lines.length; if (style.dropShadow) @@ -384,7 +392,7 @@ context.font = fontStyle; - var width = Math.ceil(context.measureText('|M�q').width); + var width = Math.ceil(context.measureText('|MÉq').width); var baseline = Math.ceil(context.measureText('M').width); var height = 2 * baseline; @@ -400,7 +408,7 @@ context.textBaseline = 'alphabetic'; context.fillStyle = '#000'; - context.fillText('|M�q', 0, baseline); + context.fillText('|MÉq', 0, baseline); var imagedata = context.getImageData(0, 0, width, height).data; var pixels = imagedata.length;