-
Notifications
You must be signed in to change notification settings - Fork 6k
[web] Fix some clip and stroke calculations #36801
Conversation
|
Gold has detected about 1 new digest(s) on patchset 2. |
| double height = rect.height.abs(); | ||
|
|
||
| final bool isStroke = paint.style == ui.PaintingStyle.stroke; | ||
| final double strokeWidth = paint.strokeWidth ?? 0.0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we remove both of the if blocks below, if we did the following ahead of time?
if (paint.style == ui.PaintingStyle.fill || strokeWidth == 0.0) {
return rect;
}There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unfortunately, we can't.
Stroke-related adjustments aren't the only ones needed. We need to also adjust left and top to avoid flipped rectangles.
E.g. Rect.fromLTRB(200, 200, 100, 100) is completely fine in Flutter, but the DOM doesn't like it. If you do rect.width on a flipped rectangle, you get a negative value. Setting a negative width/height on a DOM element is equivalent to zero.
buildDrawRectElement and various draw operations used to handle it. See this:
engine/lib/web_ui/lib/src/engine/html/dom_canvas.dart
Lines 175 to 178 in 2ced979
| final double left = math.min(rect.left, rect.right); | |
| final double right = math.max(rect.left, rect.right); | |
| final double top = math.min(rect.top, rect.bottom); | |
| final double bottom = math.max(rect.top, rect.bottom); |
and:
engine/lib/web_ui/lib/src/engine/html/bitmap_canvas.dart
Lines 445 to 449 in 2ced979
| _drawElement( | |
| element, | |
| ui.Offset( | |
| math.min(rect.left, rect.right), math.min(rect.top, rect.bottom)), | |
| paint); |
All of that can go away now because rects produced by the new adjustRectForDom are never flipped.
|
Gold has detected about 2 new digest(s) on patchset 2. |
|
Gold has detected about 3 new digest(s) on patchset 3. |
harryterkelsen
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
|
Gold has detected about 3 new digest(s) on patchset 5. |
|
Gold has detected about 4 new digest(s) on patchset 7. |
When an element is drawn with a stroke paint, we correctly bake stroke width into the
transformcalculations. But if the the element is clipped, thetransformis recalculated without the stroke width math.This PR makes sure that the stroke width adjustments are carried over to the clip calculations.
Fixes flutter/flutter#76879
I added new screenshot tests, here's what they look like before and after the fix: