Fix anti-aliasing when painting borders with solid colors. #122317

bernaferrari · 2023-03-09T19:12:06Z

Fix #13675 by reducing paint area by the width of the border, when border has opacity of 1.

There are many many ways to face this challenge. I opted into the "slightly-weirder but cleaner" solution, since I need to cast OutlinedBorder in ShapeDecoration. The other option would be adding isShadow = false to paintInterior (or maybe even an enum like PaintInteriorKind) so we can differ between shadows and not shadows (we want shadows to be painted over the same area). This would add the calculation everywhere (RoundedRectangleBorder, CircleBorder, StadiumBorder, etc), so I thought it was simpler to just put in ShapeDecoration (simpler + easier to maintain!).

✅ This fixes color.
✅ Images get bounded already when there is a border, so this isn't needed for them.
❌ This doesn't fix gradient, for now (should it? Should it work the same as images or color?). If you have a lerp between a solid and transparent border, the gradient will jump at t=0. It is small, but necessary. Which issue is better to have?

bernaferrari · 2023-03-19T16:18:37Z

packages/flutter/test/material/data_table_test.dart

They are flipped because of this #122034 (comment)

I don't know which name would fit better. borderVerticalLines? Or I just flip them and vertical: borderHorizontal?

They don't appear flipped to me, and make sense as-is. They're referring to the border size on the vertical and horizontal sides of the rect, right?

gspencergoog · 2023-04-27T16:50:44Z

It's also some with borders too:

Here's an example of the diffs for one without borders:

bernaferrari · 2023-04-27T16:51:21Z

Thanks. I'll debug that here.

gspencergoog · 2023-04-27T16:52:09Z

They're pretty trivial, so as long as we can say that they are more correct now than they were, I'm OK with approving them.

bernaferrari · 2023-04-27T16:53:35Z

I'll see if I can debug today (at max, until weekend) and tell you the verdict. I think the code I just pushed should help. Please check here again in a few hours when Google Testing has ran again to see if it changed.. lol

bernaferrari · 2023-04-27T16:54:33Z

Meanwhile, if you want to play with borders, I have two other border-related-PRs waiting for your feedback 😛.

flutter-dashboard · 2023-04-27T17:23:38Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #122317 at sha 92de4b2

gspencergoog · 2023-04-27T17:32:43Z

I approved the goldens. Looks like they are fine.

Hixie · 2023-06-20T22:44:57Z

packages/flutter/lib/src/painting/box_decoration.dart

+      // rounding error leaking the background color around the clipped
+      // shape.
+      // https://github.com/flutter/flutter/issues/13675
+      final Rect ajustedRect = _adjustRectOnOutlinedBorder(rect, textDirection);


nit: adjusted

Thanks! I'm traveling to SF, I'll fix this (and my other PRs) next week.

Hixie · 2023-06-20T22:45:32Z

packages/flutter/lib/src/painting/box_decoration.dart

+      // When border is filled, the rect is reduced to avoid anti-aliasing
+      // rounding error leaking the background color around the clipped
+      // shape.
+      // https://github.com/flutter/flutter/issues/13675


nit: no need to link to the issue, just put whatever is relevant in the comment. (The code will probably outlive the bug database.)

flutter-dashboard · 2023-07-10T22:48:26Z

This pull request executed golden file tests, but it has not been updated in a while (20+ days). Test results from Gold expire after as many days, so this pull request will need to be updated with a fresh commit in order to get results from Gold.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

bernaferrari · 2023-07-11T00:32:01Z

Status: I went on vacation, I came back, I already fixed a few pending PRs, this is coming pretty soon.

CoolDude53 · 2023-08-29T15:48:30Z

@bernaferrari any update on this?

bernaferrari · 2023-08-29T16:12:27Z

Not yet, I got ready a few things that were pending already, but this is tricky because of the Google Testing, so it is trial and error and I need to ask someone from Google every trial and error if there was a progress.

bernaferrari · 2023-10-31T23:54:21Z

Without being able to test on google testing, I think I'll give up on this for now :(

Trying to reland #122317 in 2024. Let's see if we can. <img width="666" alt="image" src="https://user-images.githubusercontent.com/351125/182002867-03d55bbb-163d-48b9-ba3c-ed32dbef2680.png"> Side effect: shapes with border will be rounder: ![Frame 6](https://github.com/user-attachments/assets/95324ebc-8db5-4365-817f-bc62304b9044) Close #13675.

…53365) Trying to reland flutter#122317 in 2024. Let's see if we can. <img width="666" alt="image" src="https://user-images.githubusercontent.com/351125/182002867-03d55bbb-163d-48b9-ba3c-ed32dbef2680.png"> Side effect: shapes with border will be rounder: ![Frame 6](https://github.com/user-attachments/assets/95324ebc-8db5-4365-817f-bc62304b9044) Close flutter#13675.

flutter-dashboard bot added the framework flutter/packages/flutter repository. See also f: labels. label Mar 9, 2023

bernaferrari force-pushed the Avoid-Clipping-Edges branch 4 times, most recently from 5c974c4 to 0933a9b Compare March 9, 2023 19:32

This comment was marked as outdated.

Sign in to view

flutter-dashboard bot added the will affect goldens Changes to golden files label Mar 9, 2023

bernaferrari force-pushed the Avoid-Clipping-Edges branch 4 times, most recently from c9402fd to 1517d4f Compare March 9, 2023 21:39

This comment was marked as outdated.

Sign in to view

bernaferrari force-pushed the Avoid-Clipping-Edges branch 2 times, most recently from c88563b to 82d5630 Compare March 10, 2023 14:49

This comment was marked as outdated.

Sign in to view

HansMuller requested a review from gspencergoog March 17, 2023 22:00

bernaferrari force-pushed the Avoid-Clipping-Edges branch 8 times, most recently from 9a594d2 to 7d69b22 Compare March 19, 2023 16:17

bernaferrari commented Mar 19, 2023

View reviewed changes

flutter-dashboard bot added the f: material design flutter/packages/flutter/material repository. label Mar 19, 2023

bernaferrari force-pushed the Avoid-Clipping-Edges branch 2 times, most recently from f80f915 to cb6bc78 Compare March 19, 2023 16:30

This comment was marked as outdated.

Sign in to view

bernaferrari force-pushed the Avoid-Clipping-Edges branch from cb6bc78 to 650fac1 Compare March 20, 2023 03:55

bernaferrari added 4 commits April 27, 2023 13:44

Fix PR.

8aced18

Update again.

f9dab85

Fix PR comments.

25ec7c9

Add hyphen.

4cd9dc6

bernaferrari force-pushed the Avoid-Clipping-Edges branch from e7ed131 to 90fda14 Compare April 27, 2023 16:45

Make it more sensible.

2e68863

bernaferrari force-pushed the Avoid-Clipping-Edges branch from 90fda14 to 2e68863 Compare April 27, 2023 16:46

Refactor to a method.

aff0080

Refactor to a method.

92de4b2

Merge branch 'master' into Avoid-Clipping-Edges

565563e

Hixie reviewed Jun 20, 2023

View reviewed changes

bernaferrari closed this Oct 31, 2023

gnprice mentioned this pull request Aug 12, 2024

Circular-shaped decorations are not properly clipped #13675

Closed

bernaferrari mentioned this pull request Aug 13, 2024

Fix anti-aliasing when painting borders with solid colors. #153365

Merged

Fix anti-aliasing when painting borders with solid colors. #122317

Fix anti-aliasing when painting borders with solid colors. #122317

Uh oh!

Conversation

bernaferrari commented Mar 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

bernaferrari Mar 19, 2023

Choose a reason for hiding this comment

Uh oh!

gspencergoog Mar 24, 2023

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

gspencergoog commented Apr 27, 2023

Uh oh!

bernaferrari commented Apr 27, 2023

Uh oh!

gspencergoog commented Apr 27, 2023

Uh oh!

bernaferrari commented Apr 27, 2023

Uh oh!

bernaferrari commented Apr 27, 2023

Uh oh!

flutter-dashboard bot commented Apr 27, 2023

Uh oh!

gspencergoog commented Apr 27, 2023

Uh oh!

Hixie Jun 20, 2023

Choose a reason for hiding this comment

Uh oh!

bernaferrari Jun 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hixie Jun 20, 2023

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard bot commented Jul 10, 2023

Uh oh!

bernaferrari commented Jul 11, 2023

Uh oh!

CoolDude53 commented Aug 29, 2023

Uh oh!

bernaferrari commented Aug 29, 2023

Uh oh!

bernaferrari commented Oct 31, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bernaferrari commented Mar 9, 2023 •

edited

Loading

bernaferrari Jun 20, 2023 •

edited

Loading