From 9affc60037412ddc822adafb450fa2834fdd6dae Mon Sep 17 00:00:00 2001 From: TadejZupancic Date: Fri, 15 Jun 2018 14:23:40 +0200 Subject: [PATCH 1/4] Update Graphics.js --- src/gameobjects/graphics/Graphics.js | 94 ++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) diff --git a/src/gameobjects/graphics/Graphics.js b/src/gameobjects/graphics/Graphics.js index 91032ea7b..49cf256a3 100644 --- a/src/gameobjects/graphics/Graphics.js +++ b/src/gameobjects/graphics/Graphics.js @@ -548,6 +548,100 @@ var Graphics = new Class({ return this; }, + /** + * Fill a rounded rectangle with the given position, size and radius. + * + * @method Phaser.GameObjects.Graphics#fillRoundedRect + * @since 3.11.0 + * + * @param {number} x - The x coordinate of the top-left of the rectangle. + * @param {number} y - The y coordinate of the top-left of the rectangle. + * @param {number} width - The width of the rectangle. + * @param {number} height - The height of the rectangle. + * @param {number} [radius = 20] - The corner radius; It can also be an object to specify different radii for corners + * @param {number} [radius.tl = 0] Top left + * @param {number} [radius.tr = 0] Top right + * @param {number} [radius.br = 0] Bottom right + * @param {number} [radius.bl = 0] Bottom left + * + * @return {Phaser.GameObjects.Graphics} This Game Object. + */ + fillRoundedRect: function (x, y, width, height, radius) + { + if (typeof radius === 'number') { + radius = {tl: radius, tr: radius, br: radius, bl: radius}; + } else if (typeof radius === 'object') { + var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0}; + for (var side in defaultRadius) { + radius[side] = radius[side] || defaultRadius[side]; + } + } + else { + radius = {tl: 20, tr: 20, br: 20, bl: 20}; + } + + this.beginPath(); + this.moveTo(x + radius.tl, y); + this.lineTo(x + width - radius.tr, y); + this.arc(x + width - radius.tr, y + radius.tr, radius.tr, -MATH_CONST.TAU, 0); + this.lineTo(x + width, y + height - radius.br); + this.arc(x + width - radius.br, y + height - radius.br, radius.br, 0, MATH_CONST.TAU); + this.lineTo(x + radius.bl, y + height); + this.arc(x + radius.bl, y + height - radius.bl, radius.bl, MATH_CONST.TAU, Math.PI); + this.lineTo(x, y + radius.tl); + this.arc(x + radius.tl, y + radius.tl, radius.tl, -Math.PI, -MATH_CONST.TAU); + this.fillPath(); + + return this; + }, + + /** + * Stroke a rounded rectangle with the given position, size and radius. + * + * @method Phaser.GameObjects.Graphics#strokeRoundedRect + * @since 3.11.0 + * + * @param {number} x - The x coordinate of the top-left of the rectangle. + * @param {number} y - The y coordinate of the top-left of the rectangle. + * @param {number} width - The width of the rectangle. + * @param {number} height - The height of the rectangle. + * @param {number} [radius = 20] - The corner radius; It can also be an object to specify different radii for corners + * @param {number} [radius.tl = 0] Top left + * @param {number} [radius.tr = 0] Top right + * @param {number} [radius.br = 0] Bottom right + * @param {number} [radius.bl = 0] Bottom left + * + * @return {Phaser.GameObjects.Graphics} This Game Object. + */ + strokeRoundedRect: function (x, y, width, height, radius) + { + if (typeof radius === 'number') { + radius = {tl: radius, tr: radius, br: radius, bl: radius}; + } else if (typeof radius === 'object') { + var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0}; + for (var side in defaultRadius) { + radius[side] = radius[side] || defaultRadius[side]; + } + } + else { + radius = {tl: 20, tr: 20, br: 20, bl: 20}; + } + + this.beginPath(); + this.moveTo(x + radius.tl, y); + this.lineTo(x + width - radius.tr, y); + this.arc(x + width - radius.tr, y + radius.tr, radius.tr, -MATH_CONST.TAU, 0); + this.lineTo(x + width, y + height - radius.br); + this.arc(x + width - radius.br, y + height - radius.br, radius.br, 0, MATH_CONST.TAU); + this.lineTo(x + radius.bl, y + height); + this.arc(x + radius.bl, y + height - radius.bl, radius.bl, MATH_CONST.TAU, Math.PI); + this.lineTo(x, y + radius.tl); + this.arc(x + radius.tl, y + radius.tl, radius.tl, -Math.PI, -MATH_CONST.TAU); + this.strokePath(); + + return this; + }, + /** * Fill the given point. * From 321aba14c3f25506a3ffeabb06dc2448269f9b53 Mon Sep 17 00:00:00 2001 From: TadejZupancic Date: Fri, 15 Jun 2018 14:31:44 +0200 Subject: [PATCH 2/4] Update Graphics.js --- src/gameobjects/graphics/Graphics.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/gameobjects/graphics/Graphics.js b/src/gameobjects/graphics/Graphics.js index 49cf256a3..7135b8729 100644 --- a/src/gameobjects/graphics/Graphics.js +++ b/src/gameobjects/graphics/Graphics.js @@ -568,15 +568,20 @@ var Graphics = new Class({ */ fillRoundedRect: function (x, y, width, height, radius) { - if (typeof radius === 'number') { + if (typeof radius === 'number') + { radius = {tl: radius, tr: radius, br: radius, bl: radius}; - } else if (typeof radius === 'object') { + } + else if (typeof radius === 'object') + { var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0}; - for (var side in defaultRadius) { + for (var side in defaultRadius) + { radius[side] = radius[side] || defaultRadius[side]; } } - else { + else + { radius = {tl: 20, tr: 20, br: 20, bl: 20}; } @@ -615,15 +620,20 @@ var Graphics = new Class({ */ strokeRoundedRect: function (x, y, width, height, radius) { - if (typeof radius === 'number') { + if (typeof radius === 'number') + { radius = {tl: radius, tr: radius, br: radius, bl: radius}; - } else if (typeof radius === 'object') { + } + else if (typeof radius === 'object') + { var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0}; - for (var side in defaultRadius) { + for (var side in defaultRadius) + { radius[side] = radius[side] || defaultRadius[side]; } } - else { + else + { radius = {tl: 20, tr: 20, br: 20, bl: 20}; } From caef54a34ef98bd6ce374741aa1710425058837e Mon Sep 17 00:00:00 2001 From: TadejZupancic Date: Fri, 15 Jun 2018 14:36:24 +0200 Subject: [PATCH 3/4] Update Graphics.js --- src/gameobjects/graphics/Graphics.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/gameobjects/graphics/Graphics.js b/src/gameobjects/graphics/Graphics.js index 7135b8729..2c2c57898 100644 --- a/src/gameobjects/graphics/Graphics.js +++ b/src/gameobjects/graphics/Graphics.js @@ -568,19 +568,19 @@ var Graphics = new Class({ */ fillRoundedRect: function (x, y, width, height, radius) { - if (typeof radius === 'number') + if (typeof radius === 'number') { radius = {tl: radius, tr: radius, br: radius, bl: radius}; - } - else if (typeof radius === 'object') + } + else if (typeof radius === 'object') { var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0}; - for (var side in defaultRadius) + for (var side in defaultRadius) { radius[side] = radius[side] || defaultRadius[side]; } } - else + else { radius = {tl: 20, tr: 20, br: 20, bl: 20}; } @@ -620,19 +620,19 @@ var Graphics = new Class({ */ strokeRoundedRect: function (x, y, width, height, radius) { - if (typeof radius === 'number') + if (typeof radius === 'number') { radius = {tl: radius, tr: radius, br: radius, bl: radius}; - } - else if (typeof radius === 'object') + } + else if (typeof radius === 'object') { var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0}; - for (var side in defaultRadius) + for (var side in defaultRadius) { radius[side] = radius[side] || defaultRadius[side]; } } - else + else { radius = {tl: 20, tr: 20, br: 20, bl: 20}; } From c1d0c11b30a7a2d279c3961a7e9bb84c67ddc4cd Mon Sep 17 00:00:00 2001 From: TadejZupancic Date: Mon, 18 Jun 2018 10:52:49 +0200 Subject: [PATCH 4/4] Update Graphics.js --- src/gameobjects/graphics/Graphics.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/gameobjects/graphics/Graphics.js b/src/gameobjects/graphics/Graphics.js index 2c2c57898..c44fac647 100644 --- a/src/gameobjects/graphics/Graphics.js +++ b/src/gameobjects/graphics/Graphics.js @@ -574,11 +574,10 @@ var Graphics = new Class({ } else if (typeof radius === 'object') { - var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0}; - for (var side in defaultRadius) - { - radius[side] = radius[side] || defaultRadius[side]; - } + radius.tl = radius.tl || 0; + radius.tr = radius.tr || 0; + radius.br = radius.br || 0; + radius.bl = radius.bl || 0; } else { @@ -626,11 +625,10 @@ var Graphics = new Class({ } else if (typeof radius === 'object') { - var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0}; - for (var side in defaultRadius) - { - radius[side] = radius[side] || defaultRadius[side]; - } + radius.tl = radius.tl || 0; + radius.tr = radius.tr || 0; + radius.br = radius.br || 0; + radius.bl = radius.bl || 0; } else {