diff --git a/Gruntfile.js b/Gruntfile.js index fcf296f..8ff1b96 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -17,6 +17,7 @@ '<%= dirs.src %>/geom/Polygon.js', '<%= dirs.src %>/geom/Circle.js', '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/RoundedRectangle.js', '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', diff --git a/Gruntfile.js b/Gruntfile.js index fcf296f..8ff1b96 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -17,6 +17,7 @@ '<%= dirs.src %>/geom/Polygon.js', '<%= dirs.src %>/geom/Circle.js', '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/RoundedRectangle.js', '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', diff --git a/src/pixi/geom/RoundedRectangle.js b/src/pixi/geom/RoundedRectangle.js new file mode 100644 index 0000000..9ad3175 --- /dev/null +++ b/src/pixi/geom/RoundedRectangle.js @@ -0,0 +1,94 @@ +/** + * @author Mat Groves http://matgroves.com/ + */ + +/** + * the Rounded Rectangle object is an area defined by its position and has nice rounded corners, as indicated by its top-left corner point (x, y) and by its width and its height. + * + * @class Rounded Rectangle + * @constructor + * @param x {Number} The X coordinate of the upper-left corner of the rounded rectangle + * @param y {Number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param width {Number} The overall width of this rounded rectangle + * @param height {Number} The overall height of this rounded rectangle + * @param radius {Number} The overall radius of this corners of this rounded rectangle + */ +PIXI.RoundedRectangle = function(x, y, width, height, radius) +{ + /** + * @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; + + /** + * @property radius + * @type Number + * @default 20 + */ + this.radius = radius || 20; +}; + +/** + * Creates a clone of this Rounded Rectangle + * + * @method clone + * @return {rounded Rectangle} a copy of the rounded rectangle + */ +PIXI.RoundedRectangle.prototype.clone = function() +{ + return new PIXI.RoundedRectangle(this.x, this.y, this.width, this.height, this.radius); +}; + +/** + * Checks whether the x and y coordinates given are contained within this Rounded 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 coordinates are within this Rounded Rectangle + */ +PIXI.RoundedRectangle.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.RoundedRectangle.prototype.constructor = PIXI.RoundedRectangle; + diff --git a/Gruntfile.js b/Gruntfile.js index fcf296f..8ff1b96 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -17,6 +17,7 @@ '<%= dirs.src %>/geom/Polygon.js', '<%= dirs.src %>/geom/Circle.js', '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/RoundedRectangle.js', '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', diff --git a/src/pixi/geom/RoundedRectangle.js b/src/pixi/geom/RoundedRectangle.js new file mode 100644 index 0000000..9ad3175 --- /dev/null +++ b/src/pixi/geom/RoundedRectangle.js @@ -0,0 +1,94 @@ +/** + * @author Mat Groves http://matgroves.com/ + */ + +/** + * the Rounded Rectangle object is an area defined by its position and has nice rounded corners, as indicated by its top-left corner point (x, y) and by its width and its height. + * + * @class Rounded Rectangle + * @constructor + * @param x {Number} The X coordinate of the upper-left corner of the rounded rectangle + * @param y {Number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param width {Number} The overall width of this rounded rectangle + * @param height {Number} The overall height of this rounded rectangle + * @param radius {Number} The overall radius of this corners of this rounded rectangle + */ +PIXI.RoundedRectangle = function(x, y, width, height, radius) +{ + /** + * @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; + + /** + * @property radius + * @type Number + * @default 20 + */ + this.radius = radius || 20; +}; + +/** + * Creates a clone of this Rounded Rectangle + * + * @method clone + * @return {rounded Rectangle} a copy of the rounded rectangle + */ +PIXI.RoundedRectangle.prototype.clone = function() +{ + return new PIXI.RoundedRectangle(this.x, this.y, this.width, this.height, this.radius); +}; + +/** + * Checks whether the x and y coordinates given are contained within this Rounded 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 coordinates are within this Rounded Rectangle + */ +PIXI.RoundedRectangle.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.RoundedRectangle.prototype.constructor = PIXI.RoundedRectangle; + diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index 0e57832..0e61107 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -545,7 +545,7 @@ */ PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) { - this.drawShape({ points:[x, y, width, height, radius], type:PIXI.Graphics.RREC }); + this.drawShape(new PIXI.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -1112,3 +1112,5 @@ PIXI.Rectangle.prototype.type = PIXI.Graphics.RECT; PIXI.Circle.prototype.type = PIXI.Graphics.CIRC; PIXI.Ellipse.prototype.type = PIXI.Graphics.ELIP; +PIXI.RoundedRectangle.prototype.type = PIXI.Graphics.RREC; + diff --git a/Gruntfile.js b/Gruntfile.js index fcf296f..8ff1b96 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -17,6 +17,7 @@ '<%= dirs.src %>/geom/Polygon.js', '<%= dirs.src %>/geom/Circle.js', '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/RoundedRectangle.js', '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', diff --git a/src/pixi/geom/RoundedRectangle.js b/src/pixi/geom/RoundedRectangle.js new file mode 100644 index 0000000..9ad3175 --- /dev/null +++ b/src/pixi/geom/RoundedRectangle.js @@ -0,0 +1,94 @@ +/** + * @author Mat Groves http://matgroves.com/ + */ + +/** + * the Rounded Rectangle object is an area defined by its position and has nice rounded corners, as indicated by its top-left corner point (x, y) and by its width and its height. + * + * @class Rounded Rectangle + * @constructor + * @param x {Number} The X coordinate of the upper-left corner of the rounded rectangle + * @param y {Number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param width {Number} The overall width of this rounded rectangle + * @param height {Number} The overall height of this rounded rectangle + * @param radius {Number} The overall radius of this corners of this rounded rectangle + */ +PIXI.RoundedRectangle = function(x, y, width, height, radius) +{ + /** + * @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; + + /** + * @property radius + * @type Number + * @default 20 + */ + this.radius = radius || 20; +}; + +/** + * Creates a clone of this Rounded Rectangle + * + * @method clone + * @return {rounded Rectangle} a copy of the rounded rectangle + */ +PIXI.RoundedRectangle.prototype.clone = function() +{ + return new PIXI.RoundedRectangle(this.x, this.y, this.width, this.height, this.radius); +}; + +/** + * Checks whether the x and y coordinates given are contained within this Rounded 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 coordinates are within this Rounded Rectangle + */ +PIXI.RoundedRectangle.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.RoundedRectangle.prototype.constructor = PIXI.RoundedRectangle; + diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index 0e57832..0e61107 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -545,7 +545,7 @@ */ PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) { - this.drawShape({ points:[x, y, width, height, radius], type:PIXI.Graphics.RREC }); + this.drawShape(new PIXI.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -1112,3 +1112,5 @@ PIXI.Rectangle.prototype.type = PIXI.Graphics.RECT; PIXI.Circle.prototype.type = PIXI.Graphics.CIRC; PIXI.Ellipse.prototype.type = PIXI.Graphics.ELIP; +PIXI.RoundedRectangle.prototype.type = PIXI.Graphics.RREC; + diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index ec63e55..632e23f 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -148,12 +148,11 @@ } else if (data.type === PIXI.Graphics.RREC) { - var pts = shape.points; - var rx = pts[0]; - var ry = pts[1]; - var width = pts[2]; - var height = pts[3]; - var radius = pts[4]; + var rx = shape.x; + var ry = shape.y; + var width = shape.width; + var height = shape.height; + var radius = shape.radius; var maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; diff --git a/Gruntfile.js b/Gruntfile.js index fcf296f..8ff1b96 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -17,6 +17,7 @@ '<%= dirs.src %>/geom/Polygon.js', '<%= dirs.src %>/geom/Circle.js', '<%= dirs.src %>/geom/Ellipse.js', + '<%= dirs.src %>/geom/RoundedRectangle.js', '<%= dirs.src %>/geom/Matrix.js', '<%= dirs.src %>/display/DisplayObject.js', '<%= dirs.src %>/display/DisplayObjectContainer.js', diff --git a/src/pixi/geom/RoundedRectangle.js b/src/pixi/geom/RoundedRectangle.js new file mode 100644 index 0000000..9ad3175 --- /dev/null +++ b/src/pixi/geom/RoundedRectangle.js @@ -0,0 +1,94 @@ +/** + * @author Mat Groves http://matgroves.com/ + */ + +/** + * the Rounded Rectangle object is an area defined by its position and has nice rounded corners, as indicated by its top-left corner point (x, y) and by its width and its height. + * + * @class Rounded Rectangle + * @constructor + * @param x {Number} The X coordinate of the upper-left corner of the rounded rectangle + * @param y {Number} The Y coordinate of the upper-left corner of the rounded rectangle + * @param width {Number} The overall width of this rounded rectangle + * @param height {Number} The overall height of this rounded rectangle + * @param radius {Number} The overall radius of this corners of this rounded rectangle + */ +PIXI.RoundedRectangle = function(x, y, width, height, radius) +{ + /** + * @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; + + /** + * @property radius + * @type Number + * @default 20 + */ + this.radius = radius || 20; +}; + +/** + * Creates a clone of this Rounded Rectangle + * + * @method clone + * @return {rounded Rectangle} a copy of the rounded rectangle + */ +PIXI.RoundedRectangle.prototype.clone = function() +{ + return new PIXI.RoundedRectangle(this.x, this.y, this.width, this.height, this.radius); +}; + +/** + * Checks whether the x and y coordinates given are contained within this Rounded 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 coordinates are within this Rounded Rectangle + */ +PIXI.RoundedRectangle.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.RoundedRectangle.prototype.constructor = PIXI.RoundedRectangle; + diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index 0e57832..0e61107 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -545,7 +545,7 @@ */ PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) { - this.drawShape({ points:[x, y, width, height, radius], type:PIXI.Graphics.RREC }); + this.drawShape(new PIXI.RoundedRectangle(x, y, width, height, radius)); return this; }; @@ -1112,3 +1112,5 @@ PIXI.Rectangle.prototype.type = PIXI.Graphics.RECT; PIXI.Circle.prototype.type = PIXI.Graphics.CIRC; PIXI.Ellipse.prototype.type = PIXI.Graphics.ELIP; +PIXI.RoundedRectangle.prototype.type = PIXI.Graphics.RREC; + diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index ec63e55..632e23f 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -148,12 +148,11 @@ } else if (data.type === PIXI.Graphics.RREC) { - var pts = shape.points; - var rx = pts[0]; - var ry = pts[1]; - var width = pts[2]; - var height = pts[3]; - var radius = pts[4]; + var rx = shape.x; + var ry = shape.y; + var width = shape.width; + var height = shape.height; + var radius = shape.radius; var maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 60eca5b..5f8909e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -309,12 +309,13 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.shape.points; - var x = points[0]; - var y = points[1]; - var width = points[2]; - var height = points[3]; - var radius = points[4]; + var rrectData = graphicsData.shape; + var x = rrectData.x; + var y = rrectData.y; + var width = rrectData.width; + var height = rrectData.height; + + var radius = rrectData.radius; var recPoints = []; recPoints.push(x, y + radius);