Взаимодействие со сложной фигурой в iOS

Question

Мне нужно иметь возможность взаимодействовать с изображением цинкования, в котором есть много разных деталей. Когда пользователи нажимают на маленькие прямоугольники, мне нужно отобразить popover, относящиеся к определенной части (форме).

Следующее изображение демонстрирует реалистичный подход к 3D. Но, повторяю, мне нужно решить проблему, а 3d - это не (было бы действительно круто, хотя). Достаточное представление, удовлетворяющее функциональным потребностям.

Эта информация о части, чтобы сделать рисунок приходит из API (размер, положение и т.д.)

Мне не нужно, чтобы это было реалистичным на самом деле. Простейшей аппроксимацией было бы показать цилиндр в представлении 2d, как прямоугольник, выполненный из интерактивных маленьких прямоугольников.

Итак, как я уже говорил, я думаю, что есть (как я вижу) два противоположных подхода: Реалистичная или упрощенный

Есть ли способ, чтобы достигнуть хорошего решения в середине? Какие библиотеки, компоненты, рамки, на которые я должен обратить внимание?

Мое исследование привело меня к SceneKit, но я до сих пор не знаю, смогу ли я с ним взаимодействовать. Взаимодействие - очень важная часть, поскольку мне нужно отобразить popover, когда пользователь нажимает на любой маленький прямоугольник над цилиндром.

Благодаря

Answer 1

Теоретически, делая это в Scene Kit или с SpriteKit или UIKit Popovers является идеальным.

Однако набор сцен (и комплект Sprite), похоже, находится в состоянии потока, в котором никто из Apple не общается с пользователями о множестве проблем, с которыми в настоящее время сталкиваются люди с обоими. От относительно стабильного и опытного набора Sprite в iOS 8.4 до многих потерянных характеристик в iOS 9 кажется обычным явлением. Набор сценариев просто не кажется завершенным, и в результате документация и сообщество почти не существуют.

Это, как говорится ... теория такова:

Материал идентификаторы, что используются в традиционных 3D приложений, чтобы определить области объекта, которые имеют различные материалы. Каким-то образом эти идентификаторы материалов называются «элементами» в SceneKit. Я не смог найти больше об этом.

Должно быть возможно обнаружить «элемент», находящийся под прикосновением к объекту, и соответствующим образом реагировать. Вы даже можете изменить состояние/природу материала на этом элементе, чтобы указать, что он выбран в настоящий момент.

Если вы хотите получить гладкий, округлый цилиндр в соответствии с вашим примером, начните с цилиндра, состоящего из всего лишь достаточно сегментов, чтобы описать/определить идентификаторы материалов, которые вам нужны для ваших «прямоугольных» разделов, которые нужно коснуться.

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

Answer 2

Идея для «упрощенной» версии:

если this representation является Окей, вы можете использовать UICollectionView. Каждая ячейка может иметь определенный размер, чтобы благодаря

collectionView:layout:sizeForItemAtIndexPath: 

Затем каждая ячейка коллекции может быть маленький прямоугольник, представляющий осязаемый часть цилиндра.

и используя

collectionView:(UICollectionView *)collectionView 
    didSelectItemAtIndexPath:(NSIndexPath *)indexPath 

Чтобы получить контакт.

Это поможет отобразить пирог в нужном месте:

CGRect rect = [collectionView layoutAttributesForItemAtIndexPath:indexPath].frame; 

Наконец, вы можете выбрать подходящий поповер (если приложение должно работать на iPhone) здесь: https://www.cocoacontrols.com/search?q=popover

Не идеально, но я думаю, что это эффективно!

Answer 3

Для достижения такого взаимодействия вам не нужны специальные рамки. Этот эффект может быть достигнут со стандартными UIKit и UIView и небольшой тригонометрией. Вы можете нарисовать именно ваш пример изображения, используя математику 2D и рисунок. Мой ответ не является точной формулой, но включает в себя размышление о том, как фигуры определены и разбить проблему на управляемые шаги.

Цилиндр может быть определен двумя смещенными кругами, представляющими торцевые части, соединенные по их радиусам. Я буду использовать орфографическую проекцию, означающую, что цилиндр не становится меньше по мере того, как глубина проходит в фоновом режиме (но при необходимости вы можете приспособиться к перспективе). Вы можете сделать это с помощью CoreGraphics в UIView drawRect.

Квадратный срез представляет собой угловой элемент круга, смещенный на величину, меньшую длины цилиндра, но в том же направлении, что и на следующей диаграмме (извините за неточный рисунок).

Этот квадрат ломтик вы заинтересованы в том, области указаны в сплошном красном, вне радиуса первого круга, так и внутри радиуса мнимого второго круга (который только смещение от первого круга по какой бы длине вам не понадобился срез).

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

Чтобы проверить, является ли прикосновение в один из этих квадратных ломтиков:

1. Проверить, если точка касания находится между углом a от начала координат на a.
2. Проверьте, находится ли точка касания вне радиуса внутреннего круга.
3. Проверьте, находится ли точка касания внутри радиуса наружного круга. (Обратите внимание, что это означает, если круги больше, чем радиус.)

Чтобы найти точку для отображения popover, вы можете усреднить конечные точки на срезе или найти средний угол между двумя краями и смещение на половину расстояния.

Answer 4

Да, SceneKit.

Когда пользователь выполняет событие касания, это означает, что вы знали двумерную координату на экране, поэтому ваше единственное решение - перекрыть представление или нет, даже трехмерная модель не существует.

Во-первых, мы можем логически разделить требование на две части, определить трогательный сегмент, отображающий правильный «цвет» в каждом сегменте.

Я думаю, что использование 3D-модели заключается в том, чтобы определить, какая часть данных будет отображаться в вашем случае, если я не ошибаюсь. В этом случае метод тестирования теста SCNView выполнит большую часть работы для вас. Что вам нужно сделать, так это выполнить хит-тест, вынуть узел удара и локальную трехмерную координату хита этого узла, затем вы можете рассчитать, какой сегмент поражен этим прикосновением и принять решение.

Теперь как рисовать поверхность цилиндра будет единственным вопросом слева, не так ли? Существуют различные способы сделать это, например, просто нарисуйте каждое изображение, которое вам нужно, и программно, и прикрепите его к материалу цилиндра или наложите файлы изображений на диск и используйте в качестве материала для цилиндра ...

Я думаю, что проблема будет быть в основном решена.