Created
May 26, 2023 17:37
-
-
Save Makio64/1223f7bc4cbe0465b4901eb8bf8f67ae to your computer and use it in GitHub Desktop.
drawRectRounded with different radius in pixijs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function drawRectRounded(graphics, x, y, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) { | |
// Starting from the top left corner. | |
graphics.moveTo(x + topLeftRadius, y) | |
// Drawing the top line with top right corner. | |
graphics.lineTo(x + width - topRightRadius, y) | |
graphics.quadraticCurveTo(x + width, y, x + width, y + topRightRadius) | |
// Drawing the right line with bottom right corner. | |
graphics.lineTo(x + width, y + height - bottomRightRadius) | |
graphics.quadraticCurveTo(x + width, y + height, x + width - bottomRightRadius, y + height) | |
// Drawing the bottom line with bottom left corner. | |
graphics.lineTo(x + bottomLeftRadius, y + height) | |
graphics.quadraticCurveTo(x, y + height, x, y + height - bottomLeftRadius) | |
// Drawing the left line with top left corner and closing the shape. | |
graphics.lineTo(x, y + topLeftRadius) | |
graphics.quadraticCurveTo(x, y, x + topLeftRadius, y) | |
// Since this shape will likely be filled, closePath ensures that the shape is fully closed. | |
graphics.closePath() | |
} | |
// Usage: | |
// const graphics = new PIXI.Graphics(); | |
// drawRectRounded(graphics, 10, 10, 200, 100, 20, 30, 40, 50); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment