Photo behavior in the cropping area about flutter-custom-image-crop HOT 10 CLOSED

You could listen with the CustomImageCropController Calculate if the position is invalid on your own terms and use older data to set the image back inside your bounds with void setData(CropImageData data).
Just make sure that the setData doesn't trigger the listener, since then you would have an endless loop

from flutter-custom-image-crop.

@ikbendewilliam hmm... looks like callbacks not calling now

from flutter-custom-image-crop.

Hmm I'll have to try it out, I'll have a colleague look at it next week 🙂

from flutter-custom-image-crop.

@vlkonoshenko I've tried, but I can't get it to work 😅 fully.

What you'll need to do is add a check in the onMoveUpdate and onScaleUpdate. Then in the check you'll need to check whether the image is in the bounds. This is the part where I'm having trouble, especially with the rotation.
This is some code that kind of works (movement and scaling is working).
But I can't add this to the package unless it works for all customImageFits (the code below does support different fits), all shapes (aspect ratio + circle) and rotations (which I can't get to work atm).

My original thought with adding a listener won't work as you need way more details than just the movement data (screensize, cropsize, ...).

So I see two options. If you just need the "standard" (scaling/translating) case to work, you can fork the plugin and add the code below. Then you can use this fork in your project. I did just push it to a separate branch aswel, but this might be removed if it gets to far behind. link
But if you like a challenge, feel free to continue where I left of and try to get rotation working. Bonus points for aspect ratio and circles.

I hope this helps.

  void onScaleUpdate(ScaleEvent event) {
    final scale = widget.canScale ? event.scale : (_dataTransitionStart?.scale ?? 1.0);
    final angle = widget.canRotate ? event.rotationAngle : 0.0;

    if (_dataTransitionStart != null) {
      if (!_canMove(
        data +
            (_dataTransitionStart! -
                CropImageData(
                  scale: scale,
                  angle: angle,
                )),
      )) return;

      addTransition(
        _dataTransitionStart! -
            CropImageData(
              scale: scale,
              angle: angle,
            ),
      );
    }
    _dataTransitionStart = CropImageData(
      scale: scale,
      angle: angle,
    );
  }

  void onMoveUpdate(MoveEvent event) {
    if (!widget.canMove) return;
    if (!_canMove(data + CropImageData(x: event.delta.dx, y: event.delta.dy))) return;

    addTransition(CropImageData(x: event.delta.dx, y: event.delta.dy));
  }

  bool _canMove(CropImageData data) {
    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 scale = data.scale * cropFitParams.additionalScale;
    final left = data.x - image.width / 2 * scale + cropFitParams.cropSizeWidth / 2;
    final right = data.x + image.width / 2 * scale - cropFitParams.cropSizeWidth / 2;
    final top = data.y - image.height / 2 * scale + cropFitParams.cropSizeHeight / 2;
    final bottom = data.y + image.height / 2 * scale - cropFitParams.cropSizeHeight / 2;
    return left < 0 && right > 0 && top < 0 && bottom > 0;
  }

from flutter-custom-image-crop.

all gesture don't expose transition to other listener:

void onMoveUpdate(MoveEvent event) {
    if (!widget.canMove) return;
    /// this should be widget.controller.addTransition(xxxx)
    addTransition(CropImageData(x: event.delta.dx, y: event.delta.dy));
  }

Also, I think CustomImageCrop widget should add callback to expose Path rect and initial image rect like this:

If so, I can judge if image shows out of crop area and correct transition.

from flutter-custom-image-crop.

all gesture don't expose transition to other listener:

void onMoveUpdate(MoveEvent event) {
    if (!widget.canMove) return;
    /// this should be widget.controller.addTransition(xxxx)
    addTransition(CropImageData(x: event.delta.dx, y: event.delta.dy));
  }

Also, I think CustomImageCrop widget should add callback to expose Path rect and initial image rect like this:

If so, I can judge if image shows out of crop area and correct transition.

also , I suggest add minScale and maxScale param, not all apps use 0.1-10 range -.-

from flutter-custom-image-crop.

@vlkonoshenko I've tried, but I can't get it to work 😅 fully.

What you'll need to do is add a check in the onMoveUpdate and onScaleUpdate. Then in the check you'll need to check whether the image is in the bounds. This is the part where I'm having trouble, especially with the rotation.
This is some code that kind of works (movement and scaling is working).
But I can't add this to the package unless it works for all customImageFits (the code below does support different fits), all shapes (aspect ratio + circle) and rotations (which I can't get to work atm).

My original thought with adding a listener won't work as you need way more details than just the movement data (screensize, cropsize, ...).

So I see two options. If you just need the "standard" (scaling/translating) case to work, you can fork the plugin and add the code below. Then you can use this fork in your project. I did just push it to a separate branch aswel, but this might be removed if it gets to far behind. link
But if you like a challenge, feel free to continue where I left of and try to get rotation working. Bonus points for aspect ratio and circles.

I hope this helps.

  void onScaleUpdate(ScaleEvent event) {
    final scale = widget.canScale ? event.scale : (_dataTransitionStart?.scale ?? 1.0);
    final angle = widget.canRotate ? event.rotationAngle : 0.0;

    if (_dataTransitionStart != null) {
      if (!_canMove(
        data +
            (_dataTransitionStart! -
                CropImageData(
                  scale: scale,
                  angle: angle,
                )),
      )) return;

      addTransition(
        _dataTransitionStart! -
            CropImageData(
              scale: scale,
              angle: angle,
            ),
      );
    }
    _dataTransitionStart = CropImageData(
      scale: scale,
      angle: angle,
    );
  }

  void onMoveUpdate(MoveEvent event) {
    if (!widget.canMove) return;
    if (!_canMove(data + CropImageData(x: event.delta.dx, y: event.delta.dy))) return;

    addTransition(CropImageData(x: event.delta.dx, y: event.delta.dy));
  }

  bool _canMove(CropImageData data) {
    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 scale = data.scale * cropFitParams.additionalScale;
    final left = data.x - image.width / 2 * scale + cropFitParams.cropSizeWidth / 2;
    final right = data.x + image.width / 2 * scale - cropFitParams.cropSizeWidth / 2;
    final top = data.y - image.height / 2 * scale + cropFitParams.cropSizeHeight / 2;
    final bottom = data.y + image.height / 2 * scale - cropFitParams.cropSizeHeight / 2;
    return left < 0 && right > 0 && top < 0 && bottom > 0;
  }

This method has bug, for example, when you move 30 pixels up but only 20 pixels left to reach the edge, image will not move, but the correct way is to move 20 pixels up, right?

from flutter-custom-image-crop.

Hi there, Is it possible to recenter the image whenever it goes out of the bounds of the viewport?

This is an almost perfect plugin for cropping images in a flutter application. When the picture goes out of bounds, it just ruins the experience.

from flutter-custom-image-crop.

@YumengNevix you are correct, but I didn't want to go that far. I saw your PR and will check it out, thank you for this.

@Muzammil-Bit The issue is that this is not so easy to detect with all the possible transformations. It might be that with the PR from @YumengNevix it's fixed (or at least good enough to add to the project).

from flutter-custom-image-crop.

Thanks to @YumengNevix, this has now been fixed, check out version 0.0.13 and enable forceInsideCropArea to enable it.

from flutter-custom-image-crop.