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

1. Title:
   02-12 Fixing_Overdraw_with_Canvas_API
2. Description:

   02-12 Fixing_Overdraw_with_Canvas_API

3. 486 0:00 - 0:03
   حسنًا، لقد عدنا مجددًا إلى برنامج
   Android Studio،
4. 3001 0:03 - 0:06
   لمراجعة مصدر DroidCardsView.
5. 5606 0:06 - 0:08
   مجددًا، هذا هو العرض المخصص.
6. 7962 0:08 - 0:12
   فقط لنتذكر، أنه في هذا العرض المخصص
   قمنا بإنشاء أوراق اللعب المتراكبة.
7. 11870 0:12 - 0:14
   على سبيل المثال،
   كل بطاقة لها صورتها النقطية الخاصة بها،
8. 14480 0:14 - 0:18
   ونحن نرسمهم على الشاشة
   عن طريق التحكم في أسلوب onDraw.
9. 19280 0:19 - 0:22
   وتذكر، أنه بالتحكم في أسلوب onDraw،
10. 22320 0:22 - 0:26
    فلن يتمكن الأندرويد من تحسين
    معالجة المشهد،
11. 25580 0:26 - 0:29
    إنها مهمتنا نحن المطورون لاقتصاص
    كل بطاقة بطريقة صحيحة
12. 28720 0:29 - 0:31
    كما ستظهر على الشاشة
    وذلك لتجنب تراكب الرسوم غير الضروري.
13. 32470 0:32 - 0:36
    ولحسن الحظ، فأداة Canvas API
    تعطينا الطرق الصحيحة التي نحتاجها
14. 36010 0:36 - 0:38
    لرسم بطاقاتنا بطريقة أكثر فعالية.
15. 38010 0:38 - 0:39
    فلنلقِ نظرة على التوثيق.
16. 40520 0:41 - 0:44
    ولنستخدم طريقةcanvas.clipRect
    لتحسين الكود خاصتنا.
17. 45010 0:45 - 0:49
    سوف نستخدم هذا المتغير هنا والذي يحتوي
    على أربعة متغيرات مثل البارامترات.
18. 49272 0:49 - 0:51
    حسنًا، لقد عدنا الآن إلى
    Android Studio
19. 51325 0:51 - 0:55
    فلنقم بتعديل كيفية رسم كل بطاقة مدرجة
20. 55874 0:56 - 0:59
    وسوف أستخدم تلك الخاصية الرائعة الموجودة
    في Android Studio لإحضار مشهد مختلف
21. 59083 0:59 - 1:02
    إلى المقدمة، حتى تتمكن من رؤية
    حالة الكود قبل وبعد التعديل.
22. 62212 1:02 - 1:05
    حسنًا، نحن هنا في مشهد المقارنة،
23. 65510 1:06 - 1:08
    ولنلق نظرة خاصة على أسلوب onDraw
    وهو الأسلوب الذي نتجاوزه.
24. 68880 1:09 - 1:11
    لدينا الحالة القديمة لحلقة for التكرارية
    على اليسار،
25. 71009 1:11 - 1:15
    لكن فلنركز على التحسينات
    التي سنقوم بها هنا على اليمين.
26. 75110 1:15 - 1:18
    الآن، وبينما نكرر البطاقات،
    فلنراجع كل خطوة من التحسينات.
27. 79100 1:19 - 1:23
    رقم واحد أولًا سنقوم بحساب موضع البطاقة.
28. 83850 1:24 - 1:27
    ثم سنقوم بتشغيل تلك الخاصية
    canvas.save
29. 86736 1:27 - 1:29
    التي ستحفظ حالة لوحة الرسم الحالية.
30. 89491 1:29 - 1:31
    وبمعنى آخر،
31. 90549 1:31 - 1:35
    فهي تحافظ على الوضع الحالي
    للشاشة قبل تطبيق أداة clipRect API.
32. 95691 1:36 - 1:37
    الآن، عندما نقوم بتشغيل طريقة clipRect،
33. 97485 1:37 - 1:40
    فإننا بذلك نقوم بعمل بعض الحدود الهندسية.
34. 100664 1:41 - 1:44
    وعندما نمرر هذه المتغيرات،
    فنحن بذلك نخبر النظام
35. 103580 1:44 - 1:46
    بأن يرسم فقط جزء البطاقة
    الذي نريد أن يكون مرئيًا.
36. 107000 1:47 - 1:48
    وبالطبع، بقية الأجزاء ستكون مخفية.
37. 109470 1:49 - 1:53
    الآن، أجزاء البطاقة الموجودة
    ضمن الحدود التي وضعناها فقط
38. 112950 1:53 - 1:55
    هي الأجزاء التي سيتم رسمها فقط.
39. 114660 1:55 - 1:57
    وأخيرًا، سنقوم بتشغيل canvas.restore،
40. 117012 1:57 - 2:00
    والتي ستحول لوحة الرسم
    إلى وضعية عدم الاقتصاص.
41. 119890 2:00 - 2:01
    وبمعنى آخر،
42. 120999 2:01 - 2:04
    سوف تقوم بإلغاء الحدود
    التي وضعناها عندما قمنا بتشغيل clipRect.
43. 124244 2:04 - 2:08
    ثم نقوم بإعادة تلك الحلقة التكرارية
    لجميع البطاقات ما عدا الموجودة بالأعلى.
44. 128788 2:09 - 2:11
    الآن وبشكل خاص سنقوم بمعالجة
45. 131000 2:11 - 2:13
    البطاقة الأخيرة بشكل مختلف
    عن نظيراتها الموجودة بالأسفل.
46. 133448 2:13 - 2:16
    وبالنسبة لهذه البطاقة،
    فلن نحتاج إلى الاقتصاص،
47. 136008 2:16 - 2:19
    لذا سنقوم برسمها كاملة.
48. 138650 2:19 - 2:21
    ويمكنك أن ترى ذلك من خلال
    هذه الجملة الموجودة هنا.
49. 141980 2:22 - 2:24
    حسنًا، فلنقم بإنشاء الكود المحسن،
50. 143800 2:24 - 2:26
    لنرَ إن كنا قد قمنا بتقليل
    كمية من تراكب الرسوم.
51. 147660 2:28 - 2:29
    حسنًا، رائع!
52. 148820 2:29 - 2:31
    كما ترى هنا، يوجد القليل من تراكب الرسوم.
53. 152130 2:32 - 2:35
    آمل أن يكون مفهومًا أنه باستخدام
    Canvas API يكون لدينا طريقة مباشرة
54. 155250 2:35 - 2:38
    للرسم بطريقة فعالة عند العمل
    على عروض مخصصة.
55. 158350 2:38 - 2:41
    وفي حالة ما إذا رغبت باستكشاف
    Canvas API أكثر،
56. 161056 2:41 - 2:44
    فتأكد من مراجعة كامل التوثيق
    الموجود في ملاحظات المدرب.
57. 165170 2:45 - 2:48
    الآن، مشاهد مثل هذه تعتبر رائعة
    لمساعدتنا على خلق
58. 168460 2:48 - 2:52
    تجربة مستخدم فريدة وجذابة
    لكن تذكر أننا يجب أن نعتمد على النظام
59. 172480 2:52 - 2:55
    لمساعدة الأندرويد في معالجة
    مثل هذه المشاهد بطريقة ذات فعالية.
60. 176110 2:56 - 3:00
    إذن عندما تقوم بإنشاء عرض مخصص،
    تأكد من فحص تراكب الرسوم،
61. 179800 3:00 - 3:02
    وأن تكن مستعدًا لإحياء صديقك
    وهو طريقةclipRect.
62. 181972 3:02 - 3:04
    حسنًا، عمل رائع!
63. 184290 3:04 - 3:06
    فلنعد إلى كولت ليخبرنا المزيد عن الأداء.