mirror of
https://github.com/photonstorm/phaser
synced 2024-11-24 13:43:26 +00:00
Merge pull request #3755 from TadejZupancic/patch-8
Add rounded rectangle to Graphics
This commit is contained in:
commit
cc5f1bb91e
1 changed files with 102 additions and 0 deletions
|
@ -548,6 +548,108 @@ 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')
|
||||
{
|
||||
radius.tl = radius.tl || 0;
|
||||
radius.tr = radius.tr || 0;
|
||||
radius.br = radius.br || 0;
|
||||
radius.bl = radius.bl || 0;
|
||||
}
|
||||
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')
|
||||
{
|
||||
radius.tl = radius.tl || 0;
|
||||
radius.tr = radius.tr || 0;
|
||||
radius.br = radius.br || 0;
|
||||
radius.bl = radius.bl || 0;
|
||||
}
|
||||
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.
|
||||
*
|
||||
|
|
Loading…
Reference in a new issue