Add ImageFilter and BackdropFilter to CanvasKit backend (flutter#13768)

* Implement ImageFilter.blur and BackdropFilter

* update licenses file

* Respond to review comments

Author: Harry Terkelsen

ci/licenses_golden/licenses_flutter

@@ -361,6 +361,7 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/color_filter.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/engine_delegate.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/fonts.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/image.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/image_filter.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/initialization.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/layer.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/compositor/layer_scene_builder.dart

lib/web_ui/lib/src/engine.dart

@@ -29,6 +29,7 @@ part 'engine/compositor/color_filter.dart';
 part 'engine/compositor/engine_delegate.dart';
 part 'engine/compositor/fonts.dart';
 part 'engine/compositor/image.dart';
+part 'engine/compositor/image_filter.dart';
 part 'engine/compositor/initialization.dart';
 part 'engine/compositor/layer.dart';
 part 'engine/compositor/layer_scene_builder.dart';

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

@@ -33,6 +33,19 @@ class SkCanvas {
         'saveLayer', <js.JsObject>[makeSkRect(bounds), makeSkPaint(paint)]);
   }
 
+  int saveLayerWithFilter(ui.Rect bounds, ui.ImageFilter filter) {
+    final SkImageFilter skImageFilter = filter;
+    return skCanvas.callMethod(
+      'saveLayer',
+      <dynamic>[
+        null,
+        skImageFilter.skImageFilter,
+        0,
+        makeSkRect(bounds),
+      ],
+    );
+  }
+
   void restore() {
     skCanvas.callMethod('restore');
   }

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

@@ -0,0 +1,24 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+part of engine;
+
+/// The CanvasKit implementation of [ui.ImageFilter].
+///
+/// Currently only supports `blur`.
+class SkImageFilter implements ui.ImageFilter {
+  js.JsObject skImageFilter;
+
+  SkImageFilter.blur({double sigmaX = 0.0, double sigmaY = 0.0}) {
+    skImageFilter = canvasKit['SkImageFilter'].callMethod(
+      'MakeBlur',
+      <dynamic>[
+        sigmaX,
+        sigmaY,
+        canvasKit['TileMode']['Clamp'],
+        null,
+      ],
+    );
+  }
+}

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

@@ -9,7 +9,7 @@ const bool experimentalUseSkia =
     bool.fromEnvironment('FLUTTER_WEB_USE_SKIA', defaultValue: false);
 
 /// The URL to use when downloading the CanvasKit script and associated wasm.
-const String canvasKitBaseUrl = 'https://unpkg.com/canvaskit-wasm@0.7.0/bin/';
+const String canvasKitBaseUrl = 'https://particles.skia.org/static/';
 
 /// Initialize the Skia backend.
 ///

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

@@ -93,6 +93,19 @@ abstract class ContainerLayer extends Layer {
   }
 }
 
+class BackdropFilterLayer extends ContainerLayer {
+  final ui.ImageFilter _filter;
+
+  BackdropFilterLayer(this._filter);
+
+  @override
+  void paint(PaintContext context) {
+    context.canvas.saveLayerWithFilter(paintBounds, _filter);
+    paintChildren(context);
+    context.canvas.restore();
+  }
+}
+
 /// A layer that clips its child layers by a given [Path].
 class ClipPathLayer extends ContainerLayer {
   /// The path used to clip child layers.

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

@@ -92,7 +92,8 @@ class LayerSceneBuilder implements ui.SceneBuilder {
   @override
   ui.BackdropFilterEngineLayer pushBackdropFilter(ui.ImageFilter filter,
       {ui.EngineLayer oldLayer}) {
-    throw UnimplementedError();
+    pushLayer(BackdropFilterLayer(filter));
+    return null;
   }
 
   @override

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

@@ -156,6 +156,12 @@ js.JsObject makeSkPaint(ui.Paint paint) {
     skPaint.callMethod('setMaskFilter', <js.JsObject>[skMaskFilter]);
   }
 
+  if (paint.imageFilter != null) {
+    final SkImageFilter skImageFilter = paint.imageFilter;
+    skPaint.callMethod(
+        'setImageFilter', <js.JsObject>[skImageFilter.skImageFilter]);
+  }
+
   if (paint.colorFilter != null) {
     EngineColorFilter engineFilter = paint.colorFilter;
     SkColorFilter skFilter = engineFilter._toSkColorFilter();

lib/web_ui/lib/src/engine/shader.dart

@@ -231,3 +231,13 @@ class GradientConical extends EngineGradient {
     throw UnimplementedError();
   }
 }
+
+/// Backend implementation of [ui.ImageFilter].
+///
+/// Currently only `blur` is supported.
+class EngineImageFilter implements ui.ImageFilter {
+  EngineImageFilter.blur({this.sigmaX = 0.0, this.sigmaY = 0.0});
+
+  final double sigmaX;
+  final double sigmaY;
+}

lib/web_ui/lib/src/engine/surface/backdrop_filter.dart

@@ -85,11 +85,12 @@ class PersistedBackdropFilter extends PersistedContainerSurface
         ..backgroundColor = '#000'
         ..opacity = '0.2';
     } else {
+      final EngineImageFilter engineFilter = filter;
       // CSS uses pixel radius for blur. Flutter & SVG use sigma parameters. For
       // Gaussian blur with standard deviation (normal distribution),
       // the blur will fall within 2 * sigma pixels.
       domRenderer.setElementStyle(_filterElement, 'backdrop-filter',
-          'blur(${math.max(filter.sigmaX, filter.sigmaY) * 2}px)');
+          'blur(${math.max(engineFilter.sigmaX, engineFilter.sigmaY) * 2}px)');
     }
   }