Искажающая часть UIView

Question

У меня интересная проблема.Надеюсь, есть интересное решение:)

У меня есть представление UIScrollView, которое занимает всю ширину экрана iPad.Содержание вида прокрутки, очевидно, шире.

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

Таким образом, есть две проблемы:

1) Возможно ли вообще такое преобразование?По сути, я хочу немного сместить левую и правую стороны вверх и сделать так, чтобы верхний и нижний края вида были искривлены так, чтобы средние точки не двигались.

2) Я не хочупримените это к содержимому вида прокрутки, так как эффект будет потерян при прокрутке вне поля зрения.Вместо этого я хочу применить результат к родительскому контейнеру.Будет ли это работать?

Вот изображение:

Тим

Answer 1

В настольной OS X это было бы возможно при использовании CIFilter на CALayer.Однако согласно документации CALayer :

Хотя класс CALayer предоставляет это свойство, Core Image недоступно в iOS.В настоящее время фильтры, доступные для этого свойства, не определены.

Лучше всего было бы реализовать это самостоятельно, используя фрагментный шейдер OpenGL.Сложнее всего получить доступ к содержимому представления в регионе, который вы хотите преобразовать, в режиме реального времени.

Мне еще предстоит увидеть что-нибудь, работающее с живым (прокручиваемым) контентом на iOS.Все подобные анимации, такие как мусорная корзина Mail.app, анимация страниц, завитки страниц и т. Д. Работают со статическим содержимым (например, представление, отображаемое на изображение только один раз, затем преобразует это изображение).

В настоящее время это возможно только в следующих случаях:

• Визуализация области просмотра изображения через определенный интервал
• Преобразование с помощью шейдера opengl
• Визуализация вывода opengl поверх фактического содержимого.

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

Answer 2

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

Answer 3

Интересная идея!Теоретически вы не можете «деформировать» свое представление по матрице (с помощью матриц можно выполнять только преобразования между строками.

В качестве обходного пути вы можете разделить верхнюю и нижнюю области экрана на тонкие виды.Установите вертикальный масштаб этих представлений: 8x (например) для ближайшего к экрану края, затем 4x, 2x ... Затем визуализируйте длинный скролл-просмотр в какой-то внеэкранный контейнер. И отобразите части этого контейнера на тонкие виды. Iне знаю, как это сделать с UIKit API, но это рабочее решение для графики на основе OpenGL.

Answer 4

Решения:

(1)

Рисование CALayer поверх прокрутки с меньшей непрозрачностью, что создаст эффект закругленного угла для ScrollView.

Минусы:Рендеринг CALayers слишком медленный для этого использования (особенно на старых устройствах), он не очень хорош для использования в играх и т. Д. Вы можете переключиться на спрайты UIImages или cocos2d, другой вариант - создать свой собственный класс слоев с OpenGL,хотя это не так просто.Надеюсь, вам подойдет один из этих вариантов.

(2)

Является ли содержимое вашего вида прокрутки (что отображается под закругленными углами) сплошным или статичным?Если это так, вы сможете добиться более высокой производительности, накладывая «угловую» графику - полупрозрачную в их центре и непрозрачную (с фоновым цветом или любым другим) на их краях - поверх углов вашего вида прокрутки.Стоимость наложения четырех изображений 11x11 на ваш контент будет значительно меньше, чем нарезка.

Минусы: неизвестно:)

(3)

scrollView.layer.cornerRadius = 11;
scrollView.layer.masksToBounds = YES;

Это отлично работает для iPhone 4. Минусы: не работает идеально в iPhone 3GS, 3G и iPod.