Merge pull request #79 from unrulr/master

Add support for web

Author: RafaelBarbosatec

lib/src/paint/light_paint.dart

@@ -9,31 +9,51 @@ class LightPaint extends CustomPainter {
   final Color colorShadow;
   final double opacityShadow;
 
-  late Paint _paintFocus;
-
   LightPaint(
     this.progress,
     this.positioned,
     this.sizeCircle, {
     this.colorShadow = Colors.black,
     this.opacityShadow = 0.8,
-  }) : assert(opacityShadow >= 0 && opacityShadow <= 1) {
-    _paintFocus = Paint()
-      ..color = Colors.transparent
-      ..blendMode = BlendMode.clear;
-  }
+  }) : assert(opacityShadow >= 0 && opacityShadow <= 1);
 
   @override
   void paint(Canvas canvas, Size size) {
-    canvas.saveLayer(Offset.zero & size, Paint());
-    canvas.drawColor(colorShadow.withOpacity(opacityShadow), BlendMode.dstATop);
-
     var maxSize = max(size.width, size.height);
 
     double radius = maxSize * (1 - progress) + sizeCircle;
 
-    canvas.drawCircle(positioned, radius, _paintFocus);
-    canvas.restore();
+    // There is some weirdness here.  On mobile, using arcTo with `sweepAngle: 2 * pi`
+    // gives the equivalent of `sweepAngle: 0`.  I couldn't find any documentation
+    // of the expected behavior here, so instead I just call arcTo twice (two
+    // semi-circles) to outline the full hole.
+    final circleHole = Path()
+      ..moveTo(0, 0)
+      ..lineTo(0, positioned.dy)
+      ..arcTo(
+        Rect.fromCircle(center: positioned, radius: radius),
+        pi,
+        pi,
+        false,
+      )
+      ..arcTo(
+        Rect.fromCircle(center: positioned, radius: radius),
+        0,
+        pi,
+        false,
+      )
+      ..lineTo(0, positioned.dy)
+      ..lineTo(0, size.height)
+      ..lineTo(size.width, size.height)
+      ..lineTo(size.width, 0)
+      ..close();
+
+    canvas.drawPath(
+      circleHole,
+      Paint()
+        ..style = PaintingStyle.fill
+        ..color = colorShadow.withOpacity(opacityShadow),
+    );
   }
 
   @override

lib/src/paint/light_paint_rect.dart

@@ -12,26 +12,84 @@ class LightPaintRect extends CustomPainter {
   final double offset;
   final double radius;
 
-  late Paint _paintFocus;
-
   LightPaintRect({
     required this.progress,
     required this.target,
     this.colorShadow = Colors.black,
     this.opacityShadow = 0.8,
     this.offset = 10,
     this.radius = 10,
-  }) : assert(opacityShadow >= 0 && opacityShadow <= 1) {
-    _paintFocus = Paint()
-      ..color = Colors.transparent
-      ..blendMode = BlendMode.clear;
+  }) : assert(opacityShadow >= 0 && opacityShadow <= 1);
+
+  static Path _drawRectHole(
+    Size canvasSize,
+    double x,
+    double y,
+    double w,
+    double h,
+  ) {
+    return Path()
+      ..moveTo(0, 0)
+      ..lineTo(0, y)
+      ..lineTo(x + w, y)
+      ..lineTo(x + w, y + h)
+      ..lineTo(x, y + h)
+      ..lineTo(x, y)
+      ..lineTo(0, y)
+      ..lineTo(0, canvasSize.height)
+      ..lineTo(canvasSize.width, canvasSize.height)
+      ..lineTo(canvasSize.width, 0)
+      ..close();
+  }
+
+  static Path _drawRRectHole(
+    Size canvasSize,
+    double x,
+    double y,
+    double w,
+    double h,
+    double radius,
+  ) {
+    double diameter = radius * 2;
+
+    return Path()
+      ..moveTo(0, 0)
+      ..lineTo(0, y + radius)
+      ..arcTo(
+        Rect.fromLTWH(x, y, diameter, diameter),
+        pi,
+        pi / 2,
+        false,
+      )
+      ..arcTo(
+        Rect.fromLTWH(x + w - diameter, y, diameter, diameter),
+        3 * pi / 2,
+        pi / 2,
+        false,
+      )
+      ..arcTo(
+        Rect.fromLTWH(x + w - diameter, y + h - diameter, diameter, diameter),
+        0,
+        pi / 2,
+        false,
+      )
+      ..arcTo(
+        Rect.fromLTWH(x, y + h - diameter, diameter, diameter),
+        pi / 2,
+        pi / 2,
+        false,
+      )
+      ..lineTo(x, y + radius)
+      ..lineTo(0, y + radius)
+      ..lineTo(0, canvasSize.height)
+      ..lineTo(canvasSize.width, canvasSize.height)
+      ..lineTo(canvasSize.width, 0)
+      ..close();
   }
 
   @override
   void paint(Canvas canvas, Size size) {
     if (target.offset == Offset.zero) return;
-    canvas.saveLayer(Offset.zero & size, Paint());
-    canvas.drawColor(colorShadow.withOpacity(opacityShadow), BlendMode.dstATop);
 
     var maxSize = max(size.width, size.height) +
         max(target.size.width, target.size.height);
@@ -44,12 +102,14 @@ class LightPaintRect extends CustomPainter {
 
     double h = maxSize * (1 - progress) + target.size.height + offset;
 
-    RRect rrect = RRect.fromRectAndRadius(
-      Rect.fromLTWH(x, y, w, h),
-      Radius.circular(radius),
+    canvas.drawPath(
+      radius > 0
+          ? _drawRRectHole(size, x, y, w, h, radius)
+          : _drawRectHole(size, x, y, w, h),
+      Paint()
+        ..style = PaintingStyle.fill
+        ..color = colorShadow.withOpacity(opacityShadow),
     );
-    canvas.drawRRect(rrect, _paintFocus);
-    canvas.restore();
   }
 
   @override