Adding ImageShader support for CanvasKit (flutter/engine#18369)

* Adding ImageShader support for CanvasKit and fixing indices parameter for vertices.

* Removing trailing spaces.

* Using longer variable names.

engine/src/flutter/lib/web_ui/lib/src/engine/compositor/painting.dart

@@ -119,10 +119,10 @@ class SkPaint extends SkiaObject implements ui.Paint {
   bool _invertColors = false;
 
   @override
-  ui.Shader get shader => _shader;
+  ui.Shader get shader => _shader as ui.Shader;
   @override
   set shader(ui.Shader value) {
-    _shader = value;
+    _shader = value as EngineShader;
     _syncShader(skiaObject);
   }
   void _syncShader(js.JsObject object) {
@@ -132,7 +132,7 @@ class SkPaint extends SkiaObject implements ui.Paint {
     }
     object.callMethod('setShader', <js.JsObject>[skShader]);
   }
-  EngineGradient _shader;
+  EngineShader _shader;
 
   @override
   ui.MaskFilter get maskFilter => _maskFilter;

engine/src/flutter/lib/web_ui/lib/src/engine/compositor/vertices.dart

@@ -105,8 +105,6 @@ class SkVertices implements ui.Vertices {
       _encodePoints(positions),
       _encodePoints(textureCoordinates),
       colors,
-      null,
-      null,
       indices,
     ]);
 

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

@@ -18,7 +18,12 @@ bool _matrix4IsValid(Float32List matrix4) {
   return true;
 }
 
-abstract class EngineGradient implements ui.Gradient {
+abstract class EngineShader {
+  /// Create a shader for use in the Skia backend.
+  js.JsObject createSkiaShader();
+}
+
+abstract class EngineGradient implements ui.Gradient, EngineShader {
   /// Hidden constructor to prevent subclassing.
   EngineGradient._();
 
@@ -28,9 +33,6 @@ abstract class EngineGradient implements ui.Gradient {
   List<dynamic> webOnlySerializeToCssPaint() {
     throw UnsupportedError('CSS paint not implemented for this shader type');
   }
-
-  /// Create a shader for use in the Skia backend.
-  js.JsObject createSkiaShader();
 }
 
 class GradientSweep extends EngineGradient {
@@ -301,3 +303,29 @@ class EngineImageFilter implements ui.ImageFilter {
     return 'ImageFilter.blur($sigmaX, $sigmaY)';
   }
 }
+
+js.JsObject _skTileMode(ui.TileMode tileMode) {
+  switch(tileMode) {
+    case ui.TileMode.clamp:
+      return canvasKit['TileMode']['Clamp'];
+    case ui.TileMode.repeated:
+      return canvasKit['TileMode']['Repeat'];
+    case ui.TileMode.mirror:
+    default:
+      return canvasKit['TileMode']['Mirror'];
+  }
+}
+
+/// Backend implementation of [ui.ImageShader].
+class EngineImageShader implements ui.ImageShader, EngineShader {
+  EngineImageShader(ui.Image image, this.tileModeX, this.tileModeY,
+      this.matrix4) : _skImage = image as SkImage;
+
+  final ui.TileMode tileModeX;
+  final ui.TileMode tileModeY;
+  final Float64List matrix4;
+  final SkImage _skImage;
+
+  js.JsObject createSkiaShader() => _skImage.skImage.callMethod('makeShader',
+      <dynamic>[_skTileMode(tileModeX), _skTileMode(tileModeY)]);
+}

engine/src/flutter/lib/web_ui/lib/src/ui/painting.dart

@@ -1812,3 +1812,24 @@ class Shadow {
   @override
   String toString() => 'TextShadow($color, $offset, $blurRadius)';
 }
+
+
+/// A shader (as used by [Paint.shader]) that tiles an image.
+class ImageShader extends Shader {
+  /// Creates an image-tiling shader. The first argument specifies the image to
+  /// tile. The second and third arguments specify the [TileMode] for the x
+  /// direction and y direction respectively. The fourth argument gives the
+  /// matrix to apply to the effect. All the arguments are required and must not
+  /// be null.
+  factory ImageShader(
+    Image image,
+    TileMode tmx,
+    TileMode tmy,
+    Float64List matrix4) {
+    if (engine.experimentalUseSkia) {
+      return engine.EngineImageShader(image, tmx, tmy, matrix4);
+    }
+    throw UnsupportedError(
+        'ImageShader not implemented for web platform.');
+  }
+}

engine/src/flutter/lib/web_ui/lib/src/ui/window.dart

@@ -1086,11 +1086,6 @@ class PluginUtilities {
   }
 }
 
-// TODO(flutter_web): see https://github.com/flutter/flutter/issues/33616.
-class ImageShader implements Shader {
-  ImageShader(Image image, TileMode tmx, TileMode tmy, Float64List matrix4);
-}
-
 // TODO(flutter_web): probably dont implement this one.
 class IsolateNameServer {
   // This class is only a namespace, and should not be instantiated or