Skip to content

Commit 62661b4

Browse files
photonstormphotonstorm
committed
Updated rounded rect functions
1 parent cc5f1bb commit 62661b4

2 files changed

Lines changed: 54 additions & 52 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44

55
### New Features
66

7+
* Graphics.fillRoundedRect will draw a stroked rounded rectangle to a Graphics object. The radius of the corners can be either a number, or an object, allowing you to specify different radius per corner (thanks @TadejZupancic)
8+
* Graphics.strokeRoundedRect will draw a filled rounded rectangle to a Graphics object. The radius of the corners can be either a number, or an object, allowing you to specify different radius per corner (thanks @TadejZupancic)
9+
710
### Updates
811

912
* DataManager.removeValue (and by extension the `remove` method too) will not emit the parent of the DataManager as the 2nd argument in the `removedata` event, to keep it consistent with the set events (thanks @rexrainbow)

‎src/gameobjects/graphics/Graphics.js‎

Lines changed: 51 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ var Commands = require('./Commands');
1010
var Components = require('../components');
1111
var Ellipse = require('../../geom/ellipse/');
1212
var GameObject = require('../GameObject');
13+
var GetFastValue = require('../../utils/object/GetFastValue');
1314
var GetValue = require('../../utils/object/GetValue');
1415
var MATH_CONST = require('../../math/const');
1516
var Render = require('./GraphicsRender');
@@ -559,41 +560,40 @@ var Graphics = new Class({
559560
* @param {number} width - The width of the rectangle.
560561
* @param {number} height - The height of the rectangle.
561562
* @param {number} [radius = 20] - The corner radius; It can also be an object to specify different radii for corners
562-
* @param {number} [radius.tl = 0] Top left
563-
* @param {number} [radius.tr = 0] Top right
564-
* @param {number} [radius.br = 0] Bottom right
565-
* @param {number} [radius.bl = 0] Bottom left
563+
* @param {number} [radius.tl = 20] Top left
564+
* @param {number} [radius.tr = 20] Top right
565+
* @param {number} [radius.br = 20] Bottom right
566+
* @param {number} [radius.bl = 20] Bottom left
566567
*
567568
* @return {Phaser.GameObjects.Graphics} This Game Object.
568569
*/
569570
fillRoundedRect: function (x, y, width, height, radius)
570571
{
571-
if (typeof radius === 'number')
572-
{
573-
radius = {tl: radius, tr: radius, br: radius, bl: radius};
574-
}
575-
else if (typeof radius === 'object')
576-
{
577-
radius.tl = radius.tl || 0;
578-
radius.tr = radius.tr || 0;
579-
radius.br = radius.br || 0;
580-
radius.bl = radius.bl || 0;
581-
}
582-
else
572+
if (radius === undefined) { radius = 20; }
573+
574+
var tl = radius;
575+
var tr = radius;
576+
var bl = radius;
577+
var br = radius;
578+
579+
if (typeof radius !== 'number')
583580
{
584-
radius = {tl: 20, tr: 20, br: 20, bl: 20};
581+
tl = GetFastValue(radius, 'tl', 20);
582+
tr = GetFastValue(radius, 'tr', 20);
583+
bl = GetFastValue(radius, 'bl', 20);
584+
br = GetFastValue(radius, 'br', 20);
585585
}
586586

587587
this.beginPath();
588-
this.moveTo(x + radius.tl, y);
589-
this.lineTo(x + width - radius.tr, y);
590-
this.arc(x + width - radius.tr, y + radius.tr, radius.tr, -MATH_CONST.TAU, 0);
591-
this.lineTo(x + width, y + height - radius.br);
592-
this.arc(x + width - radius.br, y + height - radius.br, radius.br, 0, MATH_CONST.TAU);
593-
this.lineTo(x + radius.bl, y + height);
594-
this.arc(x + radius.bl, y + height - radius.bl, radius.bl, MATH_CONST.TAU, Math.PI);
595-
this.lineTo(x, y + radius.tl);
596-
this.arc(x + radius.tl, y + radius.tl, radius.tl, -Math.PI, -MATH_CONST.TAU);
588+
this.moveTo(x + tl, y);
589+
this.lineTo(x + width - tr, y);
590+
this.arc(x + width - tr, y + tr, tr, -MATH_CONST.TAU, 0);
591+
this.lineTo(x + width, y + height - br);
592+
this.arc(x + width - br, y + height - br, br, 0, MATH_CONST.TAU);
593+
this.lineTo(x + bl, y + height);
594+
this.arc(x + bl, y + height - bl, bl, MATH_CONST.TAU, Math.PI);
595+
this.lineTo(x, y + tl);
596+
this.arc(x + tl, y + tl, tl, -Math.PI, -MATH_CONST.TAU);
597597
this.fillPath();
598598

599599
return this;
@@ -610,41 +610,40 @@ var Graphics = new Class({
610610
* @param {number} width - The width of the rectangle.
611611
* @param {number} height - The height of the rectangle.
612612
* @param {number} [radius = 20] - The corner radius; It can also be an object to specify different radii for corners
613-
* @param {number} [radius.tl = 0] Top left
614-
* @param {number} [radius.tr = 0] Top right
615-
* @param {number} [radius.br = 0] Bottom right
616-
* @param {number} [radius.bl = 0] Bottom left
613+
* @param {number} [radius.tl = 20] Top left
614+
* @param {number} [radius.tr = 20] Top right
615+
* @param {number} [radius.br = 20] Bottom right
616+
* @param {number} [radius.bl = 20] Bottom left
617617
*
618618
* @return {Phaser.GameObjects.Graphics} This Game Object.
619619
*/
620620
strokeRoundedRect: function (x, y, width, height, radius)
621621
{
622-
if (typeof radius === 'number')
623-
{
624-
radius = {tl: radius, tr: radius, br: radius, bl: radius};
625-
}
626-
else if (typeof radius === 'object')
627-
{
628-
radius.tl = radius.tl || 0;
629-
radius.tr = radius.tr || 0;
630-
radius.br = radius.br || 0;
631-
radius.bl = radius.bl || 0;
632-
}
633-
else
622+
if (radius === undefined) { radius = 20; }
623+
624+
var tl = radius;
625+
var tr = radius;
626+
var bl = radius;
627+
var br = radius;
628+
629+
if (typeof radius !== 'number')
634630
{
635-
radius = {tl: 20, tr: 20, br: 20, bl: 20};
631+
tl = GetFastValue(radius, 'tl', 20);
632+
tr = GetFastValue(radius, 'tr', 20);
633+
bl = GetFastValue(radius, 'bl', 20);
634+
br = GetFastValue(radius, 'br', 20);
636635
}
637636

638637
this.beginPath();
639-
this.moveTo(x + radius.tl, y);
640-
this.lineTo(x + width - radius.tr, y);
641-
this.arc(x + width - radius.tr, y + radius.tr, radius.tr, -MATH_CONST.TAU, 0);
642-
this.lineTo(x + width, y + height - radius.br);
643-
this.arc(x + width - radius.br, y + height - radius.br, radius.br, 0, MATH_CONST.TAU);
644-
this.lineTo(x + radius.bl, y + height);
645-
this.arc(x + radius.bl, y + height - radius.bl, radius.bl, MATH_CONST.TAU, Math.PI);
646-
this.lineTo(x, y + radius.tl);
647-
this.arc(x + radius.tl, y + radius.tl, radius.tl, -Math.PI, -MATH_CONST.TAU);
638+
this.moveTo(x + tl, y);
639+
this.lineTo(x + width - tr, y);
640+
this.arc(x + width - tr, y + tr, tr, -MATH_CONST.TAU, 0);
641+
this.lineTo(x + width, y + height - br);
642+
this.arc(x + width - br, y + height - br, br, 0, MATH_CONST.TAU);
643+
this.lineTo(x + bl, y + height);
644+
this.arc(x + bl, y + height - bl, bl, MATH_CONST.TAU, Math.PI);
645+
this.lineTo(x, y + tl);
646+
this.arc(x + tl, y + tl, tl, -Math.PI, -MATH_CONST.TAU);
648647
this.strokePath();
649648

650649
return this;

0 commit comments

Comments
 (0)