objective-c - iOS：在 ImageView 上绘制矩形并调整边框

Question

附件1是来自名为 GeniusScan 的应用程序的屏幕截图，您可以在其中拍摄任何文档，并在 imageview 上显示可调整的矩形网格。您可以用手指轻松调整网格的边界，以选择要扫描的图像部分。然后它将被转换为正确的预期。

1- 如何在 imageview 上绘制网格并与之交互？

2-如何将网格的角点返回到我的视图控制器。

更新：我发现了一个名为 BJImageCropper 的精彩类，它允许使用手指调整边框，但仅适用于矩形框。谁能建议如何更新它以支持 GeniusScan 应用程序中的形状？

Answer 1

老兄：

我创建了一个演示来解决这两个问题：

1- 如何在 imageview 上绘制网格并与之交互？

通过添加 UIPanGestureRecognizer 添加 4 个将充当交互式控制点的视图，然后在视图顶部使用 CAShapeLayer 绘制网格。

2-如何将网格的角点返回到我的视图控制器。

您必须保留对网格的四个控制点的引用。

这是我的代码的链接。

Answer 2

这实际上并不是在 UIImageView 之上绘制的。它实际上是 UIImageView 之上的一个叠加层（视图）。您需要跟踪 4 个点（有 4 个视图作为图层的子视图），跟踪它们的位置，一旦移动，用于drawRect:根据 4 个点绘制线条。

我在我的应用程序中实现它的方式是，我用透明的“SelectionView”（我编写的自定义视图）覆盖 UIImageView。selectionView 包含 4 个“顶点”类的自定义子视图。每次用户触摸/移动顶点时，顶点都会通过协议方法与 selectionView 对话（实际上哪个顶点移动并不重要，只是它移动了）：

- (void)vertexMoved:(Vertex *)vertex;

然后 selectionView 知道它需要重新绘制，所以它调用setNeedsDisplaywhich call 内部调用drawRect（你不应该调用drawRect），我在其中实际绘制边界矩形。基本上，遍历每个顶点并使用 Quartz API 绘制一条线，并用半透明/空心颜色填充它。

至少我是这样做的，我相信还有其他方法。