02-10-12, 06:49 PM
كاتب الموضوع : silverlight
الموضوع : الصور المتحركة في الدوت نت Animationاللغة المستخدمة: الفيجوال بيسك
التطبيق: فيجوال استوديو 2008
الدوت نت : .Net Framework 3.5
مـقـدمـة:
اليوم سنحاول أن نضيف بعض المؤثرات الإضافية وهي مصنفة كالتالي
§ Spin effect
§ Rotation effect
§ Maximize effect
§ Rectangular effect
§ Circular effect
§ Elliptical 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)
e.Graphics.FillRectangle(Brushes.Red, rect)
كود :
Dim x As Single = -2.0F
Dim y As Single = -2.0F
Dim m_width As Single = 4.0F
Dim m_height As Single = 4.0F
Dim rect As New Rectangle(x, y, m_width, m_height)
e.Graphics.FillRectangle(Brushes.Red, rect)
الأن ماذا نفعل لكي نجعل هذا المستطيل يظهر بالشكل الطبيعي الذي نريده
في الواقع هنا يأتي دور الكلاس Matrix حيث يمكننا استخدامه في الأتي
إما تكبير أبعاد هذا المستطيل
أو نقل محاور رسم المستطيل الي أي نقطة أخري علي الفورم
أو عمل Rotation لهذا المستطيل في إتجاه المحور الرأسي أو في إتجاه المحور الأفقي أو في إتجاه المحوران معا
أو يمكننا أن نستخدم الحالات الثلاثة معا أو بعض منها والكود التالي يوضح ذلك
كود :
Dim x As Single = -2.0F
Dim y As Single = -2.0F
Dim m_width As Single = 4.0F
Dim m_height As Single = 4.0F
Dim rect As New Rectangle(x, y, m_width, m_height)
Dim myMatrix As Drawing2D.Matrix = New Drawing2D.Matrix(Me.Width, 0, 0, 10, 10, 4)
myMatrix.Scale(1, 1)
e.Graphics.Transform = myMatrix
Using lgb As New Drawing2D.LinearGradientBrush(rect, Color.Cyan, Color.DodgerBlue, 90, True)
e.Graphics.FillRectangle(lgb, rect)
End Using
كيفية تعريف الكلاس Matrix
أولا لنلقي نظرة سريعة علي كيفية تعريف متغير يعبر عن الكلاس Matrix Class . طبقا لمايكروسوفت فإنه يمكن تعريف متغير يعبر عن هذا الكلاس بأي من الطرق التالية أو بمعني أدق Constructor الخاص بهذا الكلاس له أربعة أشكال وهي كالتالي
كود :
Dim mx As New Drawing2D.Matrix()
Dim mx As New Drawing2D.Matrix(New Rectangle(), New Point())
Dim mx As New Drawing2D.Matrix(New RectangleF(), New PointF())
Dim mx As New Drawing2D.Matrix(m11, m12, m21, m22, dx, dy)
المثال الأول: استخدام الكلاس 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)
Dim mx As New Drawing2D.Matrix()
كود :
mx.Translate(10, 10)
كود :
e.Graphics.Transform = mx
e.Graphics.FillRectangle(Brushes.Blue, rect)
e.Graphics.ResetTransform()
e.Graphics.FillRectangle(Brushes.Red, rect)
لنفرض أننا نريد صورة مائلة داخل مستطيل ولكن بزوايا ميل مختلفة وللمرة الثالثة هنا يأتي دور الكلاس Matrix والخطوات التالية توضح ذلك
وكما فعلنا بالأمثلة السابقة نقوم بتعريف متغير يعبر عن المستطيل ثم نقوم بتعريف متغير يعبر عن الكلاس Matrix
كود :
mx.Shear(5, 5)
كود :
e.Graphics.Transform = mx
Dim bmp As New Bitmap(My.Resources.baby_5)
e.Graphics.SetClip(rect)
e.Graphics.DrawImage(bmp, rect, 0, 0, bmp.Width, bmp.Height, GraphicsUnit.Pixel)
e.Graphics.ResetTransform()
كود :
mx.Rotate(45, Drawing2D.MatrixOrder.Prepend)
لنفرض أننا نريد رسم صورة ما داخل مستطيل بحيث تكون مائلة بزاوية 45 درجه ما وللمرة الرابعة هنا يأتي دور الكلاس Matrix والخطوات التالية توضح ذلك
وكما فعلنا بالأمثلة السابقة نقوم بتعريف متغير يعبر عن المستطيل ثم نقوم بتعريف متغير يعبر عن الكلاس Matrix
كود :
Dim mx As New Drawing2D.Matrix(m11, m12, m21, m22, dx, dy)
كود :
الشكل الأصلي لتعريف الكلاس
' Dim mx As New Drawing2D.Matrix (m11 , m12, m21, m22, Dx, Dy)
الشكل الجديد لتعريف الكلاس
' Dim mx As New Drawing2D.Matrix (Sx, Ry, Rx, Sy, 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 وكيفية التعامل معه لنبدأ في إضافة بعض المؤثرات الإضافية الي الكونترول
يتبع في المشاركة التالية .................................