Мы разрабатываем мобильные приложения для создания коллажей и фотоальбомов, где каждый пиксель под контролем. Пользователь тащит фото на шаблон, масштабирует, вращает, накладывает текст — если рендеринг тормозит при жестах, это сразу заметно. Весь UI строится на GPU, а не на CPU. Наша команда имеет 5+ лет опыта в разработке визуальных редакторов, более 50 успешных релизов в App Store и Google Play. Мы гарантируем стабильную работу даже на устройствах среднего сегмента. Получите консультацию инженера по вашему проекту.
Канвас: как не тормозить при манипуляциях
iOS. Не используем UIImageView для каждого слоя — это Core Animation без GPU-ускорения трансформаций при transform. Правильный путь: CALayer иерархия или Metal-рендеринг через MTKView. Для большинства коллажей (до 10–15 слоёв) достаточно CALayer: каждый элемент — отдельный sublayer с contents = CGImage. Трансформации через CATransform3D выполняются на GPU. CATiledLayer — для больших фонов. При финальном рендере в файл: UIGraphicsImageRenderer или Metal-pipeline для точного воспроизведения трансформаций.
Android. Canvas-подход на SurfaceView или TextureView работает, но сложно управлять слоями. Лучше: кастомный View с drawBitmap + матрица трансформации для каждого элемента. Для сложных эффектов — OpenGL ES через GLSurfaceView. В Jetpack Compose: Canvas Composable с drawImage(paint = ...) — быстро для простых случаев. Для больших проектов используем RenderScript (deprecated) или OpenGL.
Flutter. CustomPainter с canvas.drawImageRect для изображений, canvas.drawParagraph для текста. При большом количестве слоёв — RepaintBoundary оборачивает каждый редактируемый элемент, Flutter перерисовывает только изменённый слой.
| Платформа | Основной подход | GPU-ускорение | Сложность слоёв | Типовые задержки (ms) |
|---|---|---|---|---|
| iOS | CALayer / Metal | Да | Средняя | ≤16 |
| Android | Custom View / GLSurfaceView | Да | Высокая | ≤20 |
| Flutter | CustomPainter + RepaintBoundary | Да | Низкая | ≤16 |
Как обеспечить синхронную обработку жестов масштаба и вращения?
Одновременная обработка pinch + rotate + pan — стандартная задача, но реализовать правильно непросто. На iOS: UIPinchGestureRecognizer, UIRotationGestureRecognizer, UIPanGestureRecognizer работают одновременно через shouldRecognizeSimultaneouslyWith. Применяем дельту каждого жеста к CATransform3D элемента инкрементально — не абсолютное значение, а изменение за кадр. Иначе при начале нового жеста элемент прыгает. UIPinchGestureRecognizer — официальная документация.
Android: ScaleGestureDetector + ручной RotationGestureDetector (через два касания) + GestureDetector. ScaleGestureDetector — справка Android. Flutter: GestureDetector с onScaleUpdate объединяет scale и rotation в одном колбэке (ScaleUpdateDetails.rotation). Snap-to-grid и snap-to-center: при перетаскивании проверяем proximity к осям (±10dp) и к центру канваса — если близко, притягиваем с haptic feedback.
Почему шаблоны коллажей лучше хранить в JSON?
Шаблон определяет: количество ячеек, их расположение и соотношение сторон. Храним как JSON: массив {x, y, width, height, rotation} в единицах от 0 до 1 (относительно размера коллажа). При отображении масштабируем под размер экрана. Пользователь заполняет ячейки фото из галереи. Используем PHPickerViewController (iOS 14+) / PhotoPicker (Android) / image_picker (Flutter) — современные picker без запроса разрешений на всю галерею. Fit vs Fill для ячейки: пользователь выбирает, обрезается ли фото под ячейку или вписывается с полями.
Что мы гарантируем?
Придерживаемся методологии, проверенной на 50+ проектах. Для iOS итоговый билд проходит код-ревью и тестирование на устройствах с iOS 15 и выше. Для Android — на эмуляторах и физических устройствах с Android 10+. Гарантируем отсутствие утечек памяти (мониторинг через Instruments и LeakCanary) и стабильные 60 FPS при жестах. Предоставляем техническую документацию и поддержку на этапе деплоя.
Экспорт и разрешения
Финальный коллаж рендерим офлайн в разрешении 2x–3x от экрана (для печати — 300 DPI для заданного физического размера). Прогресс рендеринга показываем через Progress/ProgressBar. Сохранение в Photos: PHPhotoLibrary.performChanges (iOS) / MediaStore.Images.Media.insertImage (Android).
| Целевое использование | Разрешение | Формат | Размер файла (ориентировочно) |
|---|---|---|---|
| Социальные сети | 2x–3x экрана (до 12 Мп) | JPEG/PNG | 1–5 МБ |
| Печать (10×15 см) | 300 DPI (1181×1772 px) | PNG | 3–8 МБ |
| Печать (20×30 см) | 300 DPI (2362×3543 px) | PNG | 10–25 МБ |
Что входит в работу
- Аналитика и проектирование UX/UI (прототипы, user flow)
- Реализация канваса с GPU-ускорением (Metal / OpenGL / CustomPainter)
- Система шаблонов (10–15 базовых, возможность кастомных)
- Обработка жестов (pinch, rotate, pan, snap-to-grid)
- Экспорт в высоком разрешении (2x–3x, 300 DPI)
- Тестирование на реальных устройствах (iOS/Android)
- Деплой в App Store и Google Play, настройка подписи
- Документация и обучение команды
Сроки и стоимость
Базовый редактор с 10–15 шаблонами, текстом и экспортом — 3–4 недели. Полный редактор со стикерами, фильтрами, кастомными шаблонами и облачным хранилищем — 6–8 недель. Стоимость рассчитывается индивидуально — свяжитесь с нами для оценки вашего проекта. Получите консультацию по стеку и срокам.
Технические детали апробированы на проектах с 5+ летним опытом в мобильной разработке.