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

simonbrunel commented Jun 26, 2018

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);

This comment has been minimized.

Copy link
@simonbrunel

simonbrunel Jun 26, 2018

Author Member

The minor artifacts on Chrome when drawing fully rounded rectangles:

image

@simonbrunel simonbrunel requested review from benmccann and etimberg Jun 26, 2018
@simonbrunel simonbrunel added this to the Version 2.8 milestone Jun 26, 2018
@@ -222,7 +222,7 @@ describe('Point element tests', function() {
15 - offset,
Math.SQRT2 * 2,
Math.SQRT2 * 2,
2 / 2
2 * 0.425

This comment has been minimized.

Copy link
@benmccann

benmccann Jun 26, 2018

Collaborator

maybe a comment here explaining what 0.425 is would be helpful

This comment has been minimized.

Copy link
@simonbrunel

simonbrunel Jun 26, 2018

Author Member

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
2 checks passed
2 checks passed
codeclimate All good!
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@simonbrunel simonbrunel deleted the simonbrunel:fix/rounded-rect branch Jun 26, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
You can’t perform that action at this time.