- PVSM.RU - https://www.pvsm.ru -
Добрый день, сейчас я попробую описать создание галереи изображений для мобильных устройств в среде ExtJS 6 (modern toolkit). Основная причина создания статьи, это отсутствие поддержки жестов при просмотре изображений стандартными средствами. В стандартном компоненте carousel нет поддержки touch событий для масштабирования. Данная статья призвана исправить этот недостаток.
В данный момент существует не так много основных touch-событий, основной перечень вы можете увидеть на изображении:
Поддержка touch событий была добавлена в ExtJS 5. В последней доступной версии ExtJS 6.0.1.250, существуют следующие touch события (можете провести аналогию с картинкой):
Опустим создание тестового приложения, т.к это описано в предыдущих статьях [9].
Для отображения галереи изображений modern toolkit предлагает свой компонент carousel [10], из самых главных недостатков отсутствие масштабирования и поворотов изображений. Данная задача уже решалась на официальном форуме, но лишь для старой версии Sencha Touch 2.0.1.1 [11]. Переписанный плагин я оставлю тут, за не имением личного блога. Надеюсь он кому нибудь пригодится. Провёл следующий перечень работ:
Ссылка на github [12]
PS: Если найдёте баги, пишите в комментариях или на github, всегда буду рад помочь.
Автор: Swat2k
Источник [13]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/biblioteka-extjs-sencha/117449
Ссылки в тексте:
[1] DoubleTap: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.DoubleTap
[2] Drag: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.Drag
[3] EdgeSwipe: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.EdgeSwipe
[4] LongPress: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.LongPress
[5] Pinch: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.Pinch
[6] Rotate: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.Rotate
[7] Swipe: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.Swipe
[8] Tap: https://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.event.gesture.Tap
[9] статьях: https://habrahabr.ru/post/270343/
[10] carousel: https://docs.sencha.com/extjs/6.0/6.0.0-modern/#!/api/Ext.carousel.Carousel
[11] Sencha Touch 2.0.1.1: https://github.com/SunboX/ST2_ImageViewer
[12] github: https://github.com/Swat2k/ExtJS-pinch-carousel
[13] Источник: https://habrahabr.ru/post/278387/
Нажмите здесь для печати.