Skip to content
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

Enhance the rounded rectangle implementation #5597

Merged
merged 1 commit into from
Jun 26, 2018

Conversation

simonbrunel
Copy link
Member

Use arcTo instead of quadraticCurveTo (both methods have the same compatibility level) because it generates better results when the final rect is a circle but also when it's actually a rectangle and not a square. This change is needed by the datalabels plugin where the user can configure the borderRadius and thus generate circle from a rounded rectangle.

image
image

Use `arcTo` instead of `quadraticCurveTo` (both methods have the same compatibility level) because it generates better results when the final rect is a circle but also when it's actually a rectangle and not a square. This change is needed by the datalabels plugin where the user can configure the `borderRadius` and thus generate circle from a rounded rectangle.
// NOTE(SB) `epsilon` helps to prevent minor artifacts appearing
// on Chrome when `r` is exactly half the height or the width.
var epsilon = 0.0000001;
var r = Math.min(radius, (height / 2) - epsilon, (width / 2) - epsilon);
Copy link
Member Author

@simonbrunel simonbrunel Jun 26, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The minor artifacts on Chrome when drawing fully rounded rectangles:

image

@@ -222,7 +222,7 @@ describe('Point element tests', function() {
15 - offset,
Math.SQRT2 * 2,
Math.SQRT2 * 2,
2 / 2
2 * 0.425
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe a comment here explaining what 0.425 is would be helpful

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 / 2 wasn't explained, you need to read the roundedRect method to understand why and that's the same for 0.425, which one is properly explained in the method body. I don't think we should duplicate the comment here since it's exactly the same value in the calling code.

@simonbrunel simonbrunel merged commit 88308c6 into chartjs:master Jun 26, 2018
@simonbrunel simonbrunel deleted the fix/rounded-rect branch June 26, 2018 15:58
exwm pushed a commit to exwm/Chart.js that referenced this pull request Apr 30, 2021
Use `arcTo` instead of `quadraticCurveTo` (both methods have the same compatibility level) because it generates better results when the final rect is a circle but also when it's actually a rectangle and not a square. This change is needed by the datalabels plugin where the user can configure the `borderRadius` and thus generate circle from a rounded rectangle.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants