כאשר משתמש גורר תמונה לתבנית, משנה את גודלה, מסובב אותה ומוסיף טקסט — כל עיכוב בעיבוד מורגש מיד. כל ממשק המשתמש חייב לרוץ על ה-GPU, לא על ה-CPU. אנו מתמחים בפיתוח אפליקציות קולאז' ואלבומי תמונות למובייל השומרות על 60 FPS גם במהלך מחוות צביטה, סיבוב והזזה בו-זמנית. עם ניסיון של למעלה מחמש שנים ויותר מ-50 גרסאות מוצלחות ב-App Store וב-Google Play, אנו מספקים ביצועים יציבים גם במכשירים ברמה בינונית. צרו קשר עם המהנדסים שלנו לייעוץ פרויקט.
ביצועי Canvas: מניעת עיכובים במהלך מניפולציות
iOS. אנו נמנעים משימוש ב-UIImageView עבור כל שכבה מכיוון ש-Core Animation לא מאיץ טרנספורמציות ב-GPU כאשר משתמשים ב-transform. במקום זאת, אנו בונים היררכיית CALayer או משתמשים בעיבוד Metal דרך MTKView. עבור רוב הקולאז'ים (עד 10–15 שכבות), CALayer מספיק: כל אלמנט הוא תת-שכבה עם contents = CGImage, וטרנספורמציות דרך CATransform3D נתמכות ב-GPU. CATiledLayer מטפל בתמונות רקע גדולות. עבור פלט קובץ סופי, אנו משתמשים ב-UIGraphicsImageRenderer או ב-pipeline של Metal כדי ללכוד טרנספורמציות במדויק.
Android. גישת Canvas על SurfaceView או TextureView עובדת אך הופכת את ניהול השכבות למורכב. אנו מעדיפים View מותאם אישית עם drawBitmap ומטריצת טרנספורמציה לכל אלמנט. עבור אפקטים מתקדמים, אנו משתמשים ב-OpenGL ES דרך GLSurfaceView. ב-Jetpack Compose, ה-Composable Canvas עם drawImage(paint = ...) מהיר למקרים פשוטים; עבור פרויקטים גדולים אנו מסתמכים על OpenGL.
Flutter. אנו משתמשים ב-CustomPainter עם canvas.drawImageRect לתמונות ו-canvas.drawParagraph לטקסט. כדי למנוע ציור מחדש של כל הסצנה, כל אלמנט ניתן לעריכה עטוף ב-RepaintBoundary. Flutter מצייר מחדש רק את השכבה שהשתנתה.
| פלטפורמה | גישה עיקרית | האצת GPU | מורכבות שכבות | זמן השהיה אופייני (ms) |
|---|---|---|---|---|
| iOS | CALayer / Metal | כן | בינוני | ≤16 |
| Android | Custom View / GLSurfaceView | כן | גבוה | ≤20 |
| Flutter | CustomPainter + RepaintBoundary | כן | נמוך | ≤16 |
טיפול סינכרוני במחוות לקנה מידה, סיבוב והזזה
עיבוד צביטה, סיבוב והזזה בו-זמנית הוא סטנדרטי אך טריקי ליישום נכון. ב-iOS, אנו משתמשים ב-UIPinchGestureRecognizer, UIRotationGestureRecognizer ו-UIPanGestureRecognizer יחד עם shouldRecognizeSimultaneouslyWith. הדלתא של כל מחווה מוחלת באופן מצטבר על CATransform3D של האלמנט — לעולם לא כערך מוחלט, אחרת האלמנט קופץ כאשר מחווה חדשה מתחילה. תיעוד UIPinchGestureRecognizer
ב-Android, אנו משלבים ScaleGestureDetector עם RotationGestureDetector מיושם ידנית (מעקב אחר שתי נקודות מגע) ו-GestureDetector. תיעוד ScaleGestureDetector
Flutter: GestureDetector עם onScaleUpdate מטפל גם בקנה מידה וגם בסיבוב בקריאה אחת (ScaleUpdateDetails.rotation). אנו גם מיישמים הצמדה לרשת והצמדה למרכז: בעת גרירה, אנו בודקים קרבה לצירים (±10 dp) ולמרכז הקנבס, ומצמידים עם משוב הפטי אם קרובים.
למה לאחסן תבניות קולאז' כ-JSON?
תבנית מגדירה את מספר התאים, מיקומם ויחסי הגובה-רוחב שלהם. אנו מאחסנים אותן כ-JSON: מערך של {x, y, width, height, rotation} ביחידות 0-עד-1 יחסית לגודל הקולאז'. בזמן ריצה, אנו מבצעים קנה מידה לממדי המסך. משתמשים ממלאים תאים בתמונות מהגלריה באמצעות PHPickerViewController (iOS 14+), PhotoPicker (Android) או image_picker (Flutter) — בוררים מודרניים שאינם דורשים הרשאת גלריה מלאה. המשתמש בוחר בין fit או fill עבור כל תא, תוך חיתוך או הוספת ריפוד לפי הצורך.
בפרויקט אחרון, הפחתנו את זמן השהיית המחוות מ-50 ms לפחות מ-16 ms במכשירים ברמה בינונית על ידי מעבר לעיבוד Metal ב-iOS ואופטימיזציה של חישובי דלתא טרנספורמציה ב-Android. זה אפשר תצוגה מקדימה חלקה בזמן אמת גם במכשירים כמו iPhone 8 ו-Samsung Galaxy A50.
מה אנו מבטיחים
אנו פועלים לפי מתודולוגיה מוכחת על יותר מ-50 פרויקטים. עבור iOS, הגרסה הסופית עוברת בדיקת קוד ובדיקות על מכשירים עם iOS 15 ומעלה. עבור Android, אנו בודקים על אמולטורים ומכשירים פיזיים עם Android 10+. אנו מבטיחים ללא דליפות זיכרון (בניטור באמצעות Instruments ו-LeakCanary) ו-60 FPS יציב במהלך מחוות. אנו מספקים תיעוד טכני ותמיכה במהלך הפריסה.
רזולוציות ייצוא
אנו מעבדים את הקולאז' הסופי במצב לא מקוון ברזולוציה של פי 2–3 מרזולוציית המסך לרשתות חברתיות, או ב-300 DPI עבור גודל הדפסה פיזי נתון. התקדמות העיבוד מוצגת דרך Progress או ProgressBar. שמירה לתמונות משתמשת ב-PHPhotoLibrary.performChanges (iOS) או MediaStore.Images.Media.insertImage (Android).
| שימוש יעד | רזולוציה | פורמט | גודל קובץ משוער |
|---|---|---|---|
| רשתות חברתיות | פי 2–3 מהמסך (עד 12 MP) | JPEG/PNG | 1–5 MB |
| הדפסה (10×15 ס"מ) | 300 DPI (1181×1772 px) | PNG | 3–8 MB |
| הדפסה (20×30 ס"מ) | 300 DPI (2362×3543 px) | PNG | 10–25 MB |
מה כלול בעבודה שלנו
- ניתוח UX/UI ואב-טיפוס (wireframes, זרימות משתמש)
- יישום Canvas עם האצת GPU (Metal / OpenGL / CustomPainter)
- מערכת תבניות (10–15 מובנות, אפשרות להתאמה אישית)
- טיפול במחוות (צביטה, סיבוב, הזזה, הצמדה לרשת)
- ייצוא ברזולוציה גבוהה (פי 2–3, 300 DPI)
- בדיקות על מכשירים אמיתיים (iOS/Android)
- פריסה ל-App Store ול-Google Play, הגדרת חתימת קוד
- תיעוד והדרכת צוות
לוחות זמנים ותמחור
עורך בסיסי עם 10–15 תבניות, טקסט וייצוא אורך 3–4 שבועות. עורך מלא עם מדבקות, פילטרים, תבניות מותאמות אישית ואחסון בענן אורך 6–8 שבועות. העלות נקבעת באופן אישי לאחר ניתוח הדרישות שלכם. צרו קשר לייעוץ לגבי טכנולוגיות ולוחות זמנים.