Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

Commit 619acd5

Browse files
authored
Revert "fix shadows and mask filter blurs (#16963)" (#17008)
Broke golden file tests in the framework. Reverting to unblock the engine roll to the framework. This reverts commit 6cfa7fc.
1 parent 41b371d commit 619acd5

File tree

11 files changed

+450
-582
lines changed

11 files changed

+450
-582
lines changed

lib/web_ui/dev/goldens_lock.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
repository: https://github.com/flutter/goldens.git
2-
revision: 8f692819e8881b7d2131dbd61d965c21d5e3e345
2+
revision: 1699ba6fd7093a0a610f82618fa30546e7974777

lib/web_ui/lib/src/engine/bitmap_canvas.dart

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -353,16 +353,17 @@ class BitmapCanvas extends EngineCanvas {
353353

354354
@override
355355
void drawImage(ui.Image image, ui.Offset p, SurfacePaintData paint) {
356-
_drawImage(image, p, paint);
356+
//_applyPaint(paint);
357+
final HtmlImage htmlImage = image;
358+
final html.ImageElement imgElement = htmlImage.cloneImageElement();
359+
String blendMode = _stringForBlendMode(paint.blendMode);
360+
imgElement.style.mixBlendMode = blendMode;
361+
_drawImage(imgElement, p);
357362
_childOverdraw = true;
358363
_canvasPool.allocateExtraCanvas();
359364
}
360365

361-
html.ImageElement _drawImage(ui.Image image, ui.Offset p, SurfacePaintData paint) {
362-
final HtmlImage htmlImage = image;
363-
final html.Element imgElement = htmlImage.cloneImageElement();
364-
final ui.BlendMode blendMode = paint.blendMode;
365-
imgElement.style.mixBlendMode = _stringForBlendMode(blendMode);
366+
void _drawImage(html.ImageElement imgElement, ui.Offset p) {
366367
if (_canvasPool.isClipped) {
367368
final List<html.Element> clipElements = _clipContent(
368369
_canvasPool._clipStack, imgElement, p, _canvasPool.currentTransform);
@@ -379,12 +380,12 @@ class BitmapCanvas extends EngineCanvas {
379380
rootElement.append(imgElement);
380381
_children.add(imgElement);
381382
}
382-
return imgElement;
383383
}
384384

385385
@override
386386
void drawImageRect(
387387
ui.Image image, ui.Rect src, ui.Rect dst, SurfacePaintData paint) {
388+
final HtmlImage htmlImage = image;
388389
final bool requiresClipping = src.left != 0 ||
389390
src.top != 0 ||
390391
src.width != image.width ||
@@ -394,6 +395,9 @@ class BitmapCanvas extends EngineCanvas {
394395
!requiresClipping) {
395396
drawImage(image, dst.topLeft, paint);
396397
} else {
398+
final html.Element imgElement = htmlImage.cloneImageElement();
399+
final ui.BlendMode blendMode = paint.blendMode;
400+
imgElement.style.mixBlendMode = _stringForBlendMode(blendMode);
397401
if (requiresClipping) {
398402
save();
399403
clipRect(dst);
@@ -410,8 +414,7 @@ class BitmapCanvas extends EngineCanvas {
410414
targetTop += topMargin;
411415
}
412416
}
413-
414-
final html.ImageElement imgElement = _drawImage(image, ui.Offset(targetLeft, targetTop), paint);
417+
_drawImage(imgElement, ui.Offset(targetLeft, targetTop));
415418
// To scale set width / height on destination image.
416419
// For clipping we need to scale according to
417420
// clipped-width/full image width and shift it according to left/top of

lib/web_ui/lib/src/engine/canvas_pool.dart

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -581,46 +581,49 @@ class _CanvasPool extends _SaveStackTracking {
581581

582582
void drawShadow(ui.Path path, ui.Color color, double elevation,
583583
bool transparentOccluder) {
584-
final SurfaceShadowData shadow = computeShadow(path.getBounds(), elevation);
585-
if (shadow != null) {
586-
// TODO(het): Shadows with transparent occluders are not supported
587-
// on webkit since filter is unsupported.
588-
if (transparentOccluder && browserEngine != BrowserEngine.webkit) {
589-
// We paint shadows using a path and a mask filter instead of the
590-
// built-in shadow* properties. This is because the color alpha of the
591-
// paint is added to the shadow. The effect we're looking for is to just
592-
// paint the shadow without the path itself, but if we use a non-zero
593-
// alpha for the paint the path is painted in addition to the shadow,
594-
// which is undesirable.
595-
context.save();
596-
context.translate(shadow.offset.dx, shadow.offset.dy);
597-
context.filter = _maskFilterToCss(
598-
ui.MaskFilter.blur(ui.BlurStyle.normal, shadow.blurWidth));
599-
context.strokeStyle = '';
600-
context.fillStyle = colorToCssString(color);
601-
_runPath(context, path);
602-
context.fill();
603-
context.restore();
604-
} else {
605-
// TODO(het): We fill the path with this paint, then later we clip
606-
// by the same path and fill it with a fully opaque color (we know
607-
// the color is fully opaque because `transparentOccluder` is false.
608-
// However, due to anti-aliasing of the clip, a few pixels of the
609-
// path we are about to paint may still be visible after we fill with
610-
// the opaque occluder. For that reason, we fill with the shadow color,
611-
// and set the shadow color to fully opaque. This way, the visible
612-
// pixels are less opaque and less noticeable.
613-
context.save();
614-
context.filter = 'none';
615-
context.strokeStyle = '';
616-
context.fillStyle = colorToCssString(color);
617-
context.shadowBlur = shadow.blurWidth;
618-
context.shadowColor = colorToCssString(color.withAlpha(0xff));
619-
context.shadowOffsetX = shadow.offset.dx;
620-
context.shadowOffsetY = shadow.offset.dy;
621-
_runPath(context, path);
622-
context.fill();
623-
context.restore();
584+
final List<CanvasShadow> shadows =
585+
ElevationShadow.computeCanvasShadows(elevation, color);
586+
if (shadows.isNotEmpty) {
587+
for (final CanvasShadow shadow in shadows) {
588+
// TODO(het): Shadows with transparent occluders are not supported
589+
// on webkit since filter is unsupported.
590+
if (transparentOccluder && browserEngine != BrowserEngine.webkit) {
591+
// We paint shadows using a path and a mask filter instead of the
592+
// built-in shadow* properties. This is because the color alpha of the
593+
// paint is added to the shadow. The effect we're looking for is to just
594+
// paint the shadow without the path itself, but if we use a non-zero
595+
// alpha for the paint the path is painted in addition to the shadow,
596+
// which is undesirable.
597+
context.save();
598+
context.translate(shadow.offsetX, shadow.offsetY);
599+
context.filter = _maskFilterToCss(
600+
ui.MaskFilter.blur(ui.BlurStyle.normal, shadow.blur));
601+
context.strokeStyle = '';
602+
context.fillStyle = colorToCssString(shadow.color);
603+
_runPath(context, path);
604+
context.fill();
605+
context.restore();
606+
} else {
607+
// TODO(het): We fill the path with this paint, then later we clip
608+
// by the same path and fill it with a fully opaque color (we know
609+
// the color is fully opaque because `transparentOccluder` is false.
610+
// However, due to anti-aliasing of the clip, a few pixels of the
611+
// path we are about to paint may still be visible after we fill with
612+
// the opaque occluder. For that reason, we fill with the shadow color,
613+
// and set the shadow color to fully opaque. This way, the visible
614+
// pixels are less opaque and less noticeable.
615+
context.save();
616+
context.filter = 'none';
617+
context.strokeStyle = '';
618+
context.fillStyle = colorToCssString(shadow.color);
619+
context.shadowBlur = shadow.blur;
620+
context.shadowColor = colorToCssString(shadow.color.withAlpha(0xff));
621+
context.shadowOffsetX = shadow.offsetX;
622+
context.shadowOffsetY = shadow.offsetY;
623+
_runPath(context, path);
624+
context.fill();
625+
context.restore();
626+
}
624627
}
625628
}
626629
}

lib/web_ui/lib/src/engine/compositor/util.dart

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,10 @@ js.JsArray<double> makeSkiaColorStops(List<double> colorStops) {
286286
return jsColorStops;
287287
}
288288

289+
// These must be kept in sync with `flow/layers/physical_shape_layer.cc`.
290+
const double kLightHeight = 600.0;
291+
const double kLightRadius = 800.0;
292+
289293
void drawSkShadow(
290294
js.JsObject skCanvas,
291295
SkPath path,

lib/web_ui/lib/src/engine/dom_canvas.dart

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -81,15 +81,14 @@ class DomCanvas extends EngineCanvas with SaveElementStackTracking {
8181
}());
8282
String effectiveTransform;
8383
final bool isStroke = paint.style == ui.PaintingStyle.stroke;
84-
final double strokeWidth = paint.strokeWidth ?? 0.0;
8584
final double left = math.min(rect.left, rect.right);
8685
final double right = math.max(rect.left, rect.right);
8786
final double top = math.min(rect.top, rect.bottom);
8887
final double bottom = math.max(rect.top, rect.bottom);
8988
if (currentTransform.isIdentity()) {
9089
if (isStroke) {
9190
effectiveTransform =
92-
'translate(${left - (strokeWidth / 2.0)}px, ${top - (strokeWidth / 2.0)}px)';
91+
'translate(${left - (paint.strokeWidth / 2.0)}px, ${top - (paint.strokeWidth / 2.0)}px)';
9392
} else {
9493
effectiveTransform = 'translate(${left}px, ${top}px)';
9594
}
@@ -98,7 +97,7 @@ class DomCanvas extends EngineCanvas with SaveElementStackTracking {
9897
final Matrix4 translated = currentTransform.clone();
9998
if (isStroke) {
10099
translated.translate(
101-
left - (strokeWidth / 2.0), top - (strokeWidth / 2.0));
100+
left - (paint.strokeWidth / 2.0), top - (paint.strokeWidth / 2.0));
102101
} else {
103102
translated.translate(left, top);
104103
}
@@ -110,18 +109,18 @@ class DomCanvas extends EngineCanvas with SaveElementStackTracking {
110109
..transformOrigin = '0 0 0'
111110
..transform = effectiveTransform;
112111

113-
final String cssColor =
114-
paint.color == null ? '#000000' : colorToCssString(paint.color);
112+
final String cssColor = paint.color == null ? '#000000'
113+
: colorToCssString(paint.color);
115114

116115
if (paint.maskFilter != null) {
117116
style.filter = 'blur(${paint.maskFilter.webOnlySigma}px)';
118117
}
119118

120119
if (isStroke) {
121120
style
122-
..width = '${right - left - strokeWidth}px'
123-
..height = '${bottom - top - strokeWidth}px'
124-
..border = '${strokeWidth}px solid $cssColor';
121+
..width = '${right - left - paint.strokeWidth}px'
122+
..height = '${bottom - top - paint.strokeWidth}px'
123+
..border = '${paint.strokeWidth}px solid $cssColor';
125124
} else {
126125
style
127126
..width = '${right - left}px'

0 commit comments

Comments
 (0)