Разработка мобильного приложения для коллажей и фотоальбомов
Приложение для коллажей — это интерактивный редактор изображений в реальном времени. Пользователь тащит фото на шаблон, масштабирует, вращает, накладывает текст. Если рендеринг тормозит при жестах — это сразу ощущается. Весь UI надо строить на GPU, а не на CPU.
Канвас: как не тормозить при манипуляциях
iOS. Не используем UIImageView для каждого слоя — это Core Animation без GPU-ускорения трансформаций при transform. Правильный путь: CALayer иерархия или Metal-рендеринг через MTKView.
Для большинства коллажей (до 10-15 слоёв) достаточно CALayer: каждый элемент — отдельный sublayer с contents = CGImage. Трансформации через CATransform3D выполняются на GPU. CATiledLayer — для больших фонов.
При финальном рендере в файл: UIGraphicsImageRenderer с beginImageContextWithOptions или Metal-pipeline для точного воспроизведения трансформаций.
Android. Canvas-подход на SurfaceView или TextureView — работает, но сложно управлять слоями. Лучше: кастомный View с drawBitmap + матрица трансформации для каждого элемента. Для сложных эффектов — RenderScript (deprecated) или OpenGL ES через GLSurfaceView. В Jetpack Compose: Canvas Composable с drawImage(paint = ...) — быстро для простых случаев.
Flutter. CustomPainter с canvas.drawImageRect для изображений, canvas.drawParagraph для текста. При большом количестве слоёв — RepaintBoundary оборачивает каждый редактируемый элемент, Fluter перерисовывает только изменённый слой.
Жесты: масштаб, вращение, перетаскивание одновременно
Одновременная обработка pinch + rotate + pan — стандартная задача, но реализовать правильно непросто.
iOS: UIPinchGestureRecognizer, UIRotationGestureRecognizer, UIPanGestureRecognizer работают одновременно через shouldRecognizeSimultaneouslyWith. Применяем дельту каждого жеста к CATransform3D элемента инкрементально — не абсолютное значение, а изменение за кадр. Иначе при началом нового жеста элемент «прыгает».
Android: ScaleGestureDetector + RotationGestureDetector (нет в стандартной библиотеке, реализуем вручную через два касания) + GestureDetector. Flutter: GestureDetector с onScaleUpdate объединяет scale + rotation в одном колбэке (ScaleUpdateDetails.rotation).
Snap-to-grid и snap-to-center: при перетаскивании проверяем proximity к осям (±10dp) и к центру канваса — если близко, «притягиваем» с haptic feedback (UIImpactFeedbackGenerator.impactOccurred() / performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY)).
Шаблоны коллажей
Шаблон определяет: количество ячеек, их расположение и соотношение сторон. Храним как JSON: массив {x, y, width, height, rotation} в единицах от 0 до 1 (относительно размера коллажа). При отображении масштабируем под размер экрана.
Пользователь заполняет ячейки фото из галереи. PHPickerViewController (iOS 14+) / PhotoPicker (Android) / image_picker (Flutter) — современные picker без запроса разрешений на всю галерею.
Fit vs Fill для ячейки: пользователь выбирает, обрезается ли фото под ячейку или вписывается с полями.
Экспорт
Финальный коллаж рендерим офлайн в разрешении 2x-3x от экрана (для печати — 300 DPI для заданного физического размера). Прогресс рендеринга показываем через Progress/ProgressBar. Сохранение в Photos: PHPhotoLibrary.performChanges (iOS) / MediaStore.Images.Media.insertImage (Android).
Сроки: базовый редактор с 10-15 шаблонами, текстом и экспортом — 3-4 недели. Полный редактор со стикерами, фильтрами, кастомными шаблонами и облачным хранилищем — 6-8 недель.