firka/flutter
firka/flutter
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reverts "fix: mask disappeared when having nested mask filter on Flutter web HTML (#45166)" (flutter/engine#53725)

Browse Source 
Reverts: flutter/engine#45166
Initiated by: jiahaog
Reason for reverting: This commit seems to cause the debug banner of a material app to be unnecessarily blurred. For example, one of the tests runs the following flutter app:

<details>

<summary>Code</summary>

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Materia
Original PR Author: Kingtous

Reviewed By: {yjbanov, harryterkelsen}

This change reverts the following previous change:
Hi from [Dora team](https://www.dora.run/), which powers web developers to build their 3d websites in just a few seconds.

This PR fixes: https://github.com/flutter/flutter/issues/133443, related: https://github.com/flutter/flutter/issues/58546

The original codes attempts to cache the css string but it causes bugs when encountering nested the same mask filter blur. We should also set `filter` properties when currentFilter == incoming mask filter using the cached css string, not just ignore it. 

[C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
This commit is contained in:
auto-submit[bot] 2024-07-04 07:04:25 +00:00 committed by GitHub
parent efbf7ddc57
commit a918c608b8
2 changed files with 13 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
engine/src/flutter/lib/web_ui/lib/src/engine/canvas_pool.dart
View File

@ -934,7 +934,6 @@ class ContextStateHandle {
} }
ui.MaskFilter? _currentFilter; ui.MaskFilter? _currentFilter;
String? _currentFilterCss;
SurfacePaintData? _lastUsedPaint; SurfacePaintData? _lastUsedPaint;
/// Currently active shader bounds. /// Currently active shader bounds.
@ -1004,20 +1003,19 @@ class ContextStateHandle {
} }
final ui.MaskFilter? maskFilter = paint.maskFilter; final ui.MaskFilter? maskFilter = paint.maskFilter;
if (maskFilter != null) { if (!_renderMaskFilterForWebkit) {
if (!_renderMaskFilterForWebkit) { if (_currentFilter != maskFilter) {
if (_currentFilter != maskFilter) { _currentFilter = maskFilter;
_currentFilter = maskFilter; context.filter = maskFilterToCanvasFilter(maskFilter);
_currentFilterCss = maskFilterToCanvasFilter(maskFilter); }
} } else {
context.filter = _currentFilterCss; // WebKit does not support the `filter` property. Instead we apply a
} else { // shadow to the shape of the same color as the paint and the same blur
// WebKit does not support the `filter` property. Instead we apply a // as the mask filter.
// shadow to the shape of the same color as the paint and the same blur //
// as the mask filter. // Note that on WebKit the cached value of _currentFilter is not useful.
// // Instead we destructure it into the shadow properties and cache those.
// Note that on WebKit the cached value of _currentFilter is not useful. if (maskFilter != null) {
// Instead we destructure it into the shadow properties and cache those.
context.save(); context.save();
context.shadowBlur = convertSigmaToRadius(maskFilter.webOnlySigma); context.shadowBlur = convertSigmaToRadius(maskFilter.webOnlySigma);
// Shadow color must be fully opaque. // Shadow color must be fully opaque.

32
engine/src/flutter/lib/web_ui/test/html/compositing/canvas_mask_filter_golden_test.dart
View File

@ -150,38 +150,6 @@ Future<void> testMain() async {
await canvasScreenshot(rc, 'mask_filter_transformed_$browser', await canvasScreenshot(rc, 'mask_filter_transformed_$browser',
region: screenRect); region: screenRect);
}); });
test('multiple MaskFilter.blur in $browser', () async {
const double screenWidth = 300.0;
const double screenHeight = 300.0;
const ui.Rect screenRect =
ui.Rect.fromLTWH(0, 0, screenWidth, screenHeight);
ContextStateHandle.debugEmulateWebKitMaskFilter = isWebkit;
final RecordingCanvas rc = RecordingCanvas(screenRect);
final SurfacePaint paint = SurfacePaint()
..maskFilter = const ui.MaskFilter.blur(ui.BlurStyle.normal, 5);
rc.save();
rc.drawCircle(const ui.Offset(150, 150), 100,
paint..color = const ui.Color(0xFFC8C800));
rc.restore();
rc.save();
rc.drawCircle(const ui.Offset(150, 150), 50,
paint..color = const ui.Color(0xFFC800C8));
rc.restore();
rc.save();
rc.drawCircle(
const ui.Offset(150, 150),
20,
paint
..color = const ui.Color(0xFF00C8C8)
..maskFilter = const ui.MaskFilter.blur(ui.BlurStyle.normal, 10));
rc.restore();
await canvasScreenshot(rc, 'multiple_mask_filter_$browser',
region: screenRect);
});
} }
testMaskFilterBlur(); testMaskFilterBlur();