YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Arabic subtitles

02-12 Fixing_Overdraw_with_Canvas_API

02-12 Fixing_Overdraw_with_Canvas_API

Get Embed Code
13 Languages

Showing Revision 7 created 02/08/2016 by sp8.

  1. حسنًا، لقد عدنا مجددًا إلى برنامج
    Android Studio،
  2. لمراجعة مصدر DroidCardsView.
  3. مجددًا، هذا هو العرض المخصص.
  4. فقط لنتذكر، أنه في هذا العرض المخصص
    قمنا بإنشاء أوراق اللعب المتراكبة.
  5. على سبيل المثال،
    كل بطاقة لها صورتها النقطية الخاصة بها،
  6. ونحن نرسمهم على الشاشة
    عن طريق التحكم في أسلوب onDraw.
  7. وتذكر، أنه بالتحكم في أسلوب onDraw،
  8. فلن يتمكن الأندرويد من تحسين
    معالجة المشهد،
  9. إنها مهمتنا نحن المطورون لاقتصاص
    كل بطاقة بطريقة صحيحة
  10. كما ستظهر على الشاشة
    وذلك لتجنب تراكب الرسوم غير الضروري.
  11. ولحسن الحظ، فأداة Canvas API
    تعطينا الطرق الصحيحة التي نحتاجها
  12. لرسم بطاقاتنا بطريقة أكثر فعالية.
  13. فلنلقِ نظرة على التوثيق.
  14. ولنستخدم طريقةcanvas.clipRect
    لتحسين الكود خاصتنا.
  15. سوف نستخدم هذا المتغير هنا والذي يحتوي
    على أربعة متغيرات مثل البارامترات.
  16. حسنًا، لقد عدنا الآن إلى
    Android Studio
  17. فلنقم بتعديل كيفية رسم كل بطاقة مدرجة
  18. وسوف أستخدم تلك الخاصية الرائعة الموجودة
    في Android Studio لإحضار مشهد مختلف
  19. إلى المقدمة، حتى تتمكن من رؤية
    حالة الكود قبل وبعد التعديل.
  20. حسنًا، نحن هنا في مشهد المقارنة،
  21. ولنلق نظرة خاصة على أسلوب onDraw
    وهو الأسلوب الذي نتجاوزه.
  22. لدينا الحالة القديمة لحلقة for التكرارية
    على اليسار،
  23. لكن فلنركز على التحسينات
    التي سنقوم بها هنا على اليمين.
  24. الآن، وبينما نكرر البطاقات،
    فلنراجع كل خطوة من التحسينات.
  25. رقم واحد أولًا سنقوم بحساب موضع البطاقة.
  26. ثم سنقوم بتشغيل تلك الخاصية
    canvas.save
  27. التي ستحفظ حالة لوحة الرسم الحالية.
  28. وبمعنى آخر،
  29. فهي تحافظ على الوضع الحالي
    للشاشة قبل تطبيق أداة clipRect API.
  30. الآن، عندما نقوم بتشغيل طريقة clipRect،
  31. فإننا بذلك نقوم بعمل بعض الحدود الهندسية.
  32. وعندما نمرر هذه المتغيرات،
    فنحن بذلك نخبر النظام
  33. بأن يرسم فقط جزء البطاقة
    الذي نريد أن يكون مرئيًا.
  34. وبالطبع، بقية الأجزاء ستكون مخفية.
  35. الآن، أجزاء البطاقة الموجودة
    ضمن الحدود التي وضعناها فقط
  36. هي الأجزاء التي سيتم رسمها فقط.
  37. وأخيرًا، سنقوم بتشغيل canvas.restore،
  38. والتي ستحول لوحة الرسم
    إلى وضعية عدم الاقتصاص.
  39. وبمعنى آخر،
  40. سوف تقوم بإلغاء الحدود
    التي وضعناها عندما قمنا بتشغيل clipRect.
  41. ثم نقوم بإعادة تلك الحلقة التكرارية
    لجميع البطاقات ما عدا الموجودة بالأعلى.
  42. الآن وبشكل خاص سنقوم بمعالجة
  43. البطاقة الأخيرة بشكل مختلف
    عن نظيراتها الموجودة بالأسفل.
  44. وبالنسبة لهذه البطاقة،
    فلن نحتاج إلى الاقتصاص،
  45. لذا سنقوم برسمها كاملة.
  46. ويمكنك أن ترى ذلك من خلال
    هذه الجملة الموجودة هنا.
  47. حسنًا، فلنقم بإنشاء الكود المحسن،
  48. لنرَ إن كنا قد قمنا بتقليل
    كمية من تراكب الرسوم.
  49. حسنًا، رائع!
  50. كما ترى هنا، يوجد القليل من تراكب الرسوم.
  51. آمل أن يكون مفهومًا أنه باستخدام
    Canvas API يكون لدينا طريقة مباشرة
  52. للرسم بطريقة فعالة عند العمل
    على عروض مخصصة.
  53. وفي حالة ما إذا رغبت باستكشاف
    Canvas API أكثر،
  54. فتأكد من مراجعة كامل التوثيق
    الموجود في ملاحظات المدرب.
  55. الآن، مشاهد مثل هذه تعتبر رائعة
    لمساعدتنا على خلق
  56. تجربة مستخدم فريدة وجذابة
    لكن تذكر أننا يجب أن نعتمد على النظام
  57. لمساعدة الأندرويد في معالجة
    مثل هذه المشاهد بطريقة ذات فعالية.
  58. إذن عندما تقوم بإنشاء عرض مخصص،
    تأكد من فحص تراكب الرسوم،
  59. وأن تكن مستعدًا لإحياء صديقك
    وهو طريقةclipRect.
  60. حسنًا، عمل رائع!
  61. فلنعد إلى كولت ليخبرنا المزيد عن الأداء.