diff --git a/CHANGELOG.md b/CHANGELOG.md index a3ad4db..b251dbe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## [0.4.0] - 2021.03.18 +* Enable to change original image via `CropController` +* Add callback when cropping area moves. +* Enable to control cropping area programmatically via `CropController` +* Fix bug that wrong cropping area is calculated when image is smaller than display. + ## [0.3.0] - 2021.03.17 * Add example project in `example` directory. diff --git a/README.md b/README.md index df267b8..dba456c 100644 --- a/README.md +++ b/README.md @@ -16,9 +16,12 @@ I will appreciate your idea or suggestions to achieve the basic idea written abo ## Usage +### Basics Place `Crop` Widget wherever you want to place image cropping UI. ```dart +final _controller = CropController(); + Widget build(BuildContext context) { return Crop( image: _imageData, @@ -28,18 +31,27 @@ Widget build(BuildContext context) { onCropped: (image) { // do something with image data } + controller: _controller, ); } ``` -Usage of each properties are listed below. +Then, `Crop` widget will automatically display cropping editor UI on users screen with given image. -- `image` is Image data whose type is `UInt8List`, and the result of cropping can be obtained via `onCropped` callback. -- `aspectRatio` is the aspect ratio of cropping area. Set `null` or just omit if you want to crop images with any aspect ratio. -- `aspectRatio` can be changed dynamically via setter of `CropController.aspectRatio`. (see below) -- `initialSize` is the initial size of cropping area. `1.0` (or `null`, by default) fits the size of image, which means cropping area extends as much as possible. `0.5` would be the half. This value is also referred when `aspectRatio` changes via `CropController.aspectRatio`. -- `withCircleUi` flag is to decide the shape of cropping UI. If `true`, `aspectRatio` is automatically set `1.0` and the shape of cropping UI would be circle. Note that this flag does NOT affect to the result of cropping image. If you want cropped images with circle shape, call `CropController.cropCircle` instead of `CropController.crop`. +By creating a `CropController` instance and pass it to `controller` property of `Crop`, you can controll the `Crop` widget from your own designed Widgets. + +For example, when you want to crop the image with current selected cropping area, you can just call `_controller.crop()` wherever you want, such like the code below. + +```dart +ElevatedButton( + child: Text('Crop it!') + onPressed: _cropController.crop, +), +``` + +Because `_controller.crop()` only kicks the cropping process, this method returns immediately without any cropped image data. You can always obtain the result of cropping images via `onCropped` callback of `Crop` Widget. -If you want to controll from your own designed Widgets, create a `CropController` instance and pass it to `controller` property of `Crop`. +### Advanced +All the properties of `Crop` and their usages are below. ```dart final _controller = CropController(); @@ -47,26 +59,28 @@ final _controller = CropController(); Widget build(BuildContext context) { return Crop( image: _imageData, + aspectRatio: 4 / 3, + initialSize: 0.5, + withCircleUi: false, onCropped: (image) { // do something with image data + }, + onMoved: (newRect) { + // do something with current cropping area. } controller: _controller, ); } ``` -You can call `_controller.crop()` to crop a image. - -```dart -ElevatedButton( - child: Text('Crop it!') - onPressed: _cropController.crop, -), -``` - -Because `_controller.crop()` only kicks the cropping process, this method returns immediately without any cropped image data. You can always obtain the result of cropping images via `onCropped` callback of `Crop` Widget. +- `image` is Image data whose type is `UInt8List`, and the result of cropping can be obtained via `onCropped` callback. +- `aspectRatio` is the aspect ratio of cropping area. Set `null` or just omit if you want to crop images with any aspect ratio. +- `aspectRatio` can be changed dynamically via setter of `CropController.aspectRatio`. (see below) +- `initialSize` is the initial size of cropping area. `1.0` (or `null`, by default) fits the size of image, which means cropping area extends as much as possible. `0.5` would be the half. This value is also referred when `aspectRatio` changes via `CropController.aspectRatio`. +- `withCircleUi` flag is to decide the shape of cropping UI. If `true`, `aspectRatio` is automatically set `1.0` and the shape of cropping UI would be circle. Note that this flag does NOT affect to the result of cropping image. If you want cropped images with circle shape, call `CropController.cropCircle` instead of `CropController.crop`. +- `onMoved` callback is called when cropping area is moved regardless of its reasons. `newRect` of argument is current `Rect` of cropping area. -In addition, `aspectRatio` and `withCircleUi` can also be changed via `CropController`. +In addition, `image`, `aspectRatio`, `withCircleUi` and `rect` can also be changed via `CropController`. # Contact diff --git a/pubspec.yaml b/pubspec.yaml index 564b3f0..5774449 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: crop_your_image description: crop_your_image helps your app to embed Widgets for cropping images. -version: 0.3.0 +version: 0.4.0 homepage: https://github.com/chooyan-eng/crop_your_image environment: