مقال - الصور المتحركة في الدوت نت Animation الجزء الثاني - نسخة قابلة للطباعة +- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb) +-- قسم : قسم لغة الفيجوال بيسك VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=182) +--- قسم : قسم مقالات VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=184) +--- الموضوع : مقال - الصور المتحركة في الدوت نت Animation الجزء الثاني (/showthread.php?tid=4887) |
مقال - الصور المتحركة في الدوت نت Animation الجزء الثاني - RaggiTech - 02-10-12 كاتب الموضوع : silverlight
الموضوع : الصور المتحركة في الدوت نت Animationاللغة المستخدمة: الفيجوال بيسك التطبيق: فيجوال استوديو 2008 الدوت نت : .Net Framework 3.5 مـقـدمـة: اليوم سنناقش نفس الموضوع ولكن برؤية تختلف قليلا عن ما هو موجود في الجزء الأول. أيضا سوف نناقش أفكارا إضافية يمكن استخدامها للتعامل مع الصور Image Processing ورسمها بالشكل الذي نريده علي أن تكون المحصلة النهائية هي بناء كونترول يمكن إستخدامه في برامجنا اعتقد أن الغالبية العظمي من مستخدمي الكمبيوتر وبشكل ما قد إستخدم أو تعامل مع برنامج PowerPoint وهذا البرنامج يسمح للمستخدم ببناء ملفات علي شكل Slides وأيضا داخل هذه Slides يستطيع المستخدم أن يقوم بتحريك الصور والكلمات من إتجاهات مختلفة بحيث يحصل في النهاية علي ملفات ذو طابع خاص وغالبا ما تستخدم هذه الملفات في الدعاية أو الإعلان عن أي شئ ولكن بشكل لطيف و هذا سيكون هدفنا من المقال وهو أن نتعلم كيفية بناء كونترول بسيط يمكن أن نستخدمه ليعمل بمثابة Slide ومن ثم نستخدم هذا الكونترول في برامجنا المختلفة وبالتالي نضيف لمسة جمالية إلي برامجنا وكل ذلك سيحدث باستخدام الدوت نت وتحديدا باستخدام +GDI كما يعلم الجميع أن فكرة الحركة Animation مبنية علي إستخدام Timer ومن ثم نستخدم هذا Timer في تحريك أي شئ نريده مثل سلسلة من الصور أو الكلمات أو أي شئ أخر وبالتالي نعطي الإيحاء بعملية الحركة وبناء Slides مثل الموجودة في برنامج Power Point تستخدم نفس التكنولوجيا أو نفس الأسلوب تقريبا فهي تعتمد علي Timer ومن ثم يتم رسم أي شئ مثل الصور أو Text أو أي شئ أخر باستخدام +GDI ما هو الدور الذي تقوم به +GDI ؟ ربما قد يتساءل البعض ما هو دور أو ماهية علاقة +GDI بموضوعنا هذا. في واقع الأمر تعتبر +GDI هي قلب الدوت نت وذلك من وجهة نظري الشخصية بل قد تكون هي قلب تكنولوجيا البرمجة بشكل عام فبدونها لربما لم يكن هناك ما نطلق عليه بالنوافذ Windows علي الإطلاق فهي المسئولة عن عمليات الرسم في الكمبيوتر وذلك إما علي سطح الكونترول أو علي سطح الفورم أو علي سطح جهاز الكمبيوتر نفسه وأرجو أن تسامحوني إن ذهبت في إعتقادي إلي أن من لم يتعلم كيفية إستخدام +GDI فهو لم يتعلم إلا القليل ولكي نجيب علي هذا السؤال الذي طرحناه سوف نعطي مجموعة من الأمثلة التي سوف توضح لنا الدور الذي تلعبه +GDI بشكل عام وهذه الأمثلة ستكون في صورة أسئلة مختلفة ومن ثم سنحاول الإجابة عليها لتوضيح المغزى من الدور الذي تلعبه +GDI وهذه الأسئلة أيضا سوف تمثل النواة لما سوف نفعله لاحقا عند بناء الكونترول الذي سوف نستخدمه في عرض الصور كما يحدث في برنامج Power Point أيضا معظم الأكواد التي سوف نكتبها يمكن لكم أن تعيدوا بناؤها علي شكل دوال Functions ومن ثم تستخدمونها في عمليات التعامل مع الصور السؤال الأول: هل من الممكن إعادة رسم صورة في أي شكل نريده؟ بالتأكيد نستطيع أن نرسم أي شئ في الشكل الذي نريد والمسئول عن كيفية تنفيذ ذلك هو GraphicsPath Class والمثال التالي يوضح ذلك لنفترض أنه لدينا صورة ما Image ونريد أن نرسمها بحيث تظهر في شكل دائري أو علي شكل متوازي أضلاع أو خلافه فكيف نفعل ذلك باستخدام GraphicsPath Class . الكود التالي يوضح ذلك كود : Public Class Form1 كود : Private Sub DrawCircularShape(ByVal g As Graphics) ثم تم إضافة هذا المستطيل Rectangle الي المسار GraphicsPath ولكن علي شكل Ellipse ثم تم رسم أو ملأ هذا المسار GraphicsPath باللون الأحمر ثم استخدمنا SetClip لتحديد المنطقة التي تحدث بها عملية الرسم ومن ثم قمنا برسم الصورة Image داخل المستطيل Rectangle أرجو أن تلاحظوا الدور الذي تلعبه كل من SetClip وأيضا CombineMode.Replace فهما تحددان أن عملية الرسم ستتم فقط داخل المسار المحدد وأيضا سيتم استبدال هذا المسار بشئ أخر كود : Private Sub DrawAnyShapePath(ByVal g As Graphics) ثم تم رسم مجموعة من الخطوط داخل هذا المسار GraphicsPath ثم تم رسم أو ملأ هذا المسار GraphicsPath باللون الأحمر ثم استخدمنا SetClip لتحديد المنطقة التي تحدث بها عملية الرسم ومن ثم قمنا برسم الصورة Image داخل المستطيل Rectangle أرجو أن تلاحظوا وللمرة الثانية الدور الذي تلعبه كل من SetClip وأيضا CombineMode.Replace حاول عزيزي القارئ أن تقوم بالتغيير في قيمة CombineMode لكي تكتشف أهميتها بنفسك كود : Private Sub Form1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint السؤال الثاني: هل من الممكن رسم أي مسار GraphicsPath نريده؟ بالتأكيد نستطيع أن نرسم أي شكل نريده باستخدام GraphicsPath ولنفرض علي سبيل المثال أننا نريد أن نرسم مسار علي شكل حلزوني Spiral كل مع علينا فعله هو أن نحدد شكل المسار ثم نقوم بعملية الرسم وغالبا هذا الأمر يحتاج فقط لمعرفة جيدة بالعمليات الرياضية Mathematics و المثال التالي يوضح كيفية رسم الشكل الحلزوني كود : Public Class Form1 السؤال الثالث: هل من الممكن رسم أي تكست Text علي شكل مسار GraphicsPath ؟ بالتأكيد نستطيع أن نرسم أي تكست Text نريده باستخدام GraphicsPath ولنفرض علي سبيل المثال أننا نريد أن نرسم تكست ثم نريد أن نملأ هذا التكست بصورة ما. المثال التالي يوضح كيفية عمل ذلك كود : [align=left]Public Class Form1 أعتقد أن الأمثلة التالية كافية حتى الأن لتوضيح الدور الذي تلعبه +GDI بشكل عام فهدفنا من المقال ليس مناقشة +GDI علي نطاق واسع وخصوصا أنني أفترض أن قارئ المقال لدية خلفية مناسبة في التعامل مع أوامر الرسم المختلفة وعموما يجب علينا أن ندرس ونتفهم كل ما يختص بعمليات الرسم في الدوت نت وحينها سوف نستطيع أن نبني ونرسم الكثير من الأشياء الرائعة الأن وبعد أن أعطينا بعضا من الأفكار السريعة للتعامل مع GraphicsPath لنبدأ في بناء الكونترول الذي سوف نستخدمه في عرض الصور علي شكل Slides كما يحدث في برنامج Power Point يتبع في المشاركة التالية مقال - الصور المتحركة في الدوت نت Animation الجزء الثاني - RaggiTech - 02-10-12 الكونترول Slider غالبا يسمح برنامج Power Point لمستخدميه بإضافة بعض الصور ومن ثم يتيح للمستخدم تحريك هذه الصور علي شكل Slides و أيضا يتيح للمستخدم إمكانية تحديد الإتجاه الذي سوف تظهر منه الصورة فعلي سبيل المثال الصورة يمكن أن تظهر من اليسار الي اليمين أو من أسفل إلي اعلي أو من الممكن أن تتحرك الصورة بشكل قطري من أسفل الي اعلي والعكس لذلك في الكونترول الذي نقوم ببنائه سوف نقوم بإضافة كلاس الي المشروع وداخل هذا الكلاس سوف نقوم بتعريف Enum ولنطلق عليه SlideEffects والكود التالي يوضح شكل هذا Enum الذي سوف نستخدمه لاحقا داخل الكونترول لكي نحدد الاتجاهات التي سوف تتحرك فيها الصورة كود : Public Enum SlideEffects تم إضافة ثلاثة Property رئيسية للتحكم في الكونترول بالإضافة الي بعض الصفات الأخري لكن الصفات التي يهمنا التحدث عنها هي: § SlidingEffect والهدف منها هو تحديد إتجاه الصورة كود : <System.ComponentModel.DefaultValue(GetType(SlideEffects), "LeftToRight")> _ كود : <System.ComponentModel.DefaultValue(GetType(Bitmap), "")> _ كود : <System.ComponentModel.DefaultValue(GetType(Single), "2")> _ التحكم في الصورة المتحركة تم إضافة Public Sub للتحكم في حركة الصورة وهو يسمي AnimateSlide حيث هو المسؤل عن تحريك الصورة والكود الخاص به كالتالي كود : Public Sub AnimateSlide() تم إضافة Protected Sub حيث فيه تتم عملية الرسم والفكرة هنا مبنية علي إستخدام الكلاس Matrix ومن ثم نقوم بعمل Transform للرسم باستخدام هذه Matrix ومن ثم نرسم الصورة طبقا للحالة الخاصة بها أو طبقا لاتجاهها في Enum والكود تكراري تقريبا ولكن يختلف طبقا للاتجاه الموجود في SlideEffects Enum والكود التالي يوضح جزء من هذا الإجراء كود : Protected Sub DrawSlidingEffect(ByVal g As Graphics, ByVal control As ImageSlider) كيف تستخدم الكونترول بالتأكيد إستخدام الكونترول أمر متروك للقارئ ولكن علي سبيل المثال يمكن إضافة الكونترول الي أي فورم وأيضا نضيف باتون وتحت الحدث Click الخاص بهذا الباتون يمكن كتابة الكود التالي كود : Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click وبالمرفقات ستجدون نسخة كاملة من الكلاس وطريقة استخدامه و الملف المرفق بنسخة الفيجوال استوديو 2008 وإن شاء رب العزة سوف نكمل إضافة باقي المؤثرات الأخري في مقال لاحق مع تحياتي للجميع أخوكم عمر |