الفصل 21 — الإحداثيات وCanvas والرسم ثنائي الأبعاد

المستوى: متوسط المدة المقدّرة: 7 ساعات المتطلبات المسبقة: الفصل 19 (Flutter بوتيرة سريعة، CustomPainter) والفصل 20 (حلقة اللعبة، Ticker، delta time) ما ستتقنه في نهاية الفصل: رسم أي مشهد ثنائي الأبعاد يدويًا باستخدام Canvas وPaint، وتحديد موضعه بدقة البكسل في معلم الشاشة، وتحويله (إزاحة ودوران وتحجيم) وتحريكه باستخدام dt الخاص بحلقة اللعبة.

21.0 — أهداف الفصل

في نهاية هذا الفصل ستكون قادرًا على:

• شرح سبب اتجاه المحور Y في الشاشة نحو الأسفل، على عكس المعلم الرياضي؛
• تحديد نقطة الأصل (0, 0) لمنطقة الرسم والتفكير بالإحداثيات المحلية؛
• التمييز بين البكسل المنطقي والبكسل الفيزيائي واستخدام devicePixelRatio؛
• قراءة حجم منطقة الرسم الممرَّر إلى paint() والتكيّف معه؛
• التعامل مع Offset وRect وSize، وهي الأنواع الثلاثة الأساسية في هندسة Flutter؛
• استباق الفرق بين Vector2 (في Flame) وOffset (في Flutter)؛
• كتابة CustomPainter نظيف مع shouldRepaint() صحيحة؛
• ضبط كائن Paint: اللون والنمط وسماكة الخط؛
• رسم المستطيلات والدوائر والخطوط والأشكال الإهليلجية والمستطيلات ذات الزوايا المدوّرة والمسارات والنقاط؛
• رسم النص داخل Canvas باستخدام TextPainter؛
• بناء الألوان بنظام ARGB وتطبيق الشفافية؛
• تطبيق تدرّج خطي أو شعاعي على شكل ما؛
• شرح ترتيب الرسم («خوارزمية الرسّام») واستثماره؛
• استخدام save() / restore() دون الإخلال بتوازن المكدّس أبدًا؛
• تطبيق translate() وrotate() وscale() وفهم سبب أهمية ترتيبها؛
• رسم شكل حول مركزه بدلًا من زاويته (مفهوم نقطة الارتكاز «anchor»)؛
• حصر الرسم في منطقة محددة باستخدام clipRect()؛
• شرح double buffering وسبب عدم وميض الشاشة؛
• تحديد ما هو مكلف في paint() وتفاديه؛
• رسم شبكة زنزانة وشخصية بالكامل بأشكال هندسية؛
• تحريك رسم باستخدام dt من الفصل 20.