IOS: рисование прямоугольника на ImageView и настройка границ

Прикрепленный 1 - это скриншот из приложения GeniusScan, где вы можете сфотографировать любой документ и настраиваемые прямоугольные сетки на изображении. Вы можете легко настроить границы сетки пальцами, чтобы выбрать часть изображения, которое вы хотите отсканировать. Затем он будет преобразован в правильную перспективу.

1- Как я могу рисовать и взаимодействовать с сеткой на изображении?

2 Как вернуть угловые точки сетки в контроллер вида.

Обновление: я нашел замечательный класс под названием BJImageCropper, который позволяет использовать пальцы для выравнивания границ, но только для прямоугольника, такого как прямоугольник. Кто-нибудь может предложить, как он может быть обновлен для поддержки форм, например, в приложении GeniusScan?

Ответ 1

Чувак:

Я создал демоверсию, которая решает оба вопроса:

1- Как я могу рисовать и взаимодействовать с сеткой на изображении?

Добавив 4 представления, которые будут действовать как интерактивные контрольные точки, добавив UIPanGestureRecognizer, а затем вычеркните сетку, используя CAShapeLayer поверх вашего представления.

2 Как вернуть угловые точки сетки в контроллер вида.

Вы должны хранить ссылки на четыре контрольные точки вашей сетки.

Здесь ссылка на мой код.

Ответ 2

На самом деле это не верх над UIImageView. Это фактически оверлей (представление) поверх UIImageView. Вам нужно отслеживать 4 балла (иметь 4 вида в качестве подсмотра слоя), отслеживать их позиции, после перемещения использовать drawRect: для рисования линий на основе 4 точек.

Как я реализовал его в своем приложении, я накладываю UIImageView на прозрачный "SelectionView" (пользовательское представление, которое я написал). SelectionView содержит 4 пользовательских подзадача класса Vertex. Вершина обращается к selectView через метод протокола каждый раз, когда пользователь прикасается/перемещает его (на самом деле не важно, какая вершина перемещалась, только что она двигалась):

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

Затем selectView знает, что ему нужно повторно рисовать, поэтому он вызывает setNeedsDisplay, который вызывает внутренние вызовы drawRect (вы никогда не должны называть drawRect), где я делаю фактический чертеж ограничивающего прямоугольника. В основном, итерации по каждой вершине и рисование линии с использованием API Quartz и заполнение ее полупрозрачным/полым цветом.

Вот как я делаю это по крайней мере, я уверен, что есть и другие способы.