-
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. |
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
transform
calculations. But if the the element is clipped, thetransform
is 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: