[web] Implement sweep gradient (flutter#21873)

Author: ferhatb

ci/licenses_golden/licenses_flutter

@@ -489,6 +489,7 @@ FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/recording_canvas.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/render_vertices.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/scene.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/scene_builder.dart
+FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/shaders/normalized_gradient.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/shaders/shader.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/shaders/shader_builder.dart
 FILE: ../../../flutter/lib/web_ui/lib/src/engine/html/surface.dart

lib/web_ui/lib/src/engine.dart

@@ -89,6 +89,7 @@ part 'engine/html/recording_canvas.dart';
 part 'engine/html/render_vertices.dart';
 part 'engine/html/scene.dart';
 part 'engine/html/scene_builder.dart';
+part 'engine/html/shaders/normalized_gradient.dart';
 part 'engine/html/shaders/shader.dart';
 part 'engine/html/shaders/shader_builder.dart';
 part 'engine/html/surface.dart';

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

@@ -227,8 +227,8 @@ class BitmapCanvas extends EngineCanvas {
   }
 
   /// Sets the global paint styles to correspond to [paint].
-  void _setUpPaint(SurfacePaintData paint) {
-    _canvasPool.contextHandle.setUpPaint(paint);
+  void _setUpPaint(SurfacePaintData paint, ui.Rect? shaderBounds) {
+    _canvasPool.contextHandle.setUpPaint(paint, shaderBounds);
   }
 
   void _tearDownPaint() {
@@ -352,7 +352,9 @@ class BitmapCanvas extends EngineCanvas {
         ..lineTo(p2.dx, p2.dy);
       drawPath(path, paint);
     } else {
-      _setUpPaint(paint);
+      ui.Rect? shaderBounds = (paint.shader != null) ?
+      ui.Rect.fromPoints(p1, p2) : null;
+      _setUpPaint(paint, shaderBounds);
       _canvasPool.strokeLine(p1, p2);
       _tearDownPaint();
     }
@@ -363,7 +365,9 @@ class BitmapCanvas extends EngineCanvas {
     if (_useDomForRendering(paint)) {
       drawRect(_computeScreenBounds(_canvasPool._currentTransform), paint);
     } else {
-      _setUpPaint(paint);
+      ui.Rect? shaderBounds = (paint.shader != null) ?
+      _computePictureBounds() : null;
+      _setUpPaint(paint, shaderBounds);
       _canvasPool.fill();
       _tearDownPaint();
     }
@@ -380,7 +384,7 @@ class BitmapCanvas extends EngineCanvas {
               math.min(rect.left, rect.right), math.min(rect.top, rect.bottom)),
           paint);
     } else {
-      _setUpPaint(paint);
+      _setUpPaint(paint, rect);
       _canvasPool.drawRect(rect, paint.style);
       _tearDownPaint();
     }
@@ -423,15 +427,15 @@ class BitmapCanvas extends EngineCanvas {
               math.min(rect.left, rect.right), math.min(rect.top, rect.bottom)),
           paint);
     } else {
-      _setUpPaint(paint);
-      _canvasPool.drawRRect(rrect, paint.style);
+    _setUpPaint(paint, rrect.outerRect);
+    _canvasPool.drawRRect(rrect, paint.style);
       _tearDownPaint();
     }
   }
 
   @override
   void drawDRRect(ui.RRect outer, ui.RRect inner, SurfacePaintData paint) {
-    _setUpPaint(paint);
+    _setUpPaint(paint, outer.outerRect);
     _canvasPool.drawDRRect(outer, inner, paint.style);
     _tearDownPaint();
   }
@@ -449,7 +453,7 @@ class BitmapCanvas extends EngineCanvas {
       element.style.borderRadius =
           '${(rect.width / 2.0)}px / ${(rect.height / 2.0)}px';
     } else {
-      _setUpPaint(paint);
+      _setUpPaint(paint, rect);
       _canvasPool.drawOval(rect, paint.style);
       _tearDownPaint();
     }
@@ -468,7 +472,8 @@ class BitmapCanvas extends EngineCanvas {
           paint);
       element.style.borderRadius = '50%';
     } else {
-      _setUpPaint(paint);
+      _setUpPaint(paint, paint.shader != null
+          ? ui.Rect.fromCircle(center: c, radius: radius) : null);
       _canvasPool.drawCircle(c, radius, paint.style);
       _tearDownPaint();
     }
@@ -490,7 +495,7 @@ class BitmapCanvas extends EngineCanvas {
       }
       _drawElement(svgElm, ui.Offset(0, 0), paint);
     } else {
-      _setUpPaint(paint);
+      _setUpPaint(paint, paint.shader != null ? path.getBounds() : null);
       _canvasPool.drawPath(path, paint.style);
       _tearDownPaint();
     }
@@ -813,7 +818,7 @@ class BitmapCanvas extends EngineCanvas {
         ctx.font = style.cssFontString;
         _cachedLastStyle = style;
       }
-      _setUpPaint(paragraph._paint!.paintData);
+      _setUpPaint(paragraph._paint!.paintData, null);
       double y = offset.dy + paragraph.alphabeticBaseline;
       final int len = lines.length;
       for (int i = 0; i < len; i++) {
@@ -920,7 +925,7 @@ class BitmapCanvas extends EngineCanvas {
     _drawPointsPaint.strokeWidth = paint.strokeWidth;
     _drawPointsPaint.maskFilter = paint.maskFilter;
 
-    _setUpPaint(_drawPointsPaint);
+    _setUpPaint(_drawPointsPaint, null);
     _canvasPool.drawPoints(pointMode, points, paint.strokeWidth! / 2.0);
     _tearDownPaint();
   }
@@ -969,6 +974,11 @@ class BitmapCanvas extends EngineCanvas {
               math.max(topRight.y, math.max(bottomRight.y, bottomLeft.y))),
     );
   }
+
+  /// Computes paint bounds to completely cover picture.
+  ui.Rect _computePictureBounds() {
+    return ui.Rect.fromLTRB(0, 0, _bounds.width, _bounds.height);
+  }
 }
 
 String? _stringForBlendMode(ui.BlendMode? blendMode) {

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

@@ -763,7 +763,7 @@ class ContextStateHandle {
   /// Sets paint properties on the current canvas.
   ///
   /// [tearDownPaint] must be called after calling this method.
-  void setUpPaint(SurfacePaintData paint) {
+  void setUpPaint(SurfacePaintData paint, ui.Rect? shaderBounds) {
     if (assertionsEnabled) {
       assert(!_debugIsPaintSetUp);
       _debugIsPaintSetUp = true;
@@ -778,7 +778,7 @@ class ContextStateHandle {
     if (paint.shader != null) {
       final EngineGradient engineShader = paint.shader as EngineGradient;
       final Object paintStyle =
-          engineShader.createPaintStyle(_canvasPool.context);
+          engineShader.createPaintStyle(_canvasPool.context, shaderBounds);
       fillStyle = paintStyle;
       strokeStyle = paintStyle;
     } else if (paint.color != null) {