الصور المتحركة في الدوت نت 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=4888) |
الصور المتحركة في الدوت نت Animation الجزء الثالث - RaggiTech - 02-10-12 كاتب الموضوع : silverlight
الموضوع : الصور المتحركة في الدوت نت Animationاللغة المستخدمة: الفيجوال بيسك التطبيق: فيجوال استوديو 2008 الدوت نت : .Net Framework 3.5 مـقـدمـة: اليوم سنحاول أن نضيف بعض المؤثرات الإضافية وهي مصنفة كالتالي
§ Spin effect
§ Rotation effect § Maximize effect § Rectangular effect § Circular effect § Elliptical effect لكن قبل أن نضيف هذه المؤثرات الي الكونترول الذي قمنا ببنائه في المقال السابق هناك شئ واحد أريد مناقشته معكم وهو ما الهدف من الكلاس Matrix Class في الدوت نت وما هو الدور الهام الذي يلعبه هذا الكلاس في +GDI تحديدا أو في عمليات الرسم بشكل عام الكلاس Matrix Class لو نظرنا الي ما كتبت مايكروسوفت في تعريف هذا الكلاس سواء في MSDN أو ملفات المساعدة الموجودة مع الفيجوال استوديو سنجد أن مايكروسوفت لم تعطي التوضيح الكافي لهذا الكلاس بحيث يسهل علينا فهم هذا الكلاس وماهية الهدف منه بوضوح ولكي نفهم هذا الكلاس سأعطي مثالا عن كيفية استخدامه في عمليات الرسم لنفرض أننا نريد رسم مستطيل وبالطبع هذا شئ يعلم الجميع كيف يكتب الكود الخاص به نحن غالبا ما نقوم بتعريف هذا المستطيل ومن ثم نقوم برسمه داخل الحدث Paint Event لكي يظهر علي سطح الفورم أوعلي سطح الكونترول كما هو واضح في الكود التالي كود : Dim rect As New Rectangle(10, 10, 100, 100) كود : Dim x As Single = -2.0F الأن ماذا نفعل لكي نجعل هذا المستطيل يظهر بالشكل الطبيعي الذي نريده في الواقع هنا يأتي دور الكلاس Matrix حيث يمكننا استخدامه في الأتي إما تكبير أبعاد هذا المستطيل أو نقل محاور رسم المستطيل الي أي نقطة أخري علي الفورم أو عمل Rotation لهذا المستطيل في إتجاه المحور الرأسي أو في إتجاه المحور الأفقي أو في إتجاه المحوران معا أو يمكننا أن نستخدم الحالات الثلاثة معا أو بعض منها والكود التالي يوضح ذلك كود : Dim x As Single = -2.0F كيفية تعريف الكلاس Matrix أولا لنلقي نظرة سريعة علي كيفية تعريف متغير يعبر عن الكلاس Matrix Class . طبقا لمايكروسوفت فإنه يمكن تعريف متغير يعبر عن هذا الكلاس بأي من الطرق التالية أو بمعني أدق Constructor الخاص بهذا الكلاس له أربعة أشكال وهي كالتالي كود : Dim mx As New Drawing2D.Matrix() المثال الأول: استخدام الكلاس Matrix في تغيير مقياس الرسم أو ما يطلق عليه Scale لنفرض أننا نريد رسم مستطيل وأيضا نريد رسم هذا المستطيل بمقياس رسم أكبر وليكن مقياس الرسم هذا يعادل خمسة مرات الأبعاد الأصلية للمستطيل ومن ثم بعد ذلك نريد أن نرسم نفس المستطيل بأبعاده الفعلية بالتأكيد هنا يأتي دور الكلاس Matrix والخطوات التالية توضح ذلك أولا نقوم بتعريف متغير يعبر عن المستطيل كود : Dim rect As New Rectangle(0, 0, 30, 30) كود : Dim mx As New Drawing2D.Matrix() كود : mx.Scale(5, 5) كود : e.Graphics.Transform = mx كود : e.Graphics.FillRectangle(Brushes.Blue, rect) كود : e.Graphics.ResetTransform() كود : e.Graphics.FillRectangle(Brushes.Red, rect) المثال الثاني : استخدام الكلاس Matrix في تغيير مكان نقطة الصفر للرسم أو ما يطلق عليه Translate لنفرض وكما بالمثال الأول أننا نريد رسم مستطيل ومن ثم بعد ذلك نريد أن نرسم نفس المستطيل بأبعاده الفعلية ولكن في مكان أخر مختلف و للمرة الثانية هنا يأتي دور الكلاس Matrix والخطوات التالية توضح ذلك وكما فعلنا بالمثال السابق نقوم بتعريف متغير يعبر عن المستطيل ثم نقوم بتعريف متغير يعبر عن الكلاس Matrix كود : Dim rect As New Rectangle(0, 0, 30, 30) كود : mx.Translate(10, 10) كود : e.Graphics.Transform = mx لنفرض أننا نريد صورة مائلة داخل مستطيل ولكن بزوايا ميل مختلفة وللمرة الثالثة هنا يأتي دور الكلاس Matrix والخطوات التالية توضح ذلك وكما فعلنا بالأمثلة السابقة نقوم بتعريف متغير يعبر عن المستطيل ثم نقوم بتعريف متغير يعبر عن الكلاس Matrix كود : mx.Shear(5, 5) كود : e.Graphics.Transform = mx كود : mx.Rotate(45, Drawing2D.MatrixOrder.Prepend) لنفرض أننا نريد رسم صورة ما داخل مستطيل بحيث تكون مائلة بزاوية 45 درجه ما وللمرة الرابعة هنا يأتي دور الكلاس Matrix والخطوات التالية توضح ذلك وكما فعلنا بالأمثلة السابقة نقوم بتعريف متغير يعبر عن المستطيل ثم نقوم بتعريف متغير يعبر عن الكلاس Matrix كود : Dim mx As New Drawing2D.Matrix(m11, m12, m21, m22, dx, dy) كود : الشكل الأصلي لتعريف الكلاس كود : ' Matrix (scale --> X, rotate --> Y, rotate --> X, scale --> Y, transfer --> X, transfer --> Y) بالطبع نستطيع أن نقوم بتطبيق كل الأفكار التي طرحناها في الأمثلة السابقة في خطوات أقل وهذا يعود بنا مرة ثانية إلي كيفية تعريف متغير يعبر عن الكلاس Matrix كما لاحظتم في كيفية تعريف متغير يشير الي الكلاس Matrix أن هناك أربعةConstructor لتعريف هذا الكلاس وما يهمني تحديدا مناقشته هو التعريف الرابع للكلاس وهو الجزء المبهم في الأمر حيث هنا مايكروسوفت في توضيحها لذلك الأمر تتحدث عن صفوف وأعمدة ولربما تكون هذه المسميات واضحة لمن درسوا علم المصفوفات والمحددات وأنواعها في الرياضيات فهم يعلمون ماذا تعني جيدا كلمات مثل كلمة المصفوفات أو كلمة المحددات ويعلمون أيضا كيفية تطبيق العمليات الحسابية مثل الضرب والقسمة والطرح والجمع علي المصفوفات أو علي المحددات وبالتالي فهم ليسوا في حاجة الي شرح أكثر لهدف مايكروسوفت من الأمر عموما وبدون الدخول في متاهة مناقشة علم الرياضيات وتحديدا علم المصفوفات والمحددات سأحاول أن أوضح الفكرة فقط من الأمر الشكل التالي يوضح تعريف مايكروسوفت للكلاس Matrix Dim mx As New Drawing2D.Matrix(m11, m12, m21, m22, dx, dy) وقد يتساءل البعض ما هي المتغيرات m11 و m12 و m21 و m22 و dx و dy وعن ماذا تعبر تحديدا هذه المتغيرات ولكي أجعل الأمر أقل صعوبة سأعيد كتابة هذا Constructor الشكل الأصلي لتعريف الكلاس' Dim mx As New Drawing2D.Matrix (m11 , m12, m21, m22, Dx, Dy) الشكل الجديد لتعريف الكلاس ' Dim mx As New Drawing2D.Matrix (Sx, Ry, Rx, Sy, Dx, Dy) Sx : تعبر عن مقياس رسم في إتجاه المحور الأفقي وهو هنا المحور x Sy : تعبر عن مقياس رسم في إتجاه المحور الراسي وهو هنا المحور y Rx : تعبر عن زاوية الدوران حول المحور x Ry : تعبر عن زاوية دوران في إتجاه المحور y Dx : تعبر عن معدل الإزاحة أو التغير في مكان نقطة الرسم علي المحور الأفقي Dy : تعبر عن معدل الإزاحة في مكان نقطة الرسم علي المحور الرأسي أي أن الشكل النهائي لتعريف الكلاس سيكون بالشكل التالي ' Matrix (scale --> X, rotate --> Y, rotate --> X, scale --> Y, transfer --> X, transfer --> Y) الأن وبعد أن أعطينا بعضا من الأفكار السريعة عن مفهوم Matrix Class وكيفية التعامل معه لنبدأ في إضافة بعض المؤثرات الإضافية الي الكونترول يتبع في المشاركة التالية ................................. الصور المتحركة في الدوت نت Animation الجزء الثالث - RaggiTech - 02-10-12 كاتب المشاركة : silverlight
تابع..........................عودة إلي الكونترول ImageSlider مرة ثانية في الجزء السابق من المقال ناقشنا كيفية إمكانية تحديد الإتجاه الذي سوف تظهر منه الصورة فعلي سبيل المثال الصورة يمكن أن تظهر من اليسار الي اليمين أو من أسفل إلي اعلي أو من الممكن أن تتحرك الصورة بشكل قطري من أسفل الي اعلي والعكس الأن سنضيف المؤثرات التالية
§ Spin effect
Spin تعني أن الصورة ستبدأ في الظهور بمقاس صغير ثم تأخذ في الدوران حول نفسها ثم يتم رسم الصورة§ Rotation effect § Maximize effect § Rectangular effect § Circular effect § Elliptical effect ٍRotation تعني أن الصورة تأخذ في الدوران ثم يتم رسم الصورة ٍMaximize تعني أن الصورة ستبدأ في الظهور بمقاس صغير ثم تبدأ في الظهور بشكل أكبر قليلا ثم يتم رسمها كاملة Rectangular تعني أن الصورة تظهر كأنها مغطاة بمستطيل ثم تبدأ أبعاد هذا المستطيل في الزيادة حتى تظهر الصور كاملة Circular هو نفس التأثير السابق ولكن علي شكل دائري Elliptical هو نفس التأثير السابق ولكن علي شكل بيضاوي لذلك في الكونترول الذي سوف نقوم ببنائه سوف نقوم بالتعديل علي الكلاس SlideEffects ومن ثم نضيف المؤثرات الجديدة الي Enum وبما أن هذا الكلاس لم يعد يعبر عن Slides فقط لذلك قمت بتغيير اسمه إلي ImageEffects والكود التالي يوضح شكل الكلاس بعد إضافة المؤثرات الجديدة كود : Public Enum ImageEffects رسم المؤثرات الفكرة العامة المستخدمة في رسم جميع المؤثرات تعتمد علي استخدام Timer وأيضا تعتمد علي الكلاس Matrix Class الذي ناقشناه في بداية هذا المقال وأيضا تعتمد علي الكلاس GraphicsPath Class الذي تم مناقشته في الجزء السابق من المقال Maximize effect كود : Case ImageEffects.Maximize Rotate effect كود : Case ImageEffects.Rotate كود : Case ImageEffects.Spin كود : Case ImageEffects.Rectangular كود : Case ImageEffects.Circular كود : Case ImageEffects.Elliptical وإن شاء الله سوف نكمل إضافة مجموعة من المؤثرات الأخري في مقال لاحق بإذن الله مع تحياتي للجميع أخوكم عمر |