Merge pull request #45 from YumengNevix/main

optimize fillcropscpace imagefit

Author: ikbendewilliam

README.md

@@ -71,6 +71,9 @@ To create a rectangular crop area with a 16:9 aspect ratio, use `[`Ratio(width:
 ### borderRadius
 The radius for rounded corners of the cropping area.
 
+### forceInsideCropArea
+Whether image area must cover clip path.
+
 
 # Controller Methods
 

lib/src/calculators/calculate_crop_fit_params.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:custom_image_crop/src/models/params_model.dart';
 import 'package:custom_image_crop/src/widgets/custom_image_crop_widget.dart';
 
@@ -25,11 +27,13 @@ CropFitParams calculateCropFitParams({
       if (screenWidth <= screenHeight * aspectRatio) {
         cropSizeWidth = screenWidth * cropPercentage;
         cropSizeHeight = cropSizeWidth / aspectRatio;
-        defaultScale = cropSizeWidth / imageWidth;
+        defaultScale =
+            cropSizeWidth * max(imageWidth / imageHeight, 1.0) / imageWidth;
       } else {
         cropSizeHeight = screenHeight * cropPercentage;
         cropSizeWidth = cropSizeHeight * aspectRatio;
-        defaultScale = cropSizeHeight / imageHeight;
+        defaultScale =
+            cropSizeHeight * max(imageHeight / imageWidth, 1.0) / imageHeight;
       }
       break;
 

lib/src/calculators/calculate_on_crop_params.dart

@@ -28,15 +28,18 @@ OnCropParams caclulateOnCropParams({
 
   switch (imageFit) {
     case CustomImageFit.fillCropSpace:
+      double cropScale;
       if (screenWidth > screenHeight * aspectRatio) {
         uiSize = screenHeight;
         cropSizeMax = imageHeight.toDouble();
+        cropScale = max(cropSizeMax / imageWidth, 1.0);
       } else {
         uiSize = screenWidth;
         cropSizeMax = imageWidth.toDouble();
+        cropScale = max(cropSizeMax / imageHeight, 1.0);
       }
       translateScale = cropSizeMax / (uiSize * cropPercentage);
-      scale = dataScale;
+      scale = dataScale * cropScale;
       break;
 
     case CustomImageFit.fitCropSpace:

lib/src/widgets/custom_image_crop_widget.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:math';
 import 'dart:ui' as ui;
 
 import 'package:custom_image_crop/custom_image_crop.dart';
@@ -91,6 +92,11 @@ class CustomImageCrop extends StatefulWidget {
   /// By default, the value is `true`
   final bool clipShapeOnCrop;
 
+  /// Whether image area must cover clip path
+  /// By default, the value is `false`
+  /// If use CustomCropShape.circle, the cropped image may have white blank.
+  final bool forceInsideCropArea;
+
   /// A custom image cropper widget
   ///
   /// Uses a `CustomImageCropController` to crop the image.
@@ -125,6 +131,7 @@ class CustomImageCrop extends StatefulWidget {
     this.ratio,
     this.borderRadius = 0,
     Paint? imagePaintDuringCrop,
+    this.forceInsideCropArea = false,
     Key? key,
   })  : this.imagePaintDuringCrop = imagePaintDuringCrop ??
             (Paint()..filterQuality = FilterQuality.high),
@@ -273,7 +280,7 @@ class _CustomImageCropState extends State<CustomImageCrop>
     final angle = widget.canRotate ? event.rotationAngle : 0.0;
 
     if (_dataTransitionStart != null) {
-      addTransition(
+      widget.cropController.addTransition(
         _dataTransitionStart! -
             CropImageData(
               scale: scale,
@@ -294,7 +301,199 @@ class _CustomImageCropState extends State<CustomImageCrop>
   void onMoveUpdate(MoveEvent event) {
     if (!widget.canMove) return;
 
-    addTransition(CropImageData(x: event.delta.dx, y: event.delta.dy));
+    widget.cropController
+        .addTransition(CropImageData(x: event.delta.dx, y: event.delta.dy));
+  }
+
+  Rect _getInitialImageRect() {
+    assert(_imageAsUIImage != null);
+    final image = _imageAsUIImage!;
+    final cropFitParams = calculateCropFitParams(
+      cropPercentage: widget.cropPercentage,
+      imageFit: widget.imageFit,
+      imageHeight: image.height,
+      imageWidth: image.width,
+      screenHeight: _height,
+      screenWidth: _width,
+      aspectRatio: (widget.ratio?.width ?? 1) / (widget.ratio?.height ?? 1),
+    );
+    final initialWidth = _imageAsUIImage!.width * cropFitParams.additionalScale;
+    final initialHeight =
+        _imageAsUIImage!.height * cropFitParams.additionalScale;
+    return Rect.fromLTWH(
+      (_width - initialWidth) / 2,
+      (_height - initialHeight) / 2,
+      initialWidth,
+      initialHeight,
+    );
+  }
+
+  void _correctTransition(CropImageData transition, VoidCallback callback) {
+    if (!widget.forceInsideCropArea || _imageAsUIImage == null) {
+      callback();
+      return;
+    }
+    final startX = data.x;
+    final startY = data.y;
+    callback();
+    final pathRect = _path.getBounds();
+    final initialImageRect = _getInitialImageRect();
+    bool isContainPath = _isContainPath(initialImageRect, pathRect, data.scale);
+    bool isRotated = data.angle != 0;
+
+    if (isContainPath) {
+      return;
+    }
+
+    if (transition.x != 0 || transition.y != 0) {
+      if (isRotated) {
+        _addTransitionInternal(
+            CropImageData(x: startX - data.x, y: startY - data.y));
+      } else {
+        final imageRect = _getImageRect(initialImageRect, data.scale);
+        double deltaX = min(pathRect.left - imageRect.left, 0);
+        deltaX = pathRect.right > imageRect.right
+            ? pathRect.right - imageRect.right
+            : deltaX;
+        double deltaY = min(pathRect.top - imageRect.top, 0);
+        deltaY = pathRect.bottom > imageRect.bottom
+            ? pathRect.bottom - imageRect.bottom
+            : deltaY;
+        _addTransitionInternal(CropImageData(x: deltaX, y: deltaY));
+      }
+      return;
+    }
+    double minEdgeHalf =
+        min(initialImageRect.width, initialImageRect.height) / 2;
+    double adaptScale = _calculateScaleAfterRotate(
+        pathRect, data.scale, initialImageRect, minEdgeHalf);
+    _addTransitionInternal(CropImageData(scale: adaptScale / data.scale));
+  }
+
+  Rect _getImageRect(Rect initialImageRect, double currentScale) {
+    final diffScale = (1 - currentScale) / 2;
+    final left =
+        initialImageRect.left + diffScale * initialImageRect.width + data.x;
+    final top =
+        initialImageRect.top + diffScale * initialImageRect.height + data.y;
+    Rect imageRect = Rect.fromLTWH(
+        left,
+        top,
+        currentScale * initialImageRect.width,
+        currentScale * initialImageRect.height);
+    return imageRect;
+  }
+
+  double _getDistanceBetweenPointAndLine(
+      Offset point, Offset lineStart, Offset lineEnd) {
+    if (lineEnd.dy == lineStart.dy) {
+      return (point.dy - lineStart.dy).abs();
+    }
+    if (lineEnd.dx == lineStart.dx) {
+      return (point.dx - lineStart.dx).abs();
+    }
+    double line1Slop =
+        (lineEnd.dy - lineStart.dy) / (lineEnd.dx - lineStart.dx);
+    double line1Delta = lineEnd.dy - lineEnd.dx * line1Slop;
+    double line2Slop = -1 / line1Slop;
+    double line2Delta = point.dy - point.dx * line2Slop;
+    double crossPointX = (line2Delta - line1Delta) / (line1Slop - line2Slop);
+    double crossPointY = line1Slop * crossPointX + line1Delta;
+    return (Offset(crossPointX, crossPointY) - point).distance;
+  }
+
+  bool _isContainPath(
+      Rect initialImageRect, Rect pathRect, double currentScale) {
+    final imageRect = _getImageRect(initialImageRect, currentScale);
+    Offset topLeft, topRight, bottomLeft, bottomRight;
+    final rad = atan(imageRect.height / imageRect.width);
+    final len =
+        sqrt(pow(imageRect.width / 2, 2) + pow(imageRect.height / 2, 2));
+    bool isRotated = data.angle != 0;
+
+    if (isRotated) {
+      final clockAngle = rad + data.angle;
+      final counterClockAngle = rad - data.angle;
+      final cosClockValue = len * cos(clockAngle);
+      final sinClockValue = len * sin(clockAngle);
+      final cosCounterClockValue = len * cos(counterClockAngle);
+      final sinCounterClockValue = len * sin(counterClockAngle);
+      bottomRight = imageRect.center.translate(cosClockValue, sinClockValue);
+      topRight = imageRect.center
+          .translate(cosCounterClockValue, -sinCounterClockValue);
+      topLeft = imageRect.center.translate(-cosClockValue, -sinClockValue);
+      bottomLeft = imageRect.center
+          .translate(-cosCounterClockValue, sinCounterClockValue);
+    } else {
+      bottomRight = imageRect.bottomRight;
+      topRight = imageRect.topRight;
+      topLeft = imageRect.topLeft;
+      bottomLeft = imageRect.bottomLeft;
+    }
+
+    if (widget.shape == CustomCropShape.Circle) {
+      final anchor = max(pathRect.width, pathRect.height) / 2;
+      final pathCenter = pathRect.center;
+      return _getDistanceBetweenPointAndLine(pathCenter, topLeft, topRight) >=
+              anchor &&
+          _getDistanceBetweenPointAndLine(pathCenter, topRight, bottomRight) >=
+              anchor &&
+          _getDistanceBetweenPointAndLine(
+                  pathCenter, bottomLeft, bottomRight) >=
+              anchor &&
+          _getDistanceBetweenPointAndLine(pathCenter, topLeft, bottomLeft) >=
+              anchor;
+    }
+
+    if (isRotated) {
+      Path imagePath = Path()
+        ..moveTo(topLeft.dx, topLeft.dy)
+        ..lineTo(topRight.dx, topRight.dy)
+        ..lineTo(bottomRight.dx, bottomRight.dy)
+        ..lineTo(bottomLeft.dx, bottomLeft.dy)
+        ..close();
+      return imagePath.contains(pathRect.topLeft) &&
+          imagePath.contains(pathRect.topRight) &&
+          imagePath.contains(pathRect.bottomLeft) &&
+          imagePath.contains(pathRect.bottomRight);
+    } else {
+      return imageRect.contains(pathRect.topLeft) &&
+          imageRect.contains(pathRect.topRight) &&
+          imageRect.contains(pathRect.bottomLeft) &&
+          imageRect.contains(pathRect.bottomRight);
+    }
+  }
+
+  double _calculateScaleAfterRotate(Rect pathRect, double startScale,
+      Rect initialImageRect, double minEdgeHalf) {
+    final imageCenter = initialImageRect.center.translate(data.x, data.y);
+    final topLeftDistance = (pathRect.topLeft - imageCenter).distance;
+    final topRightDistance = (pathRect.topRight - imageCenter).distance;
+    final bottomLeftDistance = (pathRect.bottomLeft - imageCenter).distance;
+    final bottomRightDistance = (pathRect.bottomRight - imageCenter).distance;
+    final maxDistance = max(
+        max(max(topLeftDistance, topRightDistance), bottomLeftDistance),
+        bottomRightDistance);
+    double endScale = maxDistance / minEdgeHalf;
+
+    if (startScale >= endScale) {
+      return endScale;
+    }
+
+    ///use binary search to find best scale which just contain path.
+    ///Also, we can use imageCenter、imageLine(longest one) and path vertex to calculate.
+    double step = 1 / minEdgeHalf;
+
+    while ((endScale - startScale).abs() > step) {
+      double midScale = (endScale + startScale) / 2;
+
+      if (_isContainPath(initialImageRect, pathRect, midScale)) {
+        endScale = midScale;
+      } else {
+        startScale = midScale + step;
+      }
+    }
+    return endScale;
   }
 
   Path _getPath({
@@ -425,16 +624,14 @@ class _CustomImageCropState extends State<CustomImageCrop>
     return bytes == null ? null : MemoryImage(bytes.buffer.asUint8List());
   }
 
+  void _addTransitionInternal(CropImageData transition) {
+    setData(data + transition);
+  }
+
   @override
   void addTransition(CropImageData transition) {
-    setState(() {
-      data += transition;
-      // For now, this will do. The idea is that we create
-      // a path from the data and check if when we combine
-      // that with the crop path that the resulting path
-      // overlap the hole (crop). So we check if all pixels
-      // from the crop contain pixels from the original image
-      data.scale = data.scale.clamp(0.1, 10.0);
+    _correctTransition(transition, () {
+      _addTransitionInternal(transition);
     });
   }