crop_your_image

一个Flutter插件，提供了用于裁剪图片的Crop小部件。

Image Cropping Preview

理念

crop_your_image 提供了一个灵活且可定制的Crop小部件，可以放置在精心设计的应用中的任何位置。

由于Crop是一个显示最少裁剪UI的简单小部件，因此Crop可以放置在任何地方，例如占据整个屏幕、屏幕的上半部分，甚至对话框或底部工作表。这完全取决于您！

裁剪方法也是可定制的。固定图像并移动裁剪区域、固定裁剪区域并缩放/平移图像，或两者都可配置。

CropController使应用程序能够在Crop外部控制裁剪区域。任何小部件或方法都可以动态配置裁剪UI并使用控制器进行裁剪。

构建您自己的裁剪UI！

功能

  • 最小UI限制
  • 灵活的Crop小部件，可以放置在您的 widget 树的任何位置
  • CropController用于控制Crop
  • 缩放/平移图像
  • 使用矩形或圆形进行裁剪，随您选择
  • 固定纵横比
  • 以编程方式配置裁剪区域的矩形

请注意，此包不

  • 从任何存储（如图库、互联网等）读取/下载图像数据。
  • 调整大小、倾斜或其他转换，这些都可以直接通过image包完成。
  • 提供裁剪编辑器以外的UI部分，例如“Crop”按钮、“Preview”按钮或“Change Aspect Ratio”菜单。构建UI完全取决于您！

笔记

crop_your_image 正在开发中，并且随时可能发生破坏性更改。任何反馈和Pull Requests都欢迎，以使crop_your_image更方便、更有用且错误更少。

用法

基础

将Crop小部件放置在您想要放置图像裁剪UI的任何位置。

final _controller = CropController();

Widget build(BuildContext context) {
  return Crop(
    image: _imageData, 
    controller: _controller,
    onCropped: (image) {
      // do something with image data 
    }
  );
}

然后，Crop小部件将使用提供的图像在用户屏幕上自动显示裁剪编辑器UI。

通过创建CropController实例并将其传递给Crop的controller属性，您可以从自己设计的小部件中控制Crop小部件。

例如，当您想使用当前选定的裁剪区域裁剪图像时，您可以随时调用_controller.crop()，如下面的代码所示。

ElevatedButton(
  child: Text('Crop it!')
  onPressed: _cropController.crop,
),

由于_controller.crop()仅触发裁剪过程，因此此方法会立即返回，而不会返回任何裁剪后的图像数据。您可以通过Crop小部件的onCropped回调获取裁剪图像的结果。

高级

Crop的所有属性及其用法如下。

final _controller = CropController();

Widget build(BuildContext context) {
  return Crop(
    image: _imageData,
    controller: _controller,
    onCropped: (image) {
      // do something with image data 
    },
    aspectRatio: 4 / 3,
    // initialSize: 0.5,
    // initialArea: Rect.fromLTWH(240, 212, 800, 600),
    initialAreaBuilder: (rect) => Rect.fromLTRB(
      rect.left + 24, rect.top + 32, rect.right - 24, rect.bottom - 32
    ), 
    // withCircleUi: true,
    baseColor: Colors.blue.shade900,
    maskColor: Colors.white.withAlpha(100),
    radius: 20,
    onMoved: (newRect) {
      // do something with current cropping area.
    },
    onStatusChanged: (status) {
      // do something with current CropStatus
    }
    cornerDotBuilder: (size, edgeAlignment) => const DotControl(color: Colors.blue),
    interactive: true,
    // fixArea: true,
  );
}
  • image是UInt8List类型的图像数据，裁剪结果可以通过onCropped回调获得。
  • aspectRatio是裁剪区域的纵横比。如果想以任意纵横比裁剪图像，请设置为null或省略。
  • aspectRatio可以通过CropController.aspectRatio的setter动态更改（如下所示）。
  • initialSize是裁剪区域的初始大小。1.0（或默认的null）与图像大小匹配，这意味着裁剪区域尽可能大。0.5则为一半。当通过CropController.aspectRatio更改aspectRatio时，也会参考此值。
  • initialArea是基于实际图像数据的裁剪区域的初始Rect。
  • initialAreaBuilder是回调函数，用于根据Crop本身的视口来决定裁剪区域的初始Rect。Crop的Rect作为回调函数的参数传递。
  • withCircleUi标志用于决定裁剪UI的形状。如果为true，则aspectRatio自动设置为1.0，裁剪UI的形状为圆形。请注意，此标志不会影响裁剪图像的结果。如果您想获得圆形裁剪图像，请调用CropController.cropCircle而不是CropController.crop。
  • baseColor是放置在裁剪编辑器上方的遮罩小部件的颜色。
  • maskColor是裁剪编辑器的底色的颜色。
  • radius配置裁剪区域的圆角半径。
  • onMoved回调在裁剪区域移动时被调用，无论原因如何。参数的newRect是裁剪区域当前的Rect。
  • onStatusChanged回调在Crop的状态更改时被调用。
  • cornerDotBuilder是用于构建放置在角落的小部件的构建器。构建器传递size（小部件必须遵循此尺寸）和edgeAlignment（指示位置）。
  • progressIndicator用于显示准备裁剪的图像的进度。默认情况下不显示任何内容（实际上是SizedBox.shrink()）。
  • interactive启用移动/缩放图像的实验性功能。
  • fixArea是裁剪区域是否固定的标志。

此外，image、aspectRatio、withCircleUi、rect和area也可以通过CropController更改，而其他属性，如baseColor、maskColor和cornerDotBuilder，可以通过setState更改。

画廊应用

下面的存储库是 crop_your_image 的示例应用程序。

chooyan-eng/crop_your_image_gallery

您可以在此处找到几个带有可执行源代码的示例。

联系方式

如果您有任何想告知我的（@chooyan-eng）内容，例如增强此包的建议或您想要的功能等，请随时在GitHub上创建问题或在Twitter上发送消息@chooyan_i18n。

GitHub

查看 Github