Compose UI Canvas API Community Challenge

ScribbleDash

تطبيق رسم تفاعلي متقدم عبر لوحة رقمية يستكشف الأداء الفائق للرسم الأصلي باستخدام Jetpack Compose.

ScribbleDash Mockup

نظرة عامة

ScribbleDash تطبيق رسم يدفع واجهات الرسم الأصلية في Android عبر Jetpack Compose إلى أقصاها. أطوار لعب مثل "One Round Wonder" تتحدى اللاعب بلوحات بصعوبة متزايدة، مع استخراج إيماءات في الوقت الفعلي، عرض ضربات شعاعية (Vector)، وذاكرة Undo/Redo.

التحدي

إنشاء تطبيق رسم تفاعلي عبر Compose يعني إعادة حساب مسارات (Bezier) باستمرار وسط أحداث التقاط مؤشرات عالية التردد. بدون استراتيجيات معالجة رسوميات متقدمة، ستتعثر حلقة الرسم (Draw Loop) بوضوح.

وتزداد التعقيدات عند الحاجة لتتبع مسارات الرسم في الذاكرة لتوفير ميزة التراجع والإعادة (Undo/Redo) لضربات الفرشاة المخصصة، دون التسبب في أخطاء استنزاف الذاكرة (Out-Of-Memory) خلال فترات الاستخدام الطويلة، مع الحفاظ على تخطيط حزم نظيف يسهل التوسع لاحقاً.

القرارات المعمارية والتقنية

لتوفير أداء رسم فائق، استخدمت تخطيطات `Canvas` الأصلية المتوفرة في Jetpack Compose والمغلفة بالكامل داخل بنية محسّنة متعددة الحزم (Multi-package) ومقسمة لطبقات.

التنفيذ الأمثل للمسارات الرسومية

  • اجتياز المسارات (Path Traversal): بدلاً من إعادة بناء كامل اللوحة القماشية في كل إطار، يتم تخزين ضربات الفرشاة الفردية مؤقتاً كمصفوفات `Path`، مما يمنع محفزات إعادة التكوين (Recomposition) العميقة إلا عند الضرورة القصوى. مصفوفات الحالة تحتفظ بآخر 5 متجهات لتوفير دورات تراجع/إعادة دقيقة وموثوقة.
  • الهيكلة شبه المعيارية (Pseudo-Modular): على الرغم من كون التطبيق أحادي الوحدة هندسياً، إلا أن الحزم (`features/gamemodes/`، `features/draw/`) معزولة أفقياً بالكامل، مما يسمح بتبديل أنماط اللعب أو التوسع فيها دون تسريب منطق الأعمال (Business Logic) لنطاقات غير ذات صلة.
  • تتبع الاعتماديات (Dependency Tracking): يتولى إطار الـ DI (حقن التبعية) حقن حالات أطوار اللعب المتخصصة بشكل منفصل كلياً عن مكونات واجهة مستخدم Compose الأساسية.

الأثر والنتائج

  • حلقة رسم ثابتة بـ 60FPS، تحققت بتضييق نطاق إعادة التكوين تحت أحداث مؤشر عالية التردد.
  • محرك Undo/Redo يصمد عبر الجلسات الطويلة دون نمو غير منضبط للـ heap.

التقنيات المستخدمة

Language Kotlin
UI Framework Jetpack Compose
DI Framework Koin
Design System Material Design 3
Testing & Debug JUnit & Timber