Skip to content

Ability to have different radii for each corner of a rounded rectangle #7154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from

Conversation

ChrisCPI
Copy link

@ChrisCPI ChrisCPI commented May 28, 2025

Please do not update the README or Change Log, we will do this when we merge your PR.

This PR (delete as applicable)

  • Adds a new feature
  • Fixes a bug

Describe the changes below:

EDIT: This commit fixes the issue of jagged edges. This PR has been updated to match that logic. Since now this PR won't directly fix this issue, any mention of it will be crossed out below.


In summary, this PR adds the ability to set different radii for each corner of a rectangle, and no longer reduces the amount of segments to render (fix #7152).

I hope I followed all the rules for doing a pull request, please do let me know if I need to adjust anything. I'm especially not sure of how to properly handle the JSDoc comments.

All of the changes (to the Rectangle class, unless otherwise noted)

  • The properties radiusTopLeft, radiusTopRight, radiusBottomLeft and radiusBottomRight have been added. These define the radii for their respective corners.
  • The isRounded property has been changed to a getter. Returns true if any of the new aforementioned radius properties are not equal to 0.
  • The parameters for the setRounded method are changed to topLeft, topRight, bottomLeft and bottomRight, for the ability to set the radius of each corner. If ONLY topLeft is defined, then that radius is applied to all 4 corners (this prevents existing use cases of this method from breaking).
  • The radius property now acts as a getter and a setter. As a getter, it returns radiusTopLeft. As a setter, it runs setRounded, passing in the value its being set to.
  • updateRoundedData has been adjusted to accommodate setting individual radii of each corner and edge.
    • When calculating the segments, it no longer divides the radius by 5. This fixes an issue that was causing the corners to look rough in the WebGL renderer.
  • (RectangleCanvasRenderer) Updated the DrawRoundedRect function to support drawing individual radii for each corner.
image

@ChrisCPI ChrisCPI changed the base branch from master to v4.0.0 May 30, 2025 00:51
@ChrisCPI ChrisCPI changed the base branch from v4.0.0 to master May 30, 2025 00:52
@ChrisCPI ChrisCPI changed the title Rounded rectangle improvements Ability to have different radii for each corner of a rounded rectangle May 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Rounded rectangles have jagged edges?
1 participant