diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js deleted file mode 100644 index b8edfcc..0000000 --- a/src/pixi/core/Rectangle.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ - */ - -/** - * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. - * - * @class Rectangle - * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle - * @param width {Number} The overall width of this rectangle - * @param height {Number} The overall height of this rectangle - */ -PIXI.Rectangle = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Rectangle - * - * @method clone - * @return {Rectangle} a copy of the rectangle - */ -PIXI.Rectangle.prototype.clone = function() -{ - return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle - */ -PIXI.Rectangle.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - var x1 = this.x; - if(x >= x1 && x <= x1 + this.width) - { - var y1 = this.y; - - if(y >= y1 && y <= y1 + this.height) - { - return true; - } - } - - return false; -}; - -// constructor -PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; - -PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js deleted file mode 100644 index b8edfcc..0000000 --- a/src/pixi/core/Rectangle.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ - */ - -/** - * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. - * - * @class Rectangle - * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle - * @param width {Number} The overall width of this rectangle - * @param height {Number} The overall height of this rectangle - */ -PIXI.Rectangle = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Rectangle - * - * @method clone - * @return {Rectangle} a copy of the rectangle - */ -PIXI.Rectangle.prototype.clone = function() -{ - return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle - */ -PIXI.Rectangle.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - var x1 = this.x; - if(x >= x1 && x <= x1 + this.width) - { - var y1 = this.y; - - if(y >= y1 && y <= y1 + this.height) - { - return true; - } - } - - return false; -}; - -// constructor -PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; - -PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index 81e519b..be0e872 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -479,8 +479,8 @@ // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; } // concat the parent matrix with the objects transform. diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js deleted file mode 100644 index b8edfcc..0000000 --- a/src/pixi/core/Rectangle.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ - */ - -/** - * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. - * - * @class Rectangle - * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle - * @param width {Number} The overall width of this rectangle - * @param height {Number} The overall height of this rectangle - */ -PIXI.Rectangle = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Rectangle - * - * @method clone - * @return {Rectangle} a copy of the rectangle - */ -PIXI.Rectangle.prototype.clone = function() -{ - return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle - */ -PIXI.Rectangle.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - var x1 = this.x; - if(x >= x1 && x <= x1 + this.width) - { - var y1 = this.y; - - if(y >= y1 && y <= y1 + this.height) - { - return true; - } - } - - return false; -}; - -// constructor -PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; - -PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index 81e519b..be0e872 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -479,8 +479,8 @@ // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; } // concat the parent matrix with the objects transform. diff --git a/src/pixi/geom/Circle.js b/src/pixi/geom/Circle.js new file mode 100644 index 0000000..cc39a28 --- /dev/null +++ b/src/pixi/geom/Circle.js @@ -0,0 +1,85 @@ +/** + * @author Chad Engler + */ + +/** + * The Circle object can be used to specify a hit area for displayObjects + * + * @class Circle + * @constructor + * @param x {Number} The X coordinate of the center of this circle + * @param y {Number} The Y coordinate of the center of this circle + * @param radius {Number} The radius of the circle + */ +PIXI.Circle = function(x, y, radius) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property radius + * @type Number + * @default 0 + */ + this.radius = radius || 0; +}; + +/** + * Creates a clone of this Circle instance + * + * @method clone + * @return {Circle} a copy of the polygon + */ +PIXI.Circle.prototype.clone = function() +{ + return new PIXI.Circle(this.x, this.y, this.radius); +}; + +/** + * Checks whether the x, and y coordinates passed to this function are contained within this circle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Circle.prototype.contains = function(x, y) +{ + if(this.radius <= 0) + return false; + + var dx = (this.x - x), + dy = (this.y - y), + r2 = this.radius * this.radius; + + dx *= dx; + dy *= dy; + + return (dx + dy <= r2); +}; + +/** +* Returns the framing rectangle of the circle as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Circle.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); +}; + +// constructor +PIXI.Circle.prototype.constructor = PIXI.Circle; + diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js deleted file mode 100644 index b8edfcc..0000000 --- a/src/pixi/core/Rectangle.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ - */ - -/** - * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. - * - * @class Rectangle - * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle - * @param width {Number} The overall width of this rectangle - * @param height {Number} The overall height of this rectangle - */ -PIXI.Rectangle = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Rectangle - * - * @method clone - * @return {Rectangle} a copy of the rectangle - */ -PIXI.Rectangle.prototype.clone = function() -{ - return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle - */ -PIXI.Rectangle.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - var x1 = this.x; - if(x >= x1 && x <= x1 + this.width) - { - var y1 = this.y; - - if(y >= y1 && y <= y1 + this.height) - { - return true; - } - } - - return false; -}; - -// constructor -PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; - -PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index 81e519b..be0e872 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -479,8 +479,8 @@ // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; } // concat the parent matrix with the objects transform. diff --git a/src/pixi/geom/Circle.js b/src/pixi/geom/Circle.js new file mode 100644 index 0000000..cc39a28 --- /dev/null +++ b/src/pixi/geom/Circle.js @@ -0,0 +1,85 @@ +/** + * @author Chad Engler + */ + +/** + * The Circle object can be used to specify a hit area for displayObjects + * + * @class Circle + * @constructor + * @param x {Number} The X coordinate of the center of this circle + * @param y {Number} The Y coordinate of the center of this circle + * @param radius {Number} The radius of the circle + */ +PIXI.Circle = function(x, y, radius) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property radius + * @type Number + * @default 0 + */ + this.radius = radius || 0; +}; + +/** + * Creates a clone of this Circle instance + * + * @method clone + * @return {Circle} a copy of the polygon + */ +PIXI.Circle.prototype.clone = function() +{ + return new PIXI.Circle(this.x, this.y, this.radius); +}; + +/** + * Checks whether the x, and y coordinates passed to this function are contained within this circle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Circle.prototype.contains = function(x, y) +{ + if(this.radius <= 0) + return false; + + var dx = (this.x - x), + dy = (this.y - y), + r2 = this.radius * this.radius; + + dx *= dx; + dy *= dy; + + return (dx + dy <= r2); +}; + +/** +* Returns the framing rectangle of the circle as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Circle.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); +}; + +// constructor +PIXI.Circle.prototype.constructor = PIXI.Circle; + diff --git a/src/pixi/geom/Ellipse.js b/src/pixi/geom/Ellipse.js new file mode 100644 index 0000000..b376333 --- /dev/null +++ b/src/pixi/geom/Ellipse.js @@ -0,0 +1,92 @@ +/** + * @author Chad Engler + */ + +/** + * The Ellipse object can be used to specify a hit area for displayObjects + * + * @class Ellipse + * @constructor + * @param x {Number} The X coordinate of the center of the ellipse + * @param y {Number} The Y coordinate of the center of the ellipse + * @param width {Number} The half width of this ellipse + * @param height {Number} The half height of this ellipse + */ +PIXI.Ellipse = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Ellipse instance + * + * @method clone + * @return {Ellipse} a copy of the ellipse + */ +PIXI.Ellipse.prototype.clone = function() +{ + return new PIXI.Ellipse(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this ellipse + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this ellipse + */ +PIXI.Ellipse.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + //normalize the coords to an ellipse with center 0,0 + var normx = ((x - this.x) / this.width), + normy = ((y - this.y) / this.height); + + normx *= normx; + normy *= normy; + + return (normx + normy <= 1); +}; + +/** +* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Ellipse.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); +}; + +// constructor +PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js deleted file mode 100644 index b8edfcc..0000000 --- a/src/pixi/core/Rectangle.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ - */ - -/** - * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. - * - * @class Rectangle - * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle - * @param width {Number} The overall width of this rectangle - * @param height {Number} The overall height of this rectangle - */ -PIXI.Rectangle = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Rectangle - * - * @method clone - * @return {Rectangle} a copy of the rectangle - */ -PIXI.Rectangle.prototype.clone = function() -{ - return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle - */ -PIXI.Rectangle.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - var x1 = this.x; - if(x >= x1 && x <= x1 + this.width) - { - var y1 = this.y; - - if(y >= y1 && y <= y1 + this.height) - { - return true; - } - } - - return false; -}; - -// constructor -PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; - -PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index 81e519b..be0e872 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -479,8 +479,8 @@ // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; } // concat the parent matrix with the objects transform. diff --git a/src/pixi/geom/Circle.js b/src/pixi/geom/Circle.js new file mode 100644 index 0000000..cc39a28 --- /dev/null +++ b/src/pixi/geom/Circle.js @@ -0,0 +1,85 @@ +/** + * @author Chad Engler + */ + +/** + * The Circle object can be used to specify a hit area for displayObjects + * + * @class Circle + * @constructor + * @param x {Number} The X coordinate of the center of this circle + * @param y {Number} The Y coordinate of the center of this circle + * @param radius {Number} The radius of the circle + */ +PIXI.Circle = function(x, y, radius) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property radius + * @type Number + * @default 0 + */ + this.radius = radius || 0; +}; + +/** + * Creates a clone of this Circle instance + * + * @method clone + * @return {Circle} a copy of the polygon + */ +PIXI.Circle.prototype.clone = function() +{ + return new PIXI.Circle(this.x, this.y, this.radius); +}; + +/** + * Checks whether the x, and y coordinates passed to this function are contained within this circle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Circle.prototype.contains = function(x, y) +{ + if(this.radius <= 0) + return false; + + var dx = (this.x - x), + dy = (this.y - y), + r2 = this.radius * this.radius; + + dx *= dx; + dy *= dy; + + return (dx + dy <= r2); +}; + +/** +* Returns the framing rectangle of the circle as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Circle.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); +}; + +// constructor +PIXI.Circle.prototype.constructor = PIXI.Circle; + diff --git a/src/pixi/geom/Ellipse.js b/src/pixi/geom/Ellipse.js new file mode 100644 index 0000000..b376333 --- /dev/null +++ b/src/pixi/geom/Ellipse.js @@ -0,0 +1,92 @@ +/** + * @author Chad Engler + */ + +/** + * The Ellipse object can be used to specify a hit area for displayObjects + * + * @class Ellipse + * @constructor + * @param x {Number} The X coordinate of the center of the ellipse + * @param y {Number} The Y coordinate of the center of the ellipse + * @param width {Number} The half width of this ellipse + * @param height {Number} The half height of this ellipse + */ +PIXI.Ellipse = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Ellipse instance + * + * @method clone + * @return {Ellipse} a copy of the ellipse + */ +PIXI.Ellipse.prototype.clone = function() +{ + return new PIXI.Ellipse(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this ellipse + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this ellipse + */ +PIXI.Ellipse.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + //normalize the coords to an ellipse with center 0,0 + var normx = ((x - this.x) / this.width), + normy = ((y - this.y) / this.height); + + normx *= normx; + normy *= normy; + + return (normx + normy <= 1); +}; + +/** +* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Ellipse.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); +}; + +// constructor +PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/geom/Matrix.js b/src/pixi/geom/Matrix.js new file mode 100644 index 0000000..5e73cdd --- /dev/null +++ b/src/pixi/geom/Matrix.js @@ -0,0 +1,216 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Matrix class is now an object, which makes it a lot faster, + * here is a representation of it : + * | a | b | tx| + * | c | d | ty| + * | 0 | 0 | 1 | + * + * @class Matrix + * @constructor + */ +PIXI.Matrix = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +/** + * Creates a pixi matrix object based on the array given as a parameter + * + * @method fromArray + * @param array {Array} The array that the matrix will be filled with + */ +PIXI.Matrix.prototype.fromArray = function(array) +{ + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; +}; + +/** + * Creates an array from the current Matrix object + * + * @method toArray + * @param transpose {Boolean} Whether we need to transpose the matrix or not + * @return {Array} the newly created array which contains the matrix + */ +PIXI.Matrix.prototype.toArray = function(transpose) +{ + if(!this.array) this.array = new PIXI.Float32Array(9); + var array = this.array; + + if(transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } + + return array; +}; + +/** + * Get a new position with the current transormation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, transformed trough this matrix + */ +PIXI.Matrix.prototype.apply = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + newPos.x = this.a * pos.x + this.b * pos.y + this.tx; + newPos.y = this.c * pos.x + this.d * pos.y + this.ty; + + return newPos; +}; + +/** + * Get a new position with the inverse of the current transormation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, inverse-transformed trough this matrix + */ +PIXI.Matrix.prototype.applyInverse = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + var id = 1 / (this.a * this.d + this.b * -this.c); + newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; + newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; + + return newPos; +}; + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.translate = function(x, y) +{ + this.tx += x; + this.ty += y; + + return this; +}; + +/** + * Applies a scale transformation to the matrix. + * @method scale + * @param {Number} x The amount to scale horizontally + * @param {Number} y The amount to scale vertically + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.scale = function(x, y) +{ + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; + + return this; +}; + + +/** + * Applies a rotation transformation to the matrix. + * @method rotate + * @param {Number} angle The angle in radians. + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.rotate = function(angle) +{ + var cos = Math.cos( angle ); + var sin = Math.sin( angle ); + + var a1 = this.a; + var c1 = this.c; + var tx1 = this.tx; + + this.a = a1 * cos-this.b * sin; + this.b = a1 * sin+this.b * cos; + this.c = c1 * cos-this.d * sin; + this.d = c1 * sin+this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; + + return this; +}; + + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.append = function(matrix) +{ + var a1 = this.a; + var b1 = this.b; + var c1 = this.c; + var d1 = this.d; + + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; + + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + + return this; +}; + +PIXI.Matrix.prototype.identity = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js deleted file mode 100644 index b8edfcc..0000000 --- a/src/pixi/core/Rectangle.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ - */ - -/** - * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. - * - * @class Rectangle - * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle - * @param width {Number} The overall width of this rectangle - * @param height {Number} The overall height of this rectangle - */ -PIXI.Rectangle = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Rectangle - * - * @method clone - * @return {Rectangle} a copy of the rectangle - */ -PIXI.Rectangle.prototype.clone = function() -{ - return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle - */ -PIXI.Rectangle.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - var x1 = this.x; - if(x >= x1 && x <= x1 + this.width) - { - var y1 = this.y; - - if(y >= y1 && y <= y1 + this.height) - { - return true; - } - } - - return false; -}; - -// constructor -PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; - -PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index 81e519b..be0e872 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -479,8 +479,8 @@ // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; } // concat the parent matrix with the objects transform. diff --git a/src/pixi/geom/Circle.js b/src/pixi/geom/Circle.js new file mode 100644 index 0000000..cc39a28 --- /dev/null +++ b/src/pixi/geom/Circle.js @@ -0,0 +1,85 @@ +/** + * @author Chad Engler + */ + +/** + * The Circle object can be used to specify a hit area for displayObjects + * + * @class Circle + * @constructor + * @param x {Number} The X coordinate of the center of this circle + * @param y {Number} The Y coordinate of the center of this circle + * @param radius {Number} The radius of the circle + */ +PIXI.Circle = function(x, y, radius) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property radius + * @type Number + * @default 0 + */ + this.radius = radius || 0; +}; + +/** + * Creates a clone of this Circle instance + * + * @method clone + * @return {Circle} a copy of the polygon + */ +PIXI.Circle.prototype.clone = function() +{ + return new PIXI.Circle(this.x, this.y, this.radius); +}; + +/** + * Checks whether the x, and y coordinates passed to this function are contained within this circle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Circle.prototype.contains = function(x, y) +{ + if(this.radius <= 0) + return false; + + var dx = (this.x - x), + dy = (this.y - y), + r2 = this.radius * this.radius; + + dx *= dx; + dy *= dy; + + return (dx + dy <= r2); +}; + +/** +* Returns the framing rectangle of the circle as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Circle.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); +}; + +// constructor +PIXI.Circle.prototype.constructor = PIXI.Circle; + diff --git a/src/pixi/geom/Ellipse.js b/src/pixi/geom/Ellipse.js new file mode 100644 index 0000000..b376333 --- /dev/null +++ b/src/pixi/geom/Ellipse.js @@ -0,0 +1,92 @@ +/** + * @author Chad Engler + */ + +/** + * The Ellipse object can be used to specify a hit area for displayObjects + * + * @class Ellipse + * @constructor + * @param x {Number} The X coordinate of the center of the ellipse + * @param y {Number} The Y coordinate of the center of the ellipse + * @param width {Number} The half width of this ellipse + * @param height {Number} The half height of this ellipse + */ +PIXI.Ellipse = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Ellipse instance + * + * @method clone + * @return {Ellipse} a copy of the ellipse + */ +PIXI.Ellipse.prototype.clone = function() +{ + return new PIXI.Ellipse(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this ellipse + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this ellipse + */ +PIXI.Ellipse.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + //normalize the coords to an ellipse with center 0,0 + var normx = ((x - this.x) / this.width), + normy = ((y - this.y) / this.height); + + normx *= normx; + normy *= normy; + + return (normx + normy <= 1); +}; + +/** +* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Ellipse.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); +}; + +// constructor +PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/geom/Matrix.js b/src/pixi/geom/Matrix.js new file mode 100644 index 0000000..5e73cdd --- /dev/null +++ b/src/pixi/geom/Matrix.js @@ -0,0 +1,216 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Matrix class is now an object, which makes it a lot faster, + * here is a representation of it : + * | a | b | tx| + * | c | d | ty| + * | 0 | 0 | 1 | + * + * @class Matrix + * @constructor + */ +PIXI.Matrix = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +/** + * Creates a pixi matrix object based on the array given as a parameter + * + * @method fromArray + * @param array {Array} The array that the matrix will be filled with + */ +PIXI.Matrix.prototype.fromArray = function(array) +{ + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; +}; + +/** + * Creates an array from the current Matrix object + * + * @method toArray + * @param transpose {Boolean} Whether we need to transpose the matrix or not + * @return {Array} the newly created array which contains the matrix + */ +PIXI.Matrix.prototype.toArray = function(transpose) +{ + if(!this.array) this.array = new PIXI.Float32Array(9); + var array = this.array; + + if(transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } + + return array; +}; + +/** + * Get a new position with the current transormation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, transformed trough this matrix + */ +PIXI.Matrix.prototype.apply = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + newPos.x = this.a * pos.x + this.b * pos.y + this.tx; + newPos.y = this.c * pos.x + this.d * pos.y + this.ty; + + return newPos; +}; + +/** + * Get a new position with the inverse of the current transormation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, inverse-transformed trough this matrix + */ +PIXI.Matrix.prototype.applyInverse = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + var id = 1 / (this.a * this.d + this.b * -this.c); + newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; + newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; + + return newPos; +}; + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.translate = function(x, y) +{ + this.tx += x; + this.ty += y; + + return this; +}; + +/** + * Applies a scale transformation to the matrix. + * @method scale + * @param {Number} x The amount to scale horizontally + * @param {Number} y The amount to scale vertically + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.scale = function(x, y) +{ + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; + + return this; +}; + + +/** + * Applies a rotation transformation to the matrix. + * @method rotate + * @param {Number} angle The angle in radians. + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.rotate = function(angle) +{ + var cos = Math.cos( angle ); + var sin = Math.sin( angle ); + + var a1 = this.a; + var c1 = this.c; + var tx1 = this.tx; + + this.a = a1 * cos-this.b * sin; + this.b = a1 * sin+this.b * cos; + this.c = c1 * cos-this.d * sin; + this.d = c1 * sin+this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; + + return this; +}; + + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.append = function(matrix) +{ + var a1 = this.a; + var b1 = this.b; + var c1 = this.c; + var d1 = this.d; + + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; + + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + + return this; +}; + +PIXI.Matrix.prototype.identity = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/geom/Point.js b/src/pixi/geom/Point.js new file mode 100644 index 0000000..202bc2f --- /dev/null +++ b/src/pixi/geom/Point.js @@ -0,0 +1,56 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. + * + * @class Point + * @constructor + * @param x {Number} position of the point on the x axis + * @param y {Number} position of the point on the y axis + */ +PIXI.Point = function(x, y) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; +}; + +/** + * Creates a clone of this point + * + * @method clone + * @return {Point} a copy of the point + */ +PIXI.Point.prototype.clone = function() +{ + return new PIXI.Point(this.x, this.y); +}; + +/** + * Sets the point to a new x and y position. + * If y is ommited, both x and y will be set to x. + * + * @method set + * @param [x=0] {Number} position of the point on the x axis + * @param [y=0] {Number} position of the point on the y axis + */ +PIXI.Point.prototype.set = function(x, y) +{ + this.x = x || 0; + this.y = y || ( (y !== 0) ? this.x : 0 ) ; +}; + +// constructor +PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js deleted file mode 100644 index b8edfcc..0000000 --- a/src/pixi/core/Rectangle.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ - */ - -/** - * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. - * - * @class Rectangle - * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle - * @param width {Number} The overall width of this rectangle - * @param height {Number} The overall height of this rectangle - */ -PIXI.Rectangle = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Rectangle - * - * @method clone - * @return {Rectangle} a copy of the rectangle - */ -PIXI.Rectangle.prototype.clone = function() -{ - return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle - */ -PIXI.Rectangle.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - var x1 = this.x; - if(x >= x1 && x <= x1 + this.width) - { - var y1 = this.y; - - if(y >= y1 && y <= y1 + this.height) - { - return true; - } - } - - return false; -}; - -// constructor -PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; - -PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index 81e519b..be0e872 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -479,8 +479,8 @@ // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; } // concat the parent matrix with the objects transform. diff --git a/src/pixi/geom/Circle.js b/src/pixi/geom/Circle.js new file mode 100644 index 0000000..cc39a28 --- /dev/null +++ b/src/pixi/geom/Circle.js @@ -0,0 +1,85 @@ +/** + * @author Chad Engler + */ + +/** + * The Circle object can be used to specify a hit area for displayObjects + * + * @class Circle + * @constructor + * @param x {Number} The X coordinate of the center of this circle + * @param y {Number} The Y coordinate of the center of this circle + * @param radius {Number} The radius of the circle + */ +PIXI.Circle = function(x, y, radius) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property radius + * @type Number + * @default 0 + */ + this.radius = radius || 0; +}; + +/** + * Creates a clone of this Circle instance + * + * @method clone + * @return {Circle} a copy of the polygon + */ +PIXI.Circle.prototype.clone = function() +{ + return new PIXI.Circle(this.x, this.y, this.radius); +}; + +/** + * Checks whether the x, and y coordinates passed to this function are contained within this circle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Circle.prototype.contains = function(x, y) +{ + if(this.radius <= 0) + return false; + + var dx = (this.x - x), + dy = (this.y - y), + r2 = this.radius * this.radius; + + dx *= dx; + dy *= dy; + + return (dx + dy <= r2); +}; + +/** +* Returns the framing rectangle of the circle as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Circle.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); +}; + +// constructor +PIXI.Circle.prototype.constructor = PIXI.Circle; + diff --git a/src/pixi/geom/Ellipse.js b/src/pixi/geom/Ellipse.js new file mode 100644 index 0000000..b376333 --- /dev/null +++ b/src/pixi/geom/Ellipse.js @@ -0,0 +1,92 @@ +/** + * @author Chad Engler + */ + +/** + * The Ellipse object can be used to specify a hit area for displayObjects + * + * @class Ellipse + * @constructor + * @param x {Number} The X coordinate of the center of the ellipse + * @param y {Number} The Y coordinate of the center of the ellipse + * @param width {Number} The half width of this ellipse + * @param height {Number} The half height of this ellipse + */ +PIXI.Ellipse = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Ellipse instance + * + * @method clone + * @return {Ellipse} a copy of the ellipse + */ +PIXI.Ellipse.prototype.clone = function() +{ + return new PIXI.Ellipse(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this ellipse + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this ellipse + */ +PIXI.Ellipse.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + //normalize the coords to an ellipse with center 0,0 + var normx = ((x - this.x) / this.width), + normy = ((y - this.y) / this.height); + + normx *= normx; + normy *= normy; + + return (normx + normy <= 1); +}; + +/** +* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Ellipse.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); +}; + +// constructor +PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/geom/Matrix.js b/src/pixi/geom/Matrix.js new file mode 100644 index 0000000..5e73cdd --- /dev/null +++ b/src/pixi/geom/Matrix.js @@ -0,0 +1,216 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Matrix class is now an object, which makes it a lot faster, + * here is a representation of it : + * | a | b | tx| + * | c | d | ty| + * | 0 | 0 | 1 | + * + * @class Matrix + * @constructor + */ +PIXI.Matrix = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +/** + * Creates a pixi matrix object based on the array given as a parameter + * + * @method fromArray + * @param array {Array} The array that the matrix will be filled with + */ +PIXI.Matrix.prototype.fromArray = function(array) +{ + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; +}; + +/** + * Creates an array from the current Matrix object + * + * @method toArray + * @param transpose {Boolean} Whether we need to transpose the matrix or not + * @return {Array} the newly created array which contains the matrix + */ +PIXI.Matrix.prototype.toArray = function(transpose) +{ + if(!this.array) this.array = new PIXI.Float32Array(9); + var array = this.array; + + if(transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } + + return array; +}; + +/** + * Get a new position with the current transormation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, transformed trough this matrix + */ +PIXI.Matrix.prototype.apply = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + newPos.x = this.a * pos.x + this.b * pos.y + this.tx; + newPos.y = this.c * pos.x + this.d * pos.y + this.ty; + + return newPos; +}; + +/** + * Get a new position with the inverse of the current transormation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, inverse-transformed trough this matrix + */ +PIXI.Matrix.prototype.applyInverse = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + var id = 1 / (this.a * this.d + this.b * -this.c); + newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; + newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; + + return newPos; +}; + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.translate = function(x, y) +{ + this.tx += x; + this.ty += y; + + return this; +}; + +/** + * Applies a scale transformation to the matrix. + * @method scale + * @param {Number} x The amount to scale horizontally + * @param {Number} y The amount to scale vertically + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.scale = function(x, y) +{ + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; + + return this; +}; + + +/** + * Applies a rotation transformation to the matrix. + * @method rotate + * @param {Number} angle The angle in radians. + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.rotate = function(angle) +{ + var cos = Math.cos( angle ); + var sin = Math.sin( angle ); + + var a1 = this.a; + var c1 = this.c; + var tx1 = this.tx; + + this.a = a1 * cos-this.b * sin; + this.b = a1 * sin+this.b * cos; + this.c = c1 * cos-this.d * sin; + this.d = c1 * sin+this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; + + return this; +}; + + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.append = function(matrix) +{ + var a1 = this.a; + var b1 = this.b; + var c1 = this.c; + var d1 = this.d; + + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; + + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + + return this; +}; + +PIXI.Matrix.prototype.identity = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/geom/Point.js b/src/pixi/geom/Point.js new file mode 100644 index 0000000..202bc2f --- /dev/null +++ b/src/pixi/geom/Point.js @@ -0,0 +1,56 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. + * + * @class Point + * @constructor + * @param x {Number} position of the point on the x axis + * @param y {Number} position of the point on the y axis + */ +PIXI.Point = function(x, y) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; +}; + +/** + * Creates a clone of this point + * + * @method clone + * @return {Point} a copy of the point + */ +PIXI.Point.prototype.clone = function() +{ + return new PIXI.Point(this.x, this.y); +}; + +/** + * Sets the point to a new x and y position. + * If y is ommited, both x and y will be set to x. + * + * @method set + * @param [x=0] {Number} position of the point on the x axis + * @param [y=0] {Number} position of the point on the y axis + */ +PIXI.Point.prototype.set = function(x, y) +{ + this.x = x || 0; + this.y = y || ( (y !== 0) ? this.x : 0 ) ; +}; + +// constructor +PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/geom/Polygon.js b/src/pixi/geom/Polygon.js new file mode 100644 index 0000000..819d290 --- /dev/null +++ b/src/pixi/geom/Polygon.js @@ -0,0 +1,74 @@ +/** + * @author Adrien Brault + */ + +/** + * @class Polygon + * @constructor + * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, + * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be + * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the + * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are + * Numbers. + */ +PIXI.Polygon = function(points) +{ + //if points isn't an array, use arguments as the array + if(!(points instanceof Array))points = Array.prototype.slice.call(arguments); + + //if this is a flat array of numbers, convert it to points + if(points[0] instanceof PIXI.Point) + { + var p = []; + for(var i = 0, il = points.length; i < il; i++) + { + p.push(points[i].x, points[i].y); + } + + points = p; + } + + this.closed = true; + this.points = points; +}; + +/** + * Creates a clone of this polygon + * + * @method clone + * @return {Polygon} a copy of the polygon + */ +PIXI.Polygon.prototype.clone = function() +{ + var points = this.points.slice(); + return new PIXI.Polygon(points); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this polygon + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Polygon.prototype.contains = function(x, y) +{ + var inside = false; + + // use some raycasting to test hits + // https://github.com/substack/point-in-polygon/blob/master/index.js + for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) + { + var xi = this.points[i].x, yi = this.points[i].y, + xj = this.points[j].x, yj = this.points[j].y, + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + + if(intersect) inside = !inside; + } + + return inside; +}; + +// constructor +PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js deleted file mode 100644 index b8edfcc..0000000 --- a/src/pixi/core/Rectangle.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ - */ - -/** - * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. - * - * @class Rectangle - * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle - * @param width {Number} The overall width of this rectangle - * @param height {Number} The overall height of this rectangle - */ -PIXI.Rectangle = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Rectangle - * - * @method clone - * @return {Rectangle} a copy of the rectangle - */ -PIXI.Rectangle.prototype.clone = function() -{ - return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle - */ -PIXI.Rectangle.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - var x1 = this.x; - if(x >= x1 && x <= x1 + this.width) - { - var y1 = this.y; - - if(y >= y1 && y <= y1 + this.height) - { - return true; - } - } - - return false; -}; - -// constructor -PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; - -PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index 81e519b..be0e872 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -479,8 +479,8 @@ // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; } // concat the parent matrix with the objects transform. diff --git a/src/pixi/geom/Circle.js b/src/pixi/geom/Circle.js new file mode 100644 index 0000000..cc39a28 --- /dev/null +++ b/src/pixi/geom/Circle.js @@ -0,0 +1,85 @@ +/** + * @author Chad Engler + */ + +/** + * The Circle object can be used to specify a hit area for displayObjects + * + * @class Circle + * @constructor + * @param x {Number} The X coordinate of the center of this circle + * @param y {Number} The Y coordinate of the center of this circle + * @param radius {Number} The radius of the circle + */ +PIXI.Circle = function(x, y, radius) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property radius + * @type Number + * @default 0 + */ + this.radius = radius || 0; +}; + +/** + * Creates a clone of this Circle instance + * + * @method clone + * @return {Circle} a copy of the polygon + */ +PIXI.Circle.prototype.clone = function() +{ + return new PIXI.Circle(this.x, this.y, this.radius); +}; + +/** + * Checks whether the x, and y coordinates passed to this function are contained within this circle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Circle.prototype.contains = function(x, y) +{ + if(this.radius <= 0) + return false; + + var dx = (this.x - x), + dy = (this.y - y), + r2 = this.radius * this.radius; + + dx *= dx; + dy *= dy; + + return (dx + dy <= r2); +}; + +/** +* Returns the framing rectangle of the circle as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Circle.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); +}; + +// constructor +PIXI.Circle.prototype.constructor = PIXI.Circle; + diff --git a/src/pixi/geom/Ellipse.js b/src/pixi/geom/Ellipse.js new file mode 100644 index 0000000..b376333 --- /dev/null +++ b/src/pixi/geom/Ellipse.js @@ -0,0 +1,92 @@ +/** + * @author Chad Engler + */ + +/** + * The Ellipse object can be used to specify a hit area for displayObjects + * + * @class Ellipse + * @constructor + * @param x {Number} The X coordinate of the center of the ellipse + * @param y {Number} The Y coordinate of the center of the ellipse + * @param width {Number} The half width of this ellipse + * @param height {Number} The half height of this ellipse + */ +PIXI.Ellipse = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Ellipse instance + * + * @method clone + * @return {Ellipse} a copy of the ellipse + */ +PIXI.Ellipse.prototype.clone = function() +{ + return new PIXI.Ellipse(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this ellipse + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this ellipse + */ +PIXI.Ellipse.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + //normalize the coords to an ellipse with center 0,0 + var normx = ((x - this.x) / this.width), + normy = ((y - this.y) / this.height); + + normx *= normx; + normy *= normy; + + return (normx + normy <= 1); +}; + +/** +* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Ellipse.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); +}; + +// constructor +PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/geom/Matrix.js b/src/pixi/geom/Matrix.js new file mode 100644 index 0000000..5e73cdd --- /dev/null +++ b/src/pixi/geom/Matrix.js @@ -0,0 +1,216 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Matrix class is now an object, which makes it a lot faster, + * here is a representation of it : + * | a | b | tx| + * | c | d | ty| + * | 0 | 0 | 1 | + * + * @class Matrix + * @constructor + */ +PIXI.Matrix = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +/** + * Creates a pixi matrix object based on the array given as a parameter + * + * @method fromArray + * @param array {Array} The array that the matrix will be filled with + */ +PIXI.Matrix.prototype.fromArray = function(array) +{ + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; +}; + +/** + * Creates an array from the current Matrix object + * + * @method toArray + * @param transpose {Boolean} Whether we need to transpose the matrix or not + * @return {Array} the newly created array which contains the matrix + */ +PIXI.Matrix.prototype.toArray = function(transpose) +{ + if(!this.array) this.array = new PIXI.Float32Array(9); + var array = this.array; + + if(transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } + + return array; +}; + +/** + * Get a new position with the current transormation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, transformed trough this matrix + */ +PIXI.Matrix.prototype.apply = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + newPos.x = this.a * pos.x + this.b * pos.y + this.tx; + newPos.y = this.c * pos.x + this.d * pos.y + this.ty; + + return newPos; +}; + +/** + * Get a new position with the inverse of the current transormation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, inverse-transformed trough this matrix + */ +PIXI.Matrix.prototype.applyInverse = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + var id = 1 / (this.a * this.d + this.b * -this.c); + newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; + newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; + + return newPos; +}; + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.translate = function(x, y) +{ + this.tx += x; + this.ty += y; + + return this; +}; + +/** + * Applies a scale transformation to the matrix. + * @method scale + * @param {Number} x The amount to scale horizontally + * @param {Number} y The amount to scale vertically + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.scale = function(x, y) +{ + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; + + return this; +}; + + +/** + * Applies a rotation transformation to the matrix. + * @method rotate + * @param {Number} angle The angle in radians. + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.rotate = function(angle) +{ + var cos = Math.cos( angle ); + var sin = Math.sin( angle ); + + var a1 = this.a; + var c1 = this.c; + var tx1 = this.tx; + + this.a = a1 * cos-this.b * sin; + this.b = a1 * sin+this.b * cos; + this.c = c1 * cos-this.d * sin; + this.d = c1 * sin+this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; + + return this; +}; + + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.append = function(matrix) +{ + var a1 = this.a; + var b1 = this.b; + var c1 = this.c; + var d1 = this.d; + + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; + + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + + return this; +}; + +PIXI.Matrix.prototype.identity = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/geom/Point.js b/src/pixi/geom/Point.js new file mode 100644 index 0000000..202bc2f --- /dev/null +++ b/src/pixi/geom/Point.js @@ -0,0 +1,56 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. + * + * @class Point + * @constructor + * @param x {Number} position of the point on the x axis + * @param y {Number} position of the point on the y axis + */ +PIXI.Point = function(x, y) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; +}; + +/** + * Creates a clone of this point + * + * @method clone + * @return {Point} a copy of the point + */ +PIXI.Point.prototype.clone = function() +{ + return new PIXI.Point(this.x, this.y); +}; + +/** + * Sets the point to a new x and y position. + * If y is ommited, both x and y will be set to x. + * + * @method set + * @param [x=0] {Number} position of the point on the x axis + * @param [y=0] {Number} position of the point on the y axis + */ +PIXI.Point.prototype.set = function(x, y) +{ + this.x = x || 0; + this.y = y || ( (y !== 0) ? this.x : 0 ) ; +}; + +// constructor +PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/geom/Polygon.js b/src/pixi/geom/Polygon.js new file mode 100644 index 0000000..819d290 --- /dev/null +++ b/src/pixi/geom/Polygon.js @@ -0,0 +1,74 @@ +/** + * @author Adrien Brault + */ + +/** + * @class Polygon + * @constructor + * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, + * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be + * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the + * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are + * Numbers. + */ +PIXI.Polygon = function(points) +{ + //if points isn't an array, use arguments as the array + if(!(points instanceof Array))points = Array.prototype.slice.call(arguments); + + //if this is a flat array of numbers, convert it to points + if(points[0] instanceof PIXI.Point) + { + var p = []; + for(var i = 0, il = points.length; i < il; i++) + { + p.push(points[i].x, points[i].y); + } + + points = p; + } + + this.closed = true; + this.points = points; +}; + +/** + * Creates a clone of this polygon + * + * @method clone + * @return {Polygon} a copy of the polygon + */ +PIXI.Polygon.prototype.clone = function() +{ + var points = this.points.slice(); + return new PIXI.Polygon(points); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this polygon + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Polygon.prototype.contains = function(x, y) +{ + var inside = false; + + // use some raycasting to test hits + // https://github.com/substack/point-in-polygon/blob/master/index.js + for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) + { + var xi = this.points[i].x, yi = this.points[i].y, + xj = this.points[j].x, yj = this.points[j].y, + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + + if(intersect) inside = !inside; + } + + return inside; +}; + +// constructor +PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/geom/Rectangle.js b/src/pixi/geom/Rectangle.js new file mode 100644 index 0000000..b8edfcc --- /dev/null +++ b/src/pixi/geom/Rectangle.js @@ -0,0 +1,87 @@ +/** + * @author Mat Groves http://matgroves.com/ + */ + +/** + * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. + * + * @class Rectangle + * @constructor + * @param x {Number} The X coord of the upper-left corner of the rectangle + * @param y {Number} The Y coord of the upper-left corner of the rectangle + * @param width {Number} The overall width of this rectangle + * @param height {Number} The overall height of this rectangle + */ +PIXI.Rectangle = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Rectangle + * + * @method clone + * @return {Rectangle} a copy of the rectangle + */ +PIXI.Rectangle.prototype.clone = function() +{ + return new PIXI.Rectangle(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this Rectangle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this Rectangle + */ +PIXI.Rectangle.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + var x1 = this.x; + if(x >= x1 && x <= x1 + this.width) + { + var y1 = this.y; + + if(y >= y1 && y <= y1 + this.height) + { + return true; + } + } + + return false; +}; + +// constructor +PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; + +PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js deleted file mode 100644 index b8edfcc..0000000 --- a/src/pixi/core/Rectangle.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ - */ - -/** - * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. - * - * @class Rectangle - * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle - * @param width {Number} The overall width of this rectangle - * @param height {Number} The overall height of this rectangle - */ -PIXI.Rectangle = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Rectangle - * - * @method clone - * @return {Rectangle} a copy of the rectangle - */ -PIXI.Rectangle.prototype.clone = function() -{ - return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle - */ -PIXI.Rectangle.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - var x1 = this.x; - if(x >= x1 && x <= x1 + this.width) - { - var y1 = this.y; - - if(y >= y1 && y <= y1 + this.height) - { - return true; - } - } - - return false; -}; - -// constructor -PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; - -PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index 81e519b..be0e872 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -479,8 +479,8 @@ // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; } // concat the parent matrix with the objects transform. diff --git a/src/pixi/geom/Circle.js b/src/pixi/geom/Circle.js new file mode 100644 index 0000000..cc39a28 --- /dev/null +++ b/src/pixi/geom/Circle.js @@ -0,0 +1,85 @@ +/** + * @author Chad Engler + */ + +/** + * The Circle object can be used to specify a hit area for displayObjects + * + * @class Circle + * @constructor + * @param x {Number} The X coordinate of the center of this circle + * @param y {Number} The Y coordinate of the center of this circle + * @param radius {Number} The radius of the circle + */ +PIXI.Circle = function(x, y, radius) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property radius + * @type Number + * @default 0 + */ + this.radius = radius || 0; +}; + +/** + * Creates a clone of this Circle instance + * + * @method clone + * @return {Circle} a copy of the polygon + */ +PIXI.Circle.prototype.clone = function() +{ + return new PIXI.Circle(this.x, this.y, this.radius); +}; + +/** + * Checks whether the x, and y coordinates passed to this function are contained within this circle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Circle.prototype.contains = function(x, y) +{ + if(this.radius <= 0) + return false; + + var dx = (this.x - x), + dy = (this.y - y), + r2 = this.radius * this.radius; + + dx *= dx; + dy *= dy; + + return (dx + dy <= r2); +}; + +/** +* Returns the framing rectangle of the circle as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Circle.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); +}; + +// constructor +PIXI.Circle.prototype.constructor = PIXI.Circle; + diff --git a/src/pixi/geom/Ellipse.js b/src/pixi/geom/Ellipse.js new file mode 100644 index 0000000..b376333 --- /dev/null +++ b/src/pixi/geom/Ellipse.js @@ -0,0 +1,92 @@ +/** + * @author Chad Engler + */ + +/** + * The Ellipse object can be used to specify a hit area for displayObjects + * + * @class Ellipse + * @constructor + * @param x {Number} The X coordinate of the center of the ellipse + * @param y {Number} The Y coordinate of the center of the ellipse + * @param width {Number} The half width of this ellipse + * @param height {Number} The half height of this ellipse + */ +PIXI.Ellipse = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Ellipse instance + * + * @method clone + * @return {Ellipse} a copy of the ellipse + */ +PIXI.Ellipse.prototype.clone = function() +{ + return new PIXI.Ellipse(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this ellipse + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this ellipse + */ +PIXI.Ellipse.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + //normalize the coords to an ellipse with center 0,0 + var normx = ((x - this.x) / this.width), + normy = ((y - this.y) / this.height); + + normx *= normx; + normy *= normy; + + return (normx + normy <= 1); +}; + +/** +* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Ellipse.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); +}; + +// constructor +PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/geom/Matrix.js b/src/pixi/geom/Matrix.js new file mode 100644 index 0000000..5e73cdd --- /dev/null +++ b/src/pixi/geom/Matrix.js @@ -0,0 +1,216 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Matrix class is now an object, which makes it a lot faster, + * here is a representation of it : + * | a | b | tx| + * | c | d | ty| + * | 0 | 0 | 1 | + * + * @class Matrix + * @constructor + */ +PIXI.Matrix = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +/** + * Creates a pixi matrix object based on the array given as a parameter + * + * @method fromArray + * @param array {Array} The array that the matrix will be filled with + */ +PIXI.Matrix.prototype.fromArray = function(array) +{ + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; +}; + +/** + * Creates an array from the current Matrix object + * + * @method toArray + * @param transpose {Boolean} Whether we need to transpose the matrix or not + * @return {Array} the newly created array which contains the matrix + */ +PIXI.Matrix.prototype.toArray = function(transpose) +{ + if(!this.array) this.array = new PIXI.Float32Array(9); + var array = this.array; + + if(transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } + + return array; +}; + +/** + * Get a new position with the current transormation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, transformed trough this matrix + */ +PIXI.Matrix.prototype.apply = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + newPos.x = this.a * pos.x + this.b * pos.y + this.tx; + newPos.y = this.c * pos.x + this.d * pos.y + this.ty; + + return newPos; +}; + +/** + * Get a new position with the inverse of the current transormation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, inverse-transformed trough this matrix + */ +PIXI.Matrix.prototype.applyInverse = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + var id = 1 / (this.a * this.d + this.b * -this.c); + newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; + newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; + + return newPos; +}; + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.translate = function(x, y) +{ + this.tx += x; + this.ty += y; + + return this; +}; + +/** + * Applies a scale transformation to the matrix. + * @method scale + * @param {Number} x The amount to scale horizontally + * @param {Number} y The amount to scale vertically + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.scale = function(x, y) +{ + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; + + return this; +}; + + +/** + * Applies a rotation transformation to the matrix. + * @method rotate + * @param {Number} angle The angle in radians. + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.rotate = function(angle) +{ + var cos = Math.cos( angle ); + var sin = Math.sin( angle ); + + var a1 = this.a; + var c1 = this.c; + var tx1 = this.tx; + + this.a = a1 * cos-this.b * sin; + this.b = a1 * sin+this.b * cos; + this.c = c1 * cos-this.d * sin; + this.d = c1 * sin+this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; + + return this; +}; + + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.append = function(matrix) +{ + var a1 = this.a; + var b1 = this.b; + var c1 = this.c; + var d1 = this.d; + + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; + + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + + return this; +}; + +PIXI.Matrix.prototype.identity = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/geom/Point.js b/src/pixi/geom/Point.js new file mode 100644 index 0000000..202bc2f --- /dev/null +++ b/src/pixi/geom/Point.js @@ -0,0 +1,56 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. + * + * @class Point + * @constructor + * @param x {Number} position of the point on the x axis + * @param y {Number} position of the point on the y axis + */ +PIXI.Point = function(x, y) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; +}; + +/** + * Creates a clone of this point + * + * @method clone + * @return {Point} a copy of the point + */ +PIXI.Point.prototype.clone = function() +{ + return new PIXI.Point(this.x, this.y); +}; + +/** + * Sets the point to a new x and y position. + * If y is ommited, both x and y will be set to x. + * + * @method set + * @param [x=0] {Number} position of the point on the x axis + * @param [y=0] {Number} position of the point on the y axis + */ +PIXI.Point.prototype.set = function(x, y) +{ + this.x = x || 0; + this.y = y || ( (y !== 0) ? this.x : 0 ) ; +}; + +// constructor +PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/geom/Polygon.js b/src/pixi/geom/Polygon.js new file mode 100644 index 0000000..819d290 --- /dev/null +++ b/src/pixi/geom/Polygon.js @@ -0,0 +1,74 @@ +/** + * @author Adrien Brault + */ + +/** + * @class Polygon + * @constructor + * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, + * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be + * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the + * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are + * Numbers. + */ +PIXI.Polygon = function(points) +{ + //if points isn't an array, use arguments as the array + if(!(points instanceof Array))points = Array.prototype.slice.call(arguments); + + //if this is a flat array of numbers, convert it to points + if(points[0] instanceof PIXI.Point) + { + var p = []; + for(var i = 0, il = points.length; i < il; i++) + { + p.push(points[i].x, points[i].y); + } + + points = p; + } + + this.closed = true; + this.points = points; +}; + +/** + * Creates a clone of this polygon + * + * @method clone + * @return {Polygon} a copy of the polygon + */ +PIXI.Polygon.prototype.clone = function() +{ + var points = this.points.slice(); + return new PIXI.Polygon(points); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this polygon + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Polygon.prototype.contains = function(x, y) +{ + var inside = false; + + // use some raycasting to test hits + // https://github.com/substack/point-in-polygon/blob/master/index.js + for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) + { + var xi = this.points[i].x, yi = this.points[i].y, + xj = this.points[j].x, yj = this.points[j].y, + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + + if(intersect) inside = !inside; + } + + return inside; +}; + +// constructor +PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/geom/Rectangle.js b/src/pixi/geom/Rectangle.js new file mode 100644 index 0000000..b8edfcc --- /dev/null +++ b/src/pixi/geom/Rectangle.js @@ -0,0 +1,87 @@ +/** + * @author Mat Groves http://matgroves.com/ + */ + +/** + * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. + * + * @class Rectangle + * @constructor + * @param x {Number} The X coord of the upper-left corner of the rectangle + * @param y {Number} The Y coord of the upper-left corner of the rectangle + * @param width {Number} The overall width of this rectangle + * @param height {Number} The overall height of this rectangle + */ +PIXI.Rectangle = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Rectangle + * + * @method clone + * @return {Rectangle} a copy of the rectangle + */ +PIXI.Rectangle.prototype.clone = function() +{ + return new PIXI.Rectangle(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this Rectangle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this Rectangle + */ +PIXI.Rectangle.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + var x1 = this.x; + if(x >= x1 && x <= x1 + this.width) + { + var y1 = this.y; + + if(y >= y1 && y <= y1 + this.height) + { + return true; + } + } + + return false; +}; + +// constructor +PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; + +PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dc85b96..9efaff2 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -77,8 +77,10 @@ * @type Object * @private */ - this.currentPath = {points:[]}; + this.currentPath = null; + + /** * Array containing some WebGL-related properties used by the WebGL renderer * @@ -168,16 +170,25 @@ */ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - this.lineWidth = lineWidth || 0; this.lineColor = color || 0; this.lineAlpha = (arguments.length < 3) ? 1 : alpha; - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; + if(this.currentPath) + { + if(this.currentPath.shape.points.length) + { + // halfway through a line? start a new one! + this.drawShape( new PIXI.Polygon( this.currentPath.shape.points.slice(-2) )); + return this; + } - this.graphicsData.push(this.currentPath); + // otherwise its empty so lets just set the line properties + this.currentPath.lineWidth = this.lineWidth; + this.currentPath.lineColor = this.lineColor; + this.currentPath.lineAlpha = this.lineAlpha; + + } return this; }; @@ -191,14 +202,42 @@ */ PIXI.Graphics.prototype.moveTo = function(x, y) { - if (!this.currentPath.points.length) this.graphicsData.pop(); + this.drawShape(new PIXI.Polygon([x,y])); - this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; + /* + if(this.currentPath) + { + if(this.currentPath.shape.points.length > 2) + { + // halfway through a line? start a new one! + this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); + return this; + } + else + { + // reuse existing path! + this.currentPath.shape.points = [x,y]; + this.currentPath.lineWidth = this.lineWidth; + this.currentPath.lineColor = this.lineColor; + this.currentPath.lineAlpha = this.lineAlpha; - this.currentPath.points.push(x, y); + return this + } + } + + this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - this.graphicsData.push(this.currentPath); + this.currentPath.push(x, y); +`*/ + + // if (!this.currentPath.points.length) this.graphicsData.pop(); + + //// this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, + // fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; + + //this.currentPath.points.push(x, y); + + // this.graphicsData.push(this.currentPath); return this; }; @@ -213,7 +252,7 @@ */ PIXI.Graphics.prototype.lineTo = function(x, y) { - this.currentPath.points.push(x, y); + this.currentPath.shape.points.push(x, y); this.dirty = true; return this; @@ -232,12 +271,19 @@ */ PIXI.Graphics.prototype.quadraticCurveTo = function(cpX, cpY, toX, toY) { - if( this.currentPath.points.length === 0)this.moveTo(0,0); + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [0,0]; + } + else + { + this.moveTo(0,0); + } var xa, ya, n = 20, - points = this.currentPath.points; + points = this.currentPath.shape.points; if(points.length === 0)this.moveTo(0, 0); @@ -276,7 +322,14 @@ */ PIXI.Graphics.prototype.bezierCurveTo = function(cpX, cpY, cpX2, cpY2, toX, toY) { - if( this.currentPath.points.length === 0)this.moveTo(0,0); + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [0,0]; + } + else + { + this.moveTo(0,0); + } var n = 20, dt, @@ -284,7 +337,7 @@ dt3, t2, t3, - points = this.currentPath.points; + points = this.currentPath.shape.points; var fromX = points[points.length-2]; var fromY = points[points.length-1]; @@ -327,10 +380,19 @@ */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [x1, y1]; + } + else + { + this.moveTo(x1, y1); + } + // check that path contains subpaths - if( this.currentPath.points.length === 0)this.moveTo(x1, y1); + if( this.currentPath.length === 0)this.moveTo(x1, y1); - var points = this.currentPath.points; + var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; @@ -390,12 +452,12 @@ var startX = cx + Math.cos(startAngle) * radius; var startY = cy + Math.sin(startAngle) * radius; - var points = this.currentPath.points; + var points = this.currentPath.shape.points; if(points.length !== 0 && points[points.length-2] !== startX || points[points.length-1] !== startY) { this.moveTo(startX, startY); - points = this.currentPath.points; + points = this.currentPath.shape.points; } if (startAngle === endAngle)return this; @@ -443,28 +505,6 @@ return this; }; -/** - * Draws a line using the current line style from the current drawing position to (x, y); - * the current drawing position is then set to (x, y). - * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to - */ -PIXI.Graphics.prototype.drawPath = function(path) -{ - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; - - this.graphicsData.push(this.currentPath); - - this.currentPath.points = this.currentPath.points.concat(path); - this.dirty = true; - - return this; -}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -479,8 +519,17 @@ this.filling = true; this.fillColor = color || 0; - this.fillAlpha = (arguments.length < 2) ? 1 : alpha; + this.fillAlpha = (alpha === undefined) ? 1 : alpha; + if(this.currentPath) + { + if(this.currentPath.shape.points.length <= 2) + { + this.currentPath.fill = this.filling; + this.currentPath.fillColor = this.fillColor; + this.currentPath.fillAlpha = this.fillAlpha; + } + } return this; }; @@ -508,14 +557,7 @@ */ PIXI.Graphics.prototype.drawRect = function( x, y, width, height ) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height], type:PIXI.Graphics.RECT}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape(new PIXI.Rectangle(x,y, width, height)); return this; }; @@ -528,21 +570,21 @@ * @param width {Number} The width of the rectangle * @param height {Number} The height of the rectangle * @param radius {Number} Radius of the rectangle corners - */ + *//* PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) { if (!this.currentPath.points.length) this.graphicsData.pop(); - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height, radius], type:PIXI.Graphics.RREC}; + // this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, + /// fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, + // points:[x, y, width, height, radius], shape:new PIXI.Rectangle(x,y, width, height), type:PIXI.Graphics.RREC}; this.graphicsData.push(this.currentPath); this.dirty = true; return this; }; - +*/ /** * Draws a circle. * @@ -553,15 +595,7 @@ */ PIXI.Graphics.prototype.drawCircle = function(x, y, radius) { - - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, radius, radius], type:PIXI.Graphics.CIRC}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape(new PIXI.Circle(x,y, radius)); return this; }; @@ -577,16 +611,23 @@ */ PIXI.Graphics.prototype.drawEllipse = function(x, y, width, height) { + this.drawShape(new PIXI.Ellipse(x, y, width, height)); - if (!this.currentPath.points.length) this.graphicsData.pop(); + return this; +}; - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height], type:PIXI.Graphics.ELIP}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; - +/** + * Draws a line using the current line style from the current drawing position to (x, y); + * the current drawing position is then set to (x, y). + * + * @method lineTo + * @param x {Number} the X coordinate to draw to + * @param y {Number} the Y coordinate to draw to + */ +PIXI.Graphics.prototype.drawPolygon = function(path) +{ + if(!(path instanceof Array))path = Array.prototype.slice.call(arguments); + this.drawShape(new PIXI.Polygon(path)); return this; }; @@ -950,6 +991,46 @@ this._cachedSprite = null; }; +PIXI.Graphics.prototype.drawShape = function(shape) +{ + if(this.currentPath) + { + // check current path! + if(this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + } + + this.currentPath = null; + + var data = new PIXI.GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + + this.graphicsData.push(data); + + if(data.type === PIXI.Graphics.POLY) + { + data.shape.closed = this.filling; + this.currentPath = data; + } + + this.dirty = true; + + return data; + +}; + +PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) +{ + this.lineWidth = lineWidth; + this.lineColor = lineColor; + this.lineAlpha = lineAlpha; + + this.fillColor = fillColor; + this.fillAlpha = fillAlpha; + this.fill = fill; + + this.shape = shape; + this.type = shape.type; +}; + // SOME TYPES: PIXI.Graphics.POLY = 0; @@ -958,3 +1039,9 @@ PIXI.Graphics.ELIP = 3; PIXI.Graphics.RREC = 4; + +PIXI.Polygon.prototype.type = PIXI.Graphics.POLY; +PIXI.Rectangle.prototype.type = PIXI.Graphics.RECT; +PIXI.Circle.prototype.type = PIXI.Graphics.CIRC; +PIXI.Ellipse.prototype.type = PIXI.Graphics.ELIP; + diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js deleted file mode 100644 index b8edfcc..0000000 --- a/src/pixi/core/Rectangle.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ - */ - -/** - * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. - * - * @class Rectangle - * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle - * @param width {Number} The overall width of this rectangle - * @param height {Number} The overall height of this rectangle - */ -PIXI.Rectangle = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Rectangle - * - * @method clone - * @return {Rectangle} a copy of the rectangle - */ -PIXI.Rectangle.prototype.clone = function() -{ - return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle - */ -PIXI.Rectangle.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - var x1 = this.x; - if(x >= x1 && x <= x1 + this.width) - { - var y1 = this.y; - - if(y >= y1 && y <= y1 + this.height) - { - return true; - } - } - - return false; -}; - -// constructor -PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; - -PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index 81e519b..be0e872 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -479,8 +479,8 @@ // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; } // concat the parent matrix with the objects transform. diff --git a/src/pixi/geom/Circle.js b/src/pixi/geom/Circle.js new file mode 100644 index 0000000..cc39a28 --- /dev/null +++ b/src/pixi/geom/Circle.js @@ -0,0 +1,85 @@ +/** + * @author Chad Engler + */ + +/** + * The Circle object can be used to specify a hit area for displayObjects + * + * @class Circle + * @constructor + * @param x {Number} The X coordinate of the center of this circle + * @param y {Number} The Y coordinate of the center of this circle + * @param radius {Number} The radius of the circle + */ +PIXI.Circle = function(x, y, radius) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property radius + * @type Number + * @default 0 + */ + this.radius = radius || 0; +}; + +/** + * Creates a clone of this Circle instance + * + * @method clone + * @return {Circle} a copy of the polygon + */ +PIXI.Circle.prototype.clone = function() +{ + return new PIXI.Circle(this.x, this.y, this.radius); +}; + +/** + * Checks whether the x, and y coordinates passed to this function are contained within this circle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Circle.prototype.contains = function(x, y) +{ + if(this.radius <= 0) + return false; + + var dx = (this.x - x), + dy = (this.y - y), + r2 = this.radius * this.radius; + + dx *= dx; + dy *= dy; + + return (dx + dy <= r2); +}; + +/** +* Returns the framing rectangle of the circle as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Circle.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); +}; + +// constructor +PIXI.Circle.prototype.constructor = PIXI.Circle; + diff --git a/src/pixi/geom/Ellipse.js b/src/pixi/geom/Ellipse.js new file mode 100644 index 0000000..b376333 --- /dev/null +++ b/src/pixi/geom/Ellipse.js @@ -0,0 +1,92 @@ +/** + * @author Chad Engler + */ + +/** + * The Ellipse object can be used to specify a hit area for displayObjects + * + * @class Ellipse + * @constructor + * @param x {Number} The X coordinate of the center of the ellipse + * @param y {Number} The Y coordinate of the center of the ellipse + * @param width {Number} The half width of this ellipse + * @param height {Number} The half height of this ellipse + */ +PIXI.Ellipse = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Ellipse instance + * + * @method clone + * @return {Ellipse} a copy of the ellipse + */ +PIXI.Ellipse.prototype.clone = function() +{ + return new PIXI.Ellipse(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this ellipse + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this ellipse + */ +PIXI.Ellipse.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + //normalize the coords to an ellipse with center 0,0 + var normx = ((x - this.x) / this.width), + normy = ((y - this.y) / this.height); + + normx *= normx; + normy *= normy; + + return (normx + normy <= 1); +}; + +/** +* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Ellipse.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); +}; + +// constructor +PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/geom/Matrix.js b/src/pixi/geom/Matrix.js new file mode 100644 index 0000000..5e73cdd --- /dev/null +++ b/src/pixi/geom/Matrix.js @@ -0,0 +1,216 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Matrix class is now an object, which makes it a lot faster, + * here is a representation of it : + * | a | b | tx| + * | c | d | ty| + * | 0 | 0 | 1 | + * + * @class Matrix + * @constructor + */ +PIXI.Matrix = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +/** + * Creates a pixi matrix object based on the array given as a parameter + * + * @method fromArray + * @param array {Array} The array that the matrix will be filled with + */ +PIXI.Matrix.prototype.fromArray = function(array) +{ + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; +}; + +/** + * Creates an array from the current Matrix object + * + * @method toArray + * @param transpose {Boolean} Whether we need to transpose the matrix or not + * @return {Array} the newly created array which contains the matrix + */ +PIXI.Matrix.prototype.toArray = function(transpose) +{ + if(!this.array) this.array = new PIXI.Float32Array(9); + var array = this.array; + + if(transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } + + return array; +}; + +/** + * Get a new position with the current transormation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, transformed trough this matrix + */ +PIXI.Matrix.prototype.apply = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + newPos.x = this.a * pos.x + this.b * pos.y + this.tx; + newPos.y = this.c * pos.x + this.d * pos.y + this.ty; + + return newPos; +}; + +/** + * Get a new position with the inverse of the current transormation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, inverse-transformed trough this matrix + */ +PIXI.Matrix.prototype.applyInverse = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + var id = 1 / (this.a * this.d + this.b * -this.c); + newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; + newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; + + return newPos; +}; + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.translate = function(x, y) +{ + this.tx += x; + this.ty += y; + + return this; +}; + +/** + * Applies a scale transformation to the matrix. + * @method scale + * @param {Number} x The amount to scale horizontally + * @param {Number} y The amount to scale vertically + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.scale = function(x, y) +{ + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; + + return this; +}; + + +/** + * Applies a rotation transformation to the matrix. + * @method rotate + * @param {Number} angle The angle in radians. + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.rotate = function(angle) +{ + var cos = Math.cos( angle ); + var sin = Math.sin( angle ); + + var a1 = this.a; + var c1 = this.c; + var tx1 = this.tx; + + this.a = a1 * cos-this.b * sin; + this.b = a1 * sin+this.b * cos; + this.c = c1 * cos-this.d * sin; + this.d = c1 * sin+this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; + + return this; +}; + + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.append = function(matrix) +{ + var a1 = this.a; + var b1 = this.b; + var c1 = this.c; + var d1 = this.d; + + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; + + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + + return this; +}; + +PIXI.Matrix.prototype.identity = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/geom/Point.js b/src/pixi/geom/Point.js new file mode 100644 index 0000000..202bc2f --- /dev/null +++ b/src/pixi/geom/Point.js @@ -0,0 +1,56 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. + * + * @class Point + * @constructor + * @param x {Number} position of the point on the x axis + * @param y {Number} position of the point on the y axis + */ +PIXI.Point = function(x, y) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; +}; + +/** + * Creates a clone of this point + * + * @method clone + * @return {Point} a copy of the point + */ +PIXI.Point.prototype.clone = function() +{ + return new PIXI.Point(this.x, this.y); +}; + +/** + * Sets the point to a new x and y position. + * If y is ommited, both x and y will be set to x. + * + * @method set + * @param [x=0] {Number} position of the point on the x axis + * @param [y=0] {Number} position of the point on the y axis + */ +PIXI.Point.prototype.set = function(x, y) +{ + this.x = x || 0; + this.y = y || ( (y !== 0) ? this.x : 0 ) ; +}; + +// constructor +PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/geom/Polygon.js b/src/pixi/geom/Polygon.js new file mode 100644 index 0000000..819d290 --- /dev/null +++ b/src/pixi/geom/Polygon.js @@ -0,0 +1,74 @@ +/** + * @author Adrien Brault + */ + +/** + * @class Polygon + * @constructor + * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, + * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be + * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the + * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are + * Numbers. + */ +PIXI.Polygon = function(points) +{ + //if points isn't an array, use arguments as the array + if(!(points instanceof Array))points = Array.prototype.slice.call(arguments); + + //if this is a flat array of numbers, convert it to points + if(points[0] instanceof PIXI.Point) + { + var p = []; + for(var i = 0, il = points.length; i < il; i++) + { + p.push(points[i].x, points[i].y); + } + + points = p; + } + + this.closed = true; + this.points = points; +}; + +/** + * Creates a clone of this polygon + * + * @method clone + * @return {Polygon} a copy of the polygon + */ +PIXI.Polygon.prototype.clone = function() +{ + var points = this.points.slice(); + return new PIXI.Polygon(points); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this polygon + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Polygon.prototype.contains = function(x, y) +{ + var inside = false; + + // use some raycasting to test hits + // https://github.com/substack/point-in-polygon/blob/master/index.js + for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) + { + var xi = this.points[i].x, yi = this.points[i].y, + xj = this.points[j].x, yj = this.points[j].y, + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + + if(intersect) inside = !inside; + } + + return inside; +}; + +// constructor +PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/geom/Rectangle.js b/src/pixi/geom/Rectangle.js new file mode 100644 index 0000000..b8edfcc --- /dev/null +++ b/src/pixi/geom/Rectangle.js @@ -0,0 +1,87 @@ +/** + * @author Mat Groves http://matgroves.com/ + */ + +/** + * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. + * + * @class Rectangle + * @constructor + * @param x {Number} The X coord of the upper-left corner of the rectangle + * @param y {Number} The Y coord of the upper-left corner of the rectangle + * @param width {Number} The overall width of this rectangle + * @param height {Number} The overall height of this rectangle + */ +PIXI.Rectangle = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Rectangle + * + * @method clone + * @return {Rectangle} a copy of the rectangle + */ +PIXI.Rectangle.prototype.clone = function() +{ + return new PIXI.Rectangle(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this Rectangle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this Rectangle + */ +PIXI.Rectangle.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + var x1 = this.x; + if(x >= x1 && x <= x1 + this.width) + { + var y1 = this.y; + + if(y >= y1 && y <= y1 + this.height) + { + return true; + } + } + + return false; +}; + +// constructor +PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; + +PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dc85b96..9efaff2 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -77,8 +77,10 @@ * @type Object * @private */ - this.currentPath = {points:[]}; + this.currentPath = null; + + /** * Array containing some WebGL-related properties used by the WebGL renderer * @@ -168,16 +170,25 @@ */ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - this.lineWidth = lineWidth || 0; this.lineColor = color || 0; this.lineAlpha = (arguments.length < 3) ? 1 : alpha; - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; + if(this.currentPath) + { + if(this.currentPath.shape.points.length) + { + // halfway through a line? start a new one! + this.drawShape( new PIXI.Polygon( this.currentPath.shape.points.slice(-2) )); + return this; + } - this.graphicsData.push(this.currentPath); + // otherwise its empty so lets just set the line properties + this.currentPath.lineWidth = this.lineWidth; + this.currentPath.lineColor = this.lineColor; + this.currentPath.lineAlpha = this.lineAlpha; + + } return this; }; @@ -191,14 +202,42 @@ */ PIXI.Graphics.prototype.moveTo = function(x, y) { - if (!this.currentPath.points.length) this.graphicsData.pop(); + this.drawShape(new PIXI.Polygon([x,y])); - this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; + /* + if(this.currentPath) + { + if(this.currentPath.shape.points.length > 2) + { + // halfway through a line? start a new one! + this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); + return this; + } + else + { + // reuse existing path! + this.currentPath.shape.points = [x,y]; + this.currentPath.lineWidth = this.lineWidth; + this.currentPath.lineColor = this.lineColor; + this.currentPath.lineAlpha = this.lineAlpha; - this.currentPath.points.push(x, y); + return this + } + } + + this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - this.graphicsData.push(this.currentPath); + this.currentPath.push(x, y); +`*/ + + // if (!this.currentPath.points.length) this.graphicsData.pop(); + + //// this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, + // fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; + + //this.currentPath.points.push(x, y); + + // this.graphicsData.push(this.currentPath); return this; }; @@ -213,7 +252,7 @@ */ PIXI.Graphics.prototype.lineTo = function(x, y) { - this.currentPath.points.push(x, y); + this.currentPath.shape.points.push(x, y); this.dirty = true; return this; @@ -232,12 +271,19 @@ */ PIXI.Graphics.prototype.quadraticCurveTo = function(cpX, cpY, toX, toY) { - if( this.currentPath.points.length === 0)this.moveTo(0,0); + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [0,0]; + } + else + { + this.moveTo(0,0); + } var xa, ya, n = 20, - points = this.currentPath.points; + points = this.currentPath.shape.points; if(points.length === 0)this.moveTo(0, 0); @@ -276,7 +322,14 @@ */ PIXI.Graphics.prototype.bezierCurveTo = function(cpX, cpY, cpX2, cpY2, toX, toY) { - if( this.currentPath.points.length === 0)this.moveTo(0,0); + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [0,0]; + } + else + { + this.moveTo(0,0); + } var n = 20, dt, @@ -284,7 +337,7 @@ dt3, t2, t3, - points = this.currentPath.points; + points = this.currentPath.shape.points; var fromX = points[points.length-2]; var fromY = points[points.length-1]; @@ -327,10 +380,19 @@ */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [x1, y1]; + } + else + { + this.moveTo(x1, y1); + } + // check that path contains subpaths - if( this.currentPath.points.length === 0)this.moveTo(x1, y1); + if( this.currentPath.length === 0)this.moveTo(x1, y1); - var points = this.currentPath.points; + var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; @@ -390,12 +452,12 @@ var startX = cx + Math.cos(startAngle) * radius; var startY = cy + Math.sin(startAngle) * radius; - var points = this.currentPath.points; + var points = this.currentPath.shape.points; if(points.length !== 0 && points[points.length-2] !== startX || points[points.length-1] !== startY) { this.moveTo(startX, startY); - points = this.currentPath.points; + points = this.currentPath.shape.points; } if (startAngle === endAngle)return this; @@ -443,28 +505,6 @@ return this; }; -/** - * Draws a line using the current line style from the current drawing position to (x, y); - * the current drawing position is then set to (x, y). - * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to - */ -PIXI.Graphics.prototype.drawPath = function(path) -{ - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; - - this.graphicsData.push(this.currentPath); - - this.currentPath.points = this.currentPath.points.concat(path); - this.dirty = true; - - return this; -}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -479,8 +519,17 @@ this.filling = true; this.fillColor = color || 0; - this.fillAlpha = (arguments.length < 2) ? 1 : alpha; + this.fillAlpha = (alpha === undefined) ? 1 : alpha; + if(this.currentPath) + { + if(this.currentPath.shape.points.length <= 2) + { + this.currentPath.fill = this.filling; + this.currentPath.fillColor = this.fillColor; + this.currentPath.fillAlpha = this.fillAlpha; + } + } return this; }; @@ -508,14 +557,7 @@ */ PIXI.Graphics.prototype.drawRect = function( x, y, width, height ) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height], type:PIXI.Graphics.RECT}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape(new PIXI.Rectangle(x,y, width, height)); return this; }; @@ -528,21 +570,21 @@ * @param width {Number} The width of the rectangle * @param height {Number} The height of the rectangle * @param radius {Number} Radius of the rectangle corners - */ + *//* PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) { if (!this.currentPath.points.length) this.graphicsData.pop(); - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height, radius], type:PIXI.Graphics.RREC}; + // this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, + /// fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, + // points:[x, y, width, height, radius], shape:new PIXI.Rectangle(x,y, width, height), type:PIXI.Graphics.RREC}; this.graphicsData.push(this.currentPath); this.dirty = true; return this; }; - +*/ /** * Draws a circle. * @@ -553,15 +595,7 @@ */ PIXI.Graphics.prototype.drawCircle = function(x, y, radius) { - - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, radius, radius], type:PIXI.Graphics.CIRC}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape(new PIXI.Circle(x,y, radius)); return this; }; @@ -577,16 +611,23 @@ */ PIXI.Graphics.prototype.drawEllipse = function(x, y, width, height) { + this.drawShape(new PIXI.Ellipse(x, y, width, height)); - if (!this.currentPath.points.length) this.graphicsData.pop(); + return this; +}; - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height], type:PIXI.Graphics.ELIP}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; - +/** + * Draws a line using the current line style from the current drawing position to (x, y); + * the current drawing position is then set to (x, y). + * + * @method lineTo + * @param x {Number} the X coordinate to draw to + * @param y {Number} the Y coordinate to draw to + */ +PIXI.Graphics.prototype.drawPolygon = function(path) +{ + if(!(path instanceof Array))path = Array.prototype.slice.call(arguments); + this.drawShape(new PIXI.Polygon(path)); return this; }; @@ -950,6 +991,46 @@ this._cachedSprite = null; }; +PIXI.Graphics.prototype.drawShape = function(shape) +{ + if(this.currentPath) + { + // check current path! + if(this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + } + + this.currentPath = null; + + var data = new PIXI.GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + + this.graphicsData.push(data); + + if(data.type === PIXI.Graphics.POLY) + { + data.shape.closed = this.filling; + this.currentPath = data; + } + + this.dirty = true; + + return data; + +}; + +PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) +{ + this.lineWidth = lineWidth; + this.lineColor = lineColor; + this.lineAlpha = lineAlpha; + + this.fillColor = fillColor; + this.fillAlpha = fillAlpha; + this.fill = fill; + + this.shape = shape; + this.type = shape.type; +}; + // SOME TYPES: PIXI.Graphics.POLY = 0; @@ -958,3 +1039,9 @@ PIXI.Graphics.ELIP = 3; PIXI.Graphics.RREC = 4; + +PIXI.Polygon.prototype.type = PIXI.Graphics.POLY; +PIXI.Rectangle.prototype.type = PIXI.Graphics.RECT; +PIXI.Circle.prototype.type = PIXI.Graphics.CIRC; +PIXI.Ellipse.prototype.type = PIXI.Graphics.ELIP; + diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 0daa444..9fe4194 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -31,7 +31,7 @@ for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - var points = data.points; + var shape = data.shape; context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); @@ -41,6 +41,8 @@ { context.beginPath(); + var points = shape.points; + context.moveTo(points[0], points[1]); for (var j=1; j < points.length/2; j++) @@ -48,6 +50,11 @@ context.lineTo(points[j * 2], points[j * 2 + 1]); } + if(shape.closed) + { + context.lineTo(points[0], points[1]); + } + // if the first and last point are the same close the path - much neater :) if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { @@ -73,13 +80,13 @@ { context.globalAlpha = data.fillAlpha * worldAlpha; context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); - context.fillRect(points[0], points[1], points[2], points[3]); + context.fillRect(shape.x, shape.y, shape.width, shape.height); } if(data.lineWidth) { context.globalAlpha = data.lineAlpha * worldAlpha; - context.strokeRect(points[0], points[1], points[2], points[3]); + context.strokeRect(shape.x, shape.y, shape.width, shape.height); } } @@ -87,7 +94,7 @@ { // TODO - need to be Undefined! context.beginPath(); - context.arc(points[0], points[1], points[2],0,2*Math.PI); + context.arc(shape.x, shape.y, shape.radius,0,2*Math.PI); context.closePath(); if(data.fill) @@ -107,13 +114,11 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - var ellipseData = data.points; + var w = shape.width * 2; + var h = shape.height * 2; - var w = ellipseData[2] * 2; - var h = ellipseData[3] * 2; - - var x = ellipseData[0] - w/2; - var y = ellipseData[1] - h/2; + var x = shape.x - w/2; + var y = shape.y - h/2; context.beginPath(); @@ -145,6 +150,7 @@ context.stroke(); } } + /* else if (data.type === PIXI.Graphics.RREC) { var rx = points[0]; @@ -181,6 +187,7 @@ context.stroke(); } } + */ } }; diff --git a/Gruntfile.js b/Gruntfile.js index 761deb1..43b963d 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,12 +12,12 @@ var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', - '<%= dirs.src %>/core/Point.js', - '<%= dirs.src %>/core/Rectangle.js', - '<%= dirs.src %>/core/Polygon.js', - '<%= dirs.src %>/core/Circle.js', - '<%= dirs.src %>/core/Ellipse.js', - '<%= dirs.src %>/core/Matrix.js', + '<%= dirs.src %>/geom/Point.js', + '<%= dirs.src %>/geom/Rectangle.js', + '<%= dirs.src %>/geom/Polygon.js', + '<%= dirs.src %>/geom/Circle.js', + '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', '<%= dirs.src %>/display/Sprite.js', diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index bf596cc..abcf3fd 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -531,8 +531,7 @@ // temp fix for if the element is in a non visible - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, + var worldTransform = item.worldTransform, i, a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10), @@ -553,7 +552,7 @@ return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { var width = item.texture.frame.width, height = item.texture.frame.height, @@ -572,10 +571,29 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (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(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js deleted file mode 100644 index cc39a28..0000000 --- a/src/pixi/core/Circle.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Circle object can be used to specify a hit area for displayObjects - * - * @class Circle - * @constructor - * @param x {Number} The X coordinate of the center of this circle - * @param y {Number} The Y coordinate of the center of this circle - * @param radius {Number} The radius of the circle - */ -PIXI.Circle = function(x, y, radius) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property radius - * @type Number - * @default 0 - */ - this.radius = radius || 0; -}; - -/** - * Creates a clone of this Circle instance - * - * @method clone - * @return {Circle} a copy of the polygon - */ -PIXI.Circle.prototype.clone = function() -{ - return new PIXI.Circle(this.x, this.y, this.radius); -}; - -/** - * Checks whether the x, and y coordinates passed to this function are contained within this circle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon - */ -PIXI.Circle.prototype.contains = function(x, y) -{ - if(this.radius <= 0) - return false; - - var dx = (this.x - x), - dy = (this.y - y), - r2 = this.radius * this.radius; - - dx *= dx; - dy *= dy; - - return (dx + dy <= r2); -}; - -/** -* Returns the framing rectangle of the circle as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Circle.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); -}; - -// constructor -PIXI.Circle.prototype.constructor = PIXI.Circle; - diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js deleted file mode 100644 index b376333..0000000 --- a/src/pixi/core/Ellipse.js +++ /dev/null @@ -1,92 +0,0 @@ -/** - * @author Chad Engler - */ - -/** - * The Ellipse object can be used to specify a hit area for displayObjects - * - * @class Ellipse - * @constructor - * @param x {Number} The X coordinate of the center of the ellipse - * @param y {Number} The Y coordinate of the center of the ellipse - * @param width {Number} The half width of this ellipse - * @param height {Number} The half height of this ellipse - */ -PIXI.Ellipse = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Ellipse instance - * - * @method clone - * @return {Ellipse} a copy of the ellipse - */ -PIXI.Ellipse.prototype.clone = function() -{ - return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this ellipse - */ -PIXI.Ellipse.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - //normalize the coords to an ellipse with center 0,0 - var normx = ((x - this.x) / this.width), - normy = ((y - this.y) / this.height); - - normx *= normx; - normy *= normy; - - return (normx + normy <= 1); -}; - -/** -* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object -* -* @method getBounds -* @return {Rectangle} the framing rectangle -*/ -PIXI.Ellipse.prototype.getBounds = function() -{ - return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); -}; - -// constructor -PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js deleted file mode 100644 index 5e73cdd..0000000 --- a/src/pixi/core/Matrix.js +++ /dev/null @@ -1,216 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Matrix class is now an object, which makes it a lot faster, - * here is a representation of it : - * | a | b | tx| - * | c | d | ty| - * | 0 | 0 | 1 | - * - * @class Matrix - * @constructor - */ -PIXI.Matrix = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -/** - * Creates a pixi matrix object based on the array given as a parameter - * - * @method fromArray - * @param array {Array} The array that the matrix will be filled with - */ -PIXI.Matrix.prototype.fromArray = function(array) -{ - this.a = array[0]; - this.b = array[1]; - this.c = array[3]; - this.d = array[4]; - this.tx = array[2]; - this.ty = array[5]; -}; - -/** - * Creates an array from the current Matrix object - * - * @method toArray - * @param transpose {Boolean} Whether we need to transpose the matrix or not - * @return {Array} the newly created array which contains the matrix - */ -PIXI.Matrix.prototype.toArray = function(transpose) -{ - if(!this.array) this.array = new PIXI.Float32Array(9); - var array = this.array; - - if(transpose) - { - array[0] = this.a; - array[1] = this.b; - array[2] = 0; - array[3] = this.c; - array[4] = this.d; - array[5] = 0; - array[6] = this.tx; - array[7] = this.ty; - array[8] = 1; - } - else - { - array[0] = this.a; - array[1] = this.c; - array[2] = this.tx; - array[3] = this.b; - array[4] = this.d; - array[5] = this.ty; - array[6] = 0; - array[7] = 0; - array[8] = 1; - } - - return array; -}; - -/** - * Get a new position with the current transormation applied. - * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, transformed trough this matrix - */ -PIXI.Matrix.prototype.apply = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - newPos.x = this.a * pos.x + this.b * pos.y + this.tx; - newPos.y = this.c * pos.x + this.d * pos.y + this.ty; - - return newPos; -}; - -/** - * Get a new position with the inverse of the current transormation applied. - * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) - * - * @method apply - * @param pos {Point} The origin - * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) - * @return {Point} The new point, inverse-transformed trough this matrix - */ -PIXI.Matrix.prototype.applyInverse = function(pos, newPos) -{ - newPos = newPos || new PIXI.Point(); - - var id = 1 / (this.a * this.d + this.b * -this.c); - newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; - newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; - - return newPos; -}; - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.translate = function(x, y) -{ - this.tx += x; - this.ty += y; - - return this; -}; - -/** - * Applies a scale transformation to the matrix. - * @method scale - * @param {Number} x The amount to scale horizontally - * @param {Number} y The amount to scale vertically - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.scale = function(x, y) -{ - this.a *= x; - this.d *= y; - this.c *= x; - this.b *= y; - this.tx *= x; - this.ty *= y; - - return this; -}; - - -/** - * Applies a rotation transformation to the matrix. - * @method rotate - * @param {Number} angle The angle in radians. - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.rotate = function(angle) -{ - var cos = Math.cos( angle ); - var sin = Math.sin( angle ); - - var a1 = this.a; - var c1 = this.c; - var tx1 = this.tx; - - this.a = a1 * cos-this.b * sin; - this.b = a1 * sin+this.b * cos; - this.c = c1 * cos-this.d * sin; - this.d = c1 * sin+this.d * cos; - this.tx = tx1 * cos - this.ty * sin; - this.ty = tx1 * sin + this.ty * cos; - - return this; -}; - - -/** - * Translates the matrix on the x and y. - * @method translate - * @param {Number} x - * @param {Number} y - * @return {Matrix} This matrix. Good for chaining method calls. - **/ -PIXI.Matrix.prototype.append = function(matrix) -{ - var a1 = this.a; - var b1 = this.b; - var c1 = this.c; - var d1 = this.d; - - this.a = matrix.a * a1 + matrix.b * c1; - this.b = matrix.a * b1 + matrix.b * d1; - this.c = matrix.c * a1 + matrix.d * c1; - this.d = matrix.c * b1 + matrix.d * d1; - - this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; - this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; - - return this; -}; - -PIXI.Matrix.prototype.identity = function() -{ - this.a = 1; - this.b = 0; - this.c = 0; - this.d = 1; - this.tx = 0; - this.ty = 0; -}; - -PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js deleted file mode 100644 index 202bc2f..0000000 --- a/src/pixi/core/Point.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. - * - * @class Point - * @constructor - * @param x {Number} position of the point on the x axis - * @param y {Number} position of the point on the y axis - */ -PIXI.Point = function(x, y) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; -}; - -/** - * Creates a clone of this point - * - * @method clone - * @return {Point} a copy of the point - */ -PIXI.Point.prototype.clone = function() -{ - return new PIXI.Point(this.x, this.y); -}; - -/** - * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. - * - * @method set - * @param [x=0] {Number} position of the point on the x axis - * @param [y=0] {Number} position of the point on the y axis - */ -PIXI.Point.prototype.set = function(x, y) -{ - this.x = x || 0; - this.y = y || ( (y !== 0) ? this.x : 0 ) ; -}; - -// constructor -PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js deleted file mode 100644 index b118818..0000000 --- a/src/pixi/core/Polygon.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @author Adrien Brault - */ - -/** - * @class Polygon - * @constructor - * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, - * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be - * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the - * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are - * Numbers. - */ -PIXI.Polygon = function(points) -{ - //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); - - //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { - var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); - } - - points = p; - } - - this.points = points; -}; - -/** - * Creates a clone of this polygon - * - * @method clone - * @return {Polygon} a copy of the polygon - */ -PIXI.Polygon.prototype.clone = function() -{ - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - - if(intersect) inside = !inside; - } - - return inside; -}; - -// constructor -PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js deleted file mode 100644 index b8edfcc..0000000 --- a/src/pixi/core/Rectangle.js +++ /dev/null @@ -1,87 +0,0 @@ -/** - * @author Mat Groves http://matgroves.com/ - */ - -/** - * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. - * - * @class Rectangle - * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle - * @param width {Number} The overall width of this rectangle - * @param height {Number} The overall height of this rectangle - */ -PIXI.Rectangle = function(x, y, width, height) -{ - /** - * @property x - * @type Number - * @default 0 - */ - this.x = x || 0; - - /** - * @property y - * @type Number - * @default 0 - */ - this.y = y || 0; - - /** - * @property width - * @type Number - * @default 0 - */ - this.width = width || 0; - - /** - * @property height - * @type Number - * @default 0 - */ - this.height = height || 0; -}; - -/** - * Creates a clone of this Rectangle - * - * @method clone - * @return {Rectangle} a copy of the rectangle - */ -PIXI.Rectangle.prototype.clone = function() -{ - return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -}; - -/** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle - * - * @method contains - * @param x {Number} The X coordinate of the point to test - * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle - */ -PIXI.Rectangle.prototype.contains = function(x, y) -{ - if(this.width <= 0 || this.height <= 0) - return false; - - var x1 = this.x; - if(x >= x1 && x <= x1 + this.width) - { - var y1 = this.y; - - if(y >= y1 && y <= y1 + this.height) - { - return true; - } - } - - return false; -}; - -// constructor -PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; - -PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index 81e519b..be0e872 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -479,8 +479,8 @@ // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { - tx -= this.pivot.x * a + this.pivot.y * c; - ty -= this.pivot.x * b + this.pivot.y * d; + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; } // concat the parent matrix with the objects transform. diff --git a/src/pixi/geom/Circle.js b/src/pixi/geom/Circle.js new file mode 100644 index 0000000..cc39a28 --- /dev/null +++ b/src/pixi/geom/Circle.js @@ -0,0 +1,85 @@ +/** + * @author Chad Engler + */ + +/** + * The Circle object can be used to specify a hit area for displayObjects + * + * @class Circle + * @constructor + * @param x {Number} The X coordinate of the center of this circle + * @param y {Number} The Y coordinate of the center of this circle + * @param radius {Number} The radius of the circle + */ +PIXI.Circle = function(x, y, radius) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property radius + * @type Number + * @default 0 + */ + this.radius = radius || 0; +}; + +/** + * Creates a clone of this Circle instance + * + * @method clone + * @return {Circle} a copy of the polygon + */ +PIXI.Circle.prototype.clone = function() +{ + return new PIXI.Circle(this.x, this.y, this.radius); +}; + +/** + * Checks whether the x, and y coordinates passed to this function are contained within this circle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Circle.prototype.contains = function(x, y) +{ + if(this.radius <= 0) + return false; + + var dx = (this.x - x), + dy = (this.y - y), + r2 = this.radius * this.radius; + + dx *= dx; + dy *= dy; + + return (dx + dy <= r2); +}; + +/** +* Returns the framing rectangle of the circle as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Circle.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); +}; + +// constructor +PIXI.Circle.prototype.constructor = PIXI.Circle; + diff --git a/src/pixi/geom/Ellipse.js b/src/pixi/geom/Ellipse.js new file mode 100644 index 0000000..b376333 --- /dev/null +++ b/src/pixi/geom/Ellipse.js @@ -0,0 +1,92 @@ +/** + * @author Chad Engler + */ + +/** + * The Ellipse object can be used to specify a hit area for displayObjects + * + * @class Ellipse + * @constructor + * @param x {Number} The X coordinate of the center of the ellipse + * @param y {Number} The Y coordinate of the center of the ellipse + * @param width {Number} The half width of this ellipse + * @param height {Number} The half height of this ellipse + */ +PIXI.Ellipse = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Ellipse instance + * + * @method clone + * @return {Ellipse} a copy of the ellipse + */ +PIXI.Ellipse.prototype.clone = function() +{ + return new PIXI.Ellipse(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this ellipse + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this ellipse + */ +PIXI.Ellipse.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + //normalize the coords to an ellipse with center 0,0 + var normx = ((x - this.x) / this.width), + normy = ((y - this.y) / this.height); + + normx *= normx; + normy *= normy; + + return (normx + normy <= 1); +}; + +/** +* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object +* +* @method getBounds +* @return {Rectangle} the framing rectangle +*/ +PIXI.Ellipse.prototype.getBounds = function() +{ + return new PIXI.Rectangle(this.x - this.width, this.y - this.height, this.width, this.height); +}; + +// constructor +PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/geom/Matrix.js b/src/pixi/geom/Matrix.js new file mode 100644 index 0000000..5e73cdd --- /dev/null +++ b/src/pixi/geom/Matrix.js @@ -0,0 +1,216 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Matrix class is now an object, which makes it a lot faster, + * here is a representation of it : + * | a | b | tx| + * | c | d | ty| + * | 0 | 0 | 1 | + * + * @class Matrix + * @constructor + */ +PIXI.Matrix = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +/** + * Creates a pixi matrix object based on the array given as a parameter + * + * @method fromArray + * @param array {Array} The array that the matrix will be filled with + */ +PIXI.Matrix.prototype.fromArray = function(array) +{ + this.a = array[0]; + this.b = array[1]; + this.c = array[3]; + this.d = array[4]; + this.tx = array[2]; + this.ty = array[5]; +}; + +/** + * Creates an array from the current Matrix object + * + * @method toArray + * @param transpose {Boolean} Whether we need to transpose the matrix or not + * @return {Array} the newly created array which contains the matrix + */ +PIXI.Matrix.prototype.toArray = function(transpose) +{ + if(!this.array) this.array = new PIXI.Float32Array(9); + var array = this.array; + + if(transpose) + { + array[0] = this.a; + array[1] = this.b; + array[2] = 0; + array[3] = this.c; + array[4] = this.d; + array[5] = 0; + array[6] = this.tx; + array[7] = this.ty; + array[8] = 1; + } + else + { + array[0] = this.a; + array[1] = this.c; + array[2] = this.tx; + array[3] = this.b; + array[4] = this.d; + array[5] = this.ty; + array[6] = 0; + array[7] = 0; + array[8] = 1; + } + + return array; +}; + +/** + * Get a new position with the current transormation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, transformed trough this matrix + */ +PIXI.Matrix.prototype.apply = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + newPos.x = this.a * pos.x + this.b * pos.y + this.tx; + newPos.y = this.c * pos.x + this.d * pos.y + this.ty; + + return newPos; +}; + +/** + * Get a new position with the inverse of the current transormation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, inverse-transformed trough this matrix + */ +PIXI.Matrix.prototype.applyInverse = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + var id = 1 / (this.a * this.d + this.b * -this.c); + newPos.x = this.d * id * pos.x - this.b * id * pos.y + (this.ty * this.b - this.tx * this.d) * id; + newPos.y = this.a * id * pos.y - this.c * id * pos.x + (this.tx * this.c - this.ty * this.a) * id; + + return newPos; +}; + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.translate = function(x, y) +{ + this.tx += x; + this.ty += y; + + return this; +}; + +/** + * Applies a scale transformation to the matrix. + * @method scale + * @param {Number} x The amount to scale horizontally + * @param {Number} y The amount to scale vertically + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.scale = function(x, y) +{ + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; + + return this; +}; + + +/** + * Applies a rotation transformation to the matrix. + * @method rotate + * @param {Number} angle The angle in radians. + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.rotate = function(angle) +{ + var cos = Math.cos( angle ); + var sin = Math.sin( angle ); + + var a1 = this.a; + var c1 = this.c; + var tx1 = this.tx; + + this.a = a1 * cos-this.b * sin; + this.b = a1 * sin+this.b * cos; + this.c = c1 * cos-this.d * sin; + this.d = c1 * sin+this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; + + return this; +}; + + +/** + * Translates the matrix on the x and y. + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.append = function(matrix) +{ + var a1 = this.a; + var b1 = this.b; + var c1 = this.c; + var d1 = this.d; + + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; + + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + + return this; +}; + +PIXI.Matrix.prototype.identity = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; +}; + +PIXI.identityMatrix = new PIXI.Matrix(); diff --git a/src/pixi/geom/Point.js b/src/pixi/geom/Point.js new file mode 100644 index 0000000..202bc2f --- /dev/null +++ b/src/pixi/geom/Point.js @@ -0,0 +1,56 @@ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis. + * + * @class Point + * @constructor + * @param x {Number} position of the point on the x axis + * @param y {Number} position of the point on the y axis + */ +PIXI.Point = function(x, y) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; +}; + +/** + * Creates a clone of this point + * + * @method clone + * @return {Point} a copy of the point + */ +PIXI.Point.prototype.clone = function() +{ + return new PIXI.Point(this.x, this.y); +}; + +/** + * Sets the point to a new x and y position. + * If y is ommited, both x and y will be set to x. + * + * @method set + * @param [x=0] {Number} position of the point on the x axis + * @param [y=0] {Number} position of the point on the y axis + */ +PIXI.Point.prototype.set = function(x, y) +{ + this.x = x || 0; + this.y = y || ( (y !== 0) ? this.x : 0 ) ; +}; + +// constructor +PIXI.Point.prototype.constructor = PIXI.Point; \ No newline at end of file diff --git a/src/pixi/geom/Polygon.js b/src/pixi/geom/Polygon.js new file mode 100644 index 0000000..819d290 --- /dev/null +++ b/src/pixi/geom/Polygon.js @@ -0,0 +1,74 @@ +/** + * @author Adrien Brault + */ + +/** + * @class Polygon + * @constructor + * @param points* {Array|Array|Point...|Number...} This can be an array of Points that form the polygon, + * a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be + * all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the + * arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are + * Numbers. + */ +PIXI.Polygon = function(points) +{ + //if points isn't an array, use arguments as the array + if(!(points instanceof Array))points = Array.prototype.slice.call(arguments); + + //if this is a flat array of numbers, convert it to points + if(points[0] instanceof PIXI.Point) + { + var p = []; + for(var i = 0, il = points.length; i < il; i++) + { + p.push(points[i].x, points[i].y); + } + + points = p; + } + + this.closed = true; + this.points = points; +}; + +/** + * Creates a clone of this polygon + * + * @method clone + * @return {Polygon} a copy of the polygon + */ +PIXI.Polygon.prototype.clone = function() +{ + var points = this.points.slice(); + return new PIXI.Polygon(points); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this polygon + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coordinates are within this polygon + */ +PIXI.Polygon.prototype.contains = function(x, y) +{ + var inside = false; + + // use some raycasting to test hits + // https://github.com/substack/point-in-polygon/blob/master/index.js + for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) + { + var xi = this.points[i].x, yi = this.points[i].y, + xj = this.points[j].x, yj = this.points[j].y, + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + + if(intersect) inside = !inside; + } + + return inside; +}; + +// constructor +PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/geom/Rectangle.js b/src/pixi/geom/Rectangle.js new file mode 100644 index 0000000..b8edfcc --- /dev/null +++ b/src/pixi/geom/Rectangle.js @@ -0,0 +1,87 @@ +/** + * @author Mat Groves http://matgroves.com/ + */ + +/** + * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height. + * + * @class Rectangle + * @constructor + * @param x {Number} The X coord of the upper-left corner of the rectangle + * @param y {Number} The Y coord of the upper-left corner of the rectangle + * @param width {Number} The overall width of this rectangle + * @param height {Number} The overall height of this rectangle + */ +PIXI.Rectangle = function(x, y, width, height) +{ + /** + * @property x + * @type Number + * @default 0 + */ + this.x = x || 0; + + /** + * @property y + * @type Number + * @default 0 + */ + this.y = y || 0; + + /** + * @property width + * @type Number + * @default 0 + */ + this.width = width || 0; + + /** + * @property height + * @type Number + * @default 0 + */ + this.height = height || 0; +}; + +/** + * Creates a clone of this Rectangle + * + * @method clone + * @return {Rectangle} a copy of the rectangle + */ +PIXI.Rectangle.prototype.clone = function() +{ + return new PIXI.Rectangle(this.x, this.y, this.width, this.height); +}; + +/** + * Checks whether the x and y coordinates passed to this function are contained within this Rectangle + * + * @method contains + * @param x {Number} The X coordinate of the point to test + * @param y {Number} The Y coordinate of the point to test + * @return {Boolean} Whether the x/y coords are within this Rectangle + */ +PIXI.Rectangle.prototype.contains = function(x, y) +{ + if(this.width <= 0 || this.height <= 0) + return false; + + var x1 = this.x; + if(x >= x1 && x <= x1 + this.width) + { + var y1 = this.y; + + if(y >= y1 && y <= y1 + this.height) + { + return true; + } + } + + return false; +}; + +// constructor +PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; + +PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0); \ No newline at end of file diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dc85b96..9efaff2 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -77,8 +77,10 @@ * @type Object * @private */ - this.currentPath = {points:[]}; + this.currentPath = null; + + /** * Array containing some WebGL-related properties used by the WebGL renderer * @@ -168,16 +170,25 @@ */ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - this.lineWidth = lineWidth || 0; this.lineColor = color || 0; this.lineAlpha = (arguments.length < 3) ? 1 : alpha; - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; + if(this.currentPath) + { + if(this.currentPath.shape.points.length) + { + // halfway through a line? start a new one! + this.drawShape( new PIXI.Polygon( this.currentPath.shape.points.slice(-2) )); + return this; + } - this.graphicsData.push(this.currentPath); + // otherwise its empty so lets just set the line properties + this.currentPath.lineWidth = this.lineWidth; + this.currentPath.lineColor = this.lineColor; + this.currentPath.lineAlpha = this.lineAlpha; + + } return this; }; @@ -191,14 +202,42 @@ */ PIXI.Graphics.prototype.moveTo = function(x, y) { - if (!this.currentPath.points.length) this.graphicsData.pop(); + this.drawShape(new PIXI.Polygon([x,y])); - this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; + /* + if(this.currentPath) + { + if(this.currentPath.shape.points.length > 2) + { + // halfway through a line? start a new one! + this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); + return this; + } + else + { + // reuse existing path! + this.currentPath.shape.points = [x,y]; + this.currentPath.lineWidth = this.lineWidth; + this.currentPath.lineColor = this.lineColor; + this.currentPath.lineAlpha = this.lineAlpha; - this.currentPath.points.push(x, y); + return this + } + } + + this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - this.graphicsData.push(this.currentPath); + this.currentPath.push(x, y); +`*/ + + // if (!this.currentPath.points.length) this.graphicsData.pop(); + + //// this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, + // fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; + + //this.currentPath.points.push(x, y); + + // this.graphicsData.push(this.currentPath); return this; }; @@ -213,7 +252,7 @@ */ PIXI.Graphics.prototype.lineTo = function(x, y) { - this.currentPath.points.push(x, y); + this.currentPath.shape.points.push(x, y); this.dirty = true; return this; @@ -232,12 +271,19 @@ */ PIXI.Graphics.prototype.quadraticCurveTo = function(cpX, cpY, toX, toY) { - if( this.currentPath.points.length === 0)this.moveTo(0,0); + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [0,0]; + } + else + { + this.moveTo(0,0); + } var xa, ya, n = 20, - points = this.currentPath.points; + points = this.currentPath.shape.points; if(points.length === 0)this.moveTo(0, 0); @@ -276,7 +322,14 @@ */ PIXI.Graphics.prototype.bezierCurveTo = function(cpX, cpY, cpX2, cpY2, toX, toY) { - if( this.currentPath.points.length === 0)this.moveTo(0,0); + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [0,0]; + } + else + { + this.moveTo(0,0); + } var n = 20, dt, @@ -284,7 +337,7 @@ dt3, t2, t3, - points = this.currentPath.points; + points = this.currentPath.shape.points; var fromX = points[points.length-2]; var fromY = points[points.length-1]; @@ -327,10 +380,19 @@ */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [x1, y1]; + } + else + { + this.moveTo(x1, y1); + } + // check that path contains subpaths - if( this.currentPath.points.length === 0)this.moveTo(x1, y1); + if( this.currentPath.length === 0)this.moveTo(x1, y1); - var points = this.currentPath.points; + var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; @@ -390,12 +452,12 @@ var startX = cx + Math.cos(startAngle) * radius; var startY = cy + Math.sin(startAngle) * radius; - var points = this.currentPath.points; + var points = this.currentPath.shape.points; if(points.length !== 0 && points[points.length-2] !== startX || points[points.length-1] !== startY) { this.moveTo(startX, startY); - points = this.currentPath.points; + points = this.currentPath.shape.points; } if (startAngle === endAngle)return this; @@ -443,28 +505,6 @@ return this; }; -/** - * Draws a line using the current line style from the current drawing position to (x, y); - * the current drawing position is then set to (x, y). - * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to - */ -PIXI.Graphics.prototype.drawPath = function(path) -{ - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; - - this.graphicsData.push(this.currentPath); - - this.currentPath.points = this.currentPath.points.concat(path); - this.dirty = true; - - return this; -}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -479,8 +519,17 @@ this.filling = true; this.fillColor = color || 0; - this.fillAlpha = (arguments.length < 2) ? 1 : alpha; + this.fillAlpha = (alpha === undefined) ? 1 : alpha; + if(this.currentPath) + { + if(this.currentPath.shape.points.length <= 2) + { + this.currentPath.fill = this.filling; + this.currentPath.fillColor = this.fillColor; + this.currentPath.fillAlpha = this.fillAlpha; + } + } return this; }; @@ -508,14 +557,7 @@ */ PIXI.Graphics.prototype.drawRect = function( x, y, width, height ) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height], type:PIXI.Graphics.RECT}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape(new PIXI.Rectangle(x,y, width, height)); return this; }; @@ -528,21 +570,21 @@ * @param width {Number} The width of the rectangle * @param height {Number} The height of the rectangle * @param radius {Number} Radius of the rectangle corners - */ + *//* PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) { if (!this.currentPath.points.length) this.graphicsData.pop(); - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height, radius], type:PIXI.Graphics.RREC}; + // this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, + /// fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, + // points:[x, y, width, height, radius], shape:new PIXI.Rectangle(x,y, width, height), type:PIXI.Graphics.RREC}; this.graphicsData.push(this.currentPath); this.dirty = true; return this; }; - +*/ /** * Draws a circle. * @@ -553,15 +595,7 @@ */ PIXI.Graphics.prototype.drawCircle = function(x, y, radius) { - - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, radius, radius], type:PIXI.Graphics.CIRC}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape(new PIXI.Circle(x,y, radius)); return this; }; @@ -577,16 +611,23 @@ */ PIXI.Graphics.prototype.drawEllipse = function(x, y, width, height) { + this.drawShape(new PIXI.Ellipse(x, y, width, height)); - if (!this.currentPath.points.length) this.graphicsData.pop(); + return this; +}; - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height], type:PIXI.Graphics.ELIP}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; - +/** + * Draws a line using the current line style from the current drawing position to (x, y); + * the current drawing position is then set to (x, y). + * + * @method lineTo + * @param x {Number} the X coordinate to draw to + * @param y {Number} the Y coordinate to draw to + */ +PIXI.Graphics.prototype.drawPolygon = function(path) +{ + if(!(path instanceof Array))path = Array.prototype.slice.call(arguments); + this.drawShape(new PIXI.Polygon(path)); return this; }; @@ -950,6 +991,46 @@ this._cachedSprite = null; }; +PIXI.Graphics.prototype.drawShape = function(shape) +{ + if(this.currentPath) + { + // check current path! + if(this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + } + + this.currentPath = null; + + var data = new PIXI.GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + + this.graphicsData.push(data); + + if(data.type === PIXI.Graphics.POLY) + { + data.shape.closed = this.filling; + this.currentPath = data; + } + + this.dirty = true; + + return data; + +}; + +PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) +{ + this.lineWidth = lineWidth; + this.lineColor = lineColor; + this.lineAlpha = lineAlpha; + + this.fillColor = fillColor; + this.fillAlpha = fillAlpha; + this.fill = fill; + + this.shape = shape; + this.type = shape.type; +}; + // SOME TYPES: PIXI.Graphics.POLY = 0; @@ -958,3 +1039,9 @@ PIXI.Graphics.ELIP = 3; PIXI.Graphics.RREC = 4; + +PIXI.Polygon.prototype.type = PIXI.Graphics.POLY; +PIXI.Rectangle.prototype.type = PIXI.Graphics.RECT; +PIXI.Circle.prototype.type = PIXI.Graphics.CIRC; +PIXI.Ellipse.prototype.type = PIXI.Graphics.ELIP; + diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 0daa444..9fe4194 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -31,7 +31,7 @@ for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - var points = data.points; + var shape = data.shape; context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); @@ -41,6 +41,8 @@ { context.beginPath(); + var points = shape.points; + context.moveTo(points[0], points[1]); for (var j=1; j < points.length/2; j++) @@ -48,6 +50,11 @@ context.lineTo(points[j * 2], points[j * 2 + 1]); } + if(shape.closed) + { + context.lineTo(points[0], points[1]); + } + // if the first and last point are the same close the path - much neater :) if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { @@ -73,13 +80,13 @@ { context.globalAlpha = data.fillAlpha * worldAlpha; context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); - context.fillRect(points[0], points[1], points[2], points[3]); + context.fillRect(shape.x, shape.y, shape.width, shape.height); } if(data.lineWidth) { context.globalAlpha = data.lineAlpha * worldAlpha; - context.strokeRect(points[0], points[1], points[2], points[3]); + context.strokeRect(shape.x, shape.y, shape.width, shape.height); } } @@ -87,7 +94,7 @@ { // TODO - need to be Undefined! context.beginPath(); - context.arc(points[0], points[1], points[2],0,2*Math.PI); + context.arc(shape.x, shape.y, shape.radius,0,2*Math.PI); context.closePath(); if(data.fill) @@ -107,13 +114,11 @@ // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - var ellipseData = data.points; + var w = shape.width * 2; + var h = shape.height * 2; - var w = ellipseData[2] * 2; - var h = ellipseData[3] * 2; - - var x = ellipseData[0] - w/2; - var y = ellipseData[1] - h/2; + var x = shape.x - w/2; + var y = shape.y - h/2; context.beginPath(); @@ -145,6 +150,7 @@ context.stroke(); } } + /* else if (data.type === PIXI.Graphics.RREC) { var rx = points[0]; @@ -181,6 +187,7 @@ context.stroke(); } } + */ } }; diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 1b63e8d..4de401d 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -131,12 +131,25 @@ { var data = graphics.graphicsData[i]; + + if(data.type === PIXI.Graphics.POLY) { + // need to add the points the the graphics object.. + data.points = data.shape.points.slice(); + if(data.shape.closed) + { + // close the poly if the valu is true! + if(data.points[0] !== data.points[data.points.length-2] && data.points[1] !== data.points[data.points.length-1]) + { + data.points.push(data.points[0], data.points[1]); + } + } + // MAKE SURE WE HAVE THE CORRECT TYPE.. if(data.fill) { - if(data.points.length > 6) + if(data.points.length >= 6) { if(data.points.length > 5 * 2) { @@ -230,12 +243,11 @@ // --- // // need to convert points to a nice regular data // - var rectData = graphicsData.points; - var x = rectData[0]; - var y = rectData[1]; - var width = rectData[2]; - var height = rectData[3]; - + var rectData = graphicsData.shape; + var x = rectData.x; + var y = rectData.y; + var width = rectData.width; + var height = rectData.height; if(graphicsData.fill) { @@ -417,13 +429,24 @@ */ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData) { - // need to convert points to a nice regular data - var rectData = graphicsData.points; - var x = rectData[0]; - var y = rectData[1]; - var width = rectData[2]; - var height = rectData[3]; + var circleData = graphicsData.shape; + var x = circleData.x; + var y = circleData.y; + var width; + var height; + + // TODO - bit hacky?? + if(graphicsData.type === PIXI.Graphics.CIRC) + { + width = circleData.radius; + height = circleData.radius; + } + else + { + width = circleData.width; + height = circleData.height; + } var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; @@ -491,7 +514,6 @@ { // TODO OPTIMISE! var i = 0; - var points = graphicsData.points; if(points.length === 0)return; @@ -757,8 +779,8 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData) { var points = graphicsData.points; - if(points.length < 6)return; + if(points.length < 6)return; // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices;