如何在颤动中裁剪图像？

Question

我寻找这个问题的日子.

我想像这样裁剪图像,在颤动:

GIF资料来源:https://github.com/ArthurHub/Android-Image-Cropper

这个解决方案最接近的lib是Image Lib,lib提供了操作图像和裁剪,但我想在UI级别裁剪图像,就像这个gif一样.我发现的所有lib都不提供.

Answer 1

没有可以为您执行所有操作的小部件.但是,我相信现在有可能在本地写一下.我没有时间在这个特定的时刻为你做这件事,但我绝对可以指出你正确的方向.

1. 您将需要以这样的方式加载图像:您可以将其绘制到画布上或使用a RawImage来绘制它而不是直接使用Image小部件.
2. 您需要找出相对于图像的坐标系
3. 你需要找到一种绘制crop指标的方法 - 你可以通过直接在画布上绘图或者使用GestureDetector/Draggable/DropTarget的某种组合来实现.我建议坚持使用Canvas可能是最容易开始的.
4. 一旦用户选择了图像的一部分,您需要将屏幕坐标转换为图像坐标.
5. 然后,您必须创建一个离屏画布以将裁剪后的图像绘制到.您需要进行各种变换以确保图像最终位于正确的位置.
6. 完成离屏裁剪后,您必须显示新图像.

所有这些都是相当多的工作,并且可能需要做很多事情.

以下是您需要执行的几个步骤的示例,但您必须弄清楚如何将它们组合在一起.

加载图片:

var byteData = await rootBundle.load("assets/image.jpg");
Uint8List lst = new Uint8List.view(byteData.buffer);
var codec = await UI.instantiateImageCodec(lst);
var nextFrame = await codec.getNextFrame();
var image = frameInfo.image;

在画布上显示图像:

• https://docs.flutter.io/flutter/dart-ui/Canvas/drawImageRect.html
• https://docs.flutter.io/flutter/rendering/CustomPainter-class.html

将图像写入离屏画布:

ui.Image getCroppedImage(Image image, Rect src, Rect dst) {
  var pictureRecorder = new ui.PictureRecorder();
  Canvas canvas = new Canvas(pictureRecorder);
  canvas.drawImageRect(image, src, dst, Paint());
  return pictureRecorder.endRecording().toImage(dst.width.floor(), dst.height.floor());
}

您可能需要做一些类似于获得鼠标/触摸手势的本地坐标的答案.

一些建议 - 我会尽可能简单地开始,而不是考虑开始性能(即如果需要的话,绘制每个油漆的所有内容等).然后,一旦你掌握了基础知识,你就可以开始考虑优化(即对图像使用RawImage,Transform和Stack,只重新绘制选择器等).

如果您需要任何其他帮助,请在评论中告诉我,我会尽力回答.现在我已经写了一些关于它的内容,这让我有点好奇尝试实现它,所以我可能会尝试在某个时候,但它可能不会很快,因为我现在的时间很少.祝你好运= D.

Answer 2

该image_cropper插件不正是你所期待的。