[RaggiTech]

كاتب الموضوع : 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)
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 Class هنا

كيفية تعريف الكلاس 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 وأهميته

المثال الأول: استخدام الكلاس Matrix في تغيير مقياس الرسم أو ما يطلق عليه Scale

لنفرض أننا نريد رسم مستطيل وأيضا نريد رسم هذا المستطيل بمقياس رسم أكبر وليكن مقياس الرسم هذا يعادل خمسة مرات الأبعاد الأصلية للمستطيل ومن ثم بعد ذلك نريد أن نرسم نفس المستطيل بأبعاده الفعلية بالتأكيد هنا يأتي دور الكلاس Matrix والخطوات التالية توضح ذلك

أولا نقوم بتعريف متغير يعبر عن المستطيل

كود :

Dim rect As New Rectangle(0, 0, 30, 30)

ثانيا نقوم بتعريف متغير يعبر عن الكلاس Matrix

كود :

Dim mx As New Drawing2D.Matrix()

ثالثا نقوم بضبط مقياس الرسم من خلال المتغير الذي يعبر عن الكلاس Matrix

كود :

mx.Scale(5, 5)

رابعا نمرر المتغير الذي يعبر عن الكلاس Matrix الي Graphics

كود :

e.Graphics.Transform = mx

خامسا نقوم برسم المستطيل

كود :

e.Graphics.FillRectangle(Brushes.Blue, rect)

سادسا نقوم بإلغاء ربط المتغير الذي يعبر عن الكلاس Matrix مع Graphics باستخدام الأمر ResetTransform

كود :

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()

ثم نقوم بنقل المحاور من خلال المتغير الذي يعبر عن الكلاس 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 في تغيير الشكل أو ما يطلق عليه Shear

لنفرض أننا نريد صورة مائلة داخل مستطيل ولكن بزوايا ميل مختلفة وللمرة الثالثة هنا يأتي دور الكلاس Matrix والخطوات التالية توضح ذلك

وكما فعلنا بالأمثلة السابقة نقوم بتعريف متغير يعبر عن المستطيل ثم نقوم بتعريف متغير يعبر عن الكلاس Matrix

كود :

mx.Shear(5, 5)

ثم نقوم بتحديد قيمة Shear من خلال المتغير الذي يعبر عن الكلاس Matrix

كود :

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()

ثم نمرر المتغير الذي يعبر عن الكلاس Matrix الي Graphics ثم نقوم بتعريف متغير ما يشير إلي الصورة ثم نستخدم SetClip لتحديد أن الصورة يجب رسمها داخل حدود المستطيل فقط ثم نقوم برسم الصورة داخل المستطيل بعد تطبيق قيمة Shear ثم نقوم بإلغاء ربط المتغير الذي يعبر عن الكلاس Matrix مع Graphics باستخدام الأمر ResetTransform

كود :

mx.Rotate(45, Drawing2D.MatrixOrder.Prepend)

المثال الرابع : استخدام الكلاس Matrix في الدوران للأشكال أو ما يطلق عليه Rotate

لنفرض أننا نريد رسم صورة ما داخل مستطيل بحيث تكون مائلة بزاوية 45 درجه ما وللمرة الرابعة هنا يأتي دور الكلاس Matrix والخطوات التالية توضح ذلك

وكما فعلنا بالأمثلة السابقة نقوم بتعريف متغير يعبر عن المستطيل ثم نقوم بتعريف متغير يعبر عن الكلاس Matrix

كود :

Dim mx As New Drawing2D.Matrix(m11, m12, m21, m22, dx, dy)

ثم نقوم بتحديد قيمة زاوية الدوران من خلال المتغير الذي يعبر عن الكلاس Matrix

كود :

الشكل الأصلي لتعريف الكلاس
' 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

كما لاحظتم في كيفية تعريف متغير يشير الي الكلاس 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 وكيفية التعامل معه لنبدأ في إضافة بعض المؤثرات الإضافية الي الكونترول


يتبع في المشاركة التالية .................................

[RaggiTech]

كاتب المشاركة : silverlight

تابع..........................


عودة إلي الكونترول ImageSlider مرة ثانية

في الجزء السابق من المقال ناقشنا كيفية إمكانية تحديد الإتجاه الذي سوف تظهر منه الصورة فعلي سبيل المثال الصورة يمكن أن تظهر من اليسار الي اليمين أو من أسفل إلي اعلي أو من الممكن أن تتحرك الصورة بشكل قطري من أسفل الي اعلي والعكس

الأن سنضيف المؤثرات التالية

§ Spin effect
§ Rotation effect
§ Maximize effect
§ Rectangular effect
§ Circular effect
§ Elliptical effect

Spin تعني أن الصورة ستبدأ في الظهور بمقاس صغير ثم تأخذ في الدوران حول نفسها ثم يتم رسم الصورة
ٍRotation تعني أن الصورة تأخذ في الدوران ثم يتم رسم الصورة
ٍMaximize تعني أن الصورة ستبدأ في الظهور بمقاس صغير ثم تبدأ في الظهور بشكل أكبر قليلا ثم يتم رسمها كاملة
Rectangular تعني أن الصورة تظهر كأنها مغطاة بمستطيل ثم تبدأ أبعاد هذا المستطيل في الزيادة حتى تظهر الصور كاملة
Circular هو نفس التأثير السابق ولكن علي شكل دائري
Elliptical هو نفس التأثير السابق ولكن علي شكل بيضاوي

لذلك في الكونترول الذي سوف نقوم ببنائه سوف نقوم بالتعديل علي الكلاس SlideEffects ومن ثم نضيف المؤثرات الجديدة الي Enum وبما أن هذا الكلاس لم يعد يعبر عن Slides فقط لذلك قمت بتغيير اسمه إلي ImageEffects والكود التالي يوضح شكل الكلاس بعد إضافة المؤثرات الجديدة

كود :

Public Enum ImageEffects

' sliding effects
LeftToRight
RighTotLeft
TopToDown
DownToTop
TopLeftToBottomRight
BottomRightToTopLeft
BottomLeftToTopRight
TopRightToBottomLeft

' rotating effects
Maximize
Rotate
Spin

' shape effects
Circular
Elliptical
Rectangular

End Enum

رسم المؤثرات

الفكرة العامة المستخدمة في رسم جميع المؤثرات تعتمد علي استخدام Timer وأيضا تعتمد علي الكلاس Matrix Class الذي ناقشناه في بداية هذا المقال وأيضا تعتمد علي الكلاس GraphicsPath Class الذي تم مناقشته في الجزء السابق من المقال

Maximize effect

كود :

Case ImageEffects.Maximize

Dim m_scale As Single = m_percent / 100
Dim cX As Single = control.Width / 2
Dim cY As Single = control.Height / 2

If m_scale = 0 Then
m_scale = 0.0001F
End If
Dim mx As New Drawing2D.Matrix(m_scale, 0, 0, m_scale, cX, cY)
g.Transform = mx
g.DrawImage(m_slidingBmp, New Rectangle(-control.Width / 2, -control.Height / 2, control.Width, control.Height), 0, 0, m_slidingBmp.Width, m_slidingBmp.Height, GraphicsUnit.Pixel)

Exit Select
'-----------> rest of the code

Rotate effect

كود :

Case ImageEffects.Rotate

Dim m_rotation As Single = 360 * m_percent / 100
Dim cX As Single = control.Width / 2
Dim cY As Single = control.Height / 2
Dim mx As New Drawing2D.Matrix(1, 0, 0, 1, cX, cY)
mx.Rotate(m_rotation, Drawing2D.MatrixOrder.Append)
g.Transform = mx
g.DrawImage(m_slidingBmp, New Rectangle(-control.Width / 2, -control.Height / 2, control.Width, control.Height), 0, 0, m_slidingBmp.Width, m_slidingBmp.Height, GraphicsUnit.Pixel)
Exit Select
'-----------> rest of the code

Spin effect

كود :

Case ImageEffects.Spin

Dim m_rotation As Single = 360 * m_percent / 100
Dim cX As Single = control.Width / 2
Dim cY As Single = control.Height / 2
Dim m_scale As Single = m_percent / 100
If m_scale = 0 Then
m_scale = 0.0001F
End If

Dim mx As New Drawing2D.Matrix(m_scale, 0, 0, m_scale, cX, cY)
mx.Rotate(m_rotation, Drawing2D.MatrixOrder.Prepend)
g.Transform = mx
g.DrawImage(m_slidingBmp, New Rectangle(-control.Width / 2, -control.Height / 2, control.Width, control.Height), 0, 0, m_slidingBmp.Width, m_slidingBmp.Height, GraphicsUnit.Pixel)
Exit Select
'-----------> rest of the code

Rectangular effect

كود :

Case ImageEffects.Rectangular

Path = New Drawing2D.GraphicsPath()
Dim w As Integer = CInt(((control.Width * 1.414F) * m_percent / 200))
Dim h As Integer = CInt(((control.Height * 1.414F) * m_percent / 200))

Dim rect As New Rectangle(CInt(control.Width / 2) - w, CInt(control.Height / 2) - h, 2 * w, 2 * h)
Path.AddRectangle(rect)

g.SetClip(Path, Drawing2D.CombineMode.Replace)
g.DrawImage(m_slidingBmp, ClientRectangle, 0, 0, m_slidingBmp.Width, m_slidingBmp.Height, GraphicsUnit.Pixel)
Path.Dispose()

Exit Select
'-----------> rest of the code

Circular effect

كود :

Case ImageEffects.Circular

Path = New Drawing2D.GraphicsPath()
Dim w As Integer = CInt(((control.Width * 1.414F) * m_percent / 200))
Dim h As Integer = CInt(((control.Height * 1.414F) * m_percent / 200))

Path.AddEllipse(CInt(control.Width / 2) - w, CInt(control.Height / 2) - h, 2 * w, 2 * h)
g.SetClip(Path, Drawing2D.CombineMode.Replace)
g.DrawImage(m_slidingBmp, ClientRectangle, 0, 0, m_slidingBmp.Width, m_slidingBmp.Height, GraphicsUnit.Pixel)
Path.Dispose()

Exit Select
'-----------> rest of the code

Elliptical effect

كود :

Case ImageEffects.Elliptical

Path = New Drawing2D.GraphicsPath()
Dim w As Integer = CInt(((control.Width * 1.1 * 1.42F) * m_percent / 200))
Dim h As Integer = CInt(((control.Height * 1.3 * 1.42F) * m_percent / 200))

Path.AddEllipse(CInt(control.Width / 2) - w, CInt(control.Height / 2) - h, 2 * w, 2 * h)
g.SetClip(Path, Drawing2D.CombineMode.Replace)
g.DrawImage(m_slidingBmp, ClientRectangle, 0, 0, m_slidingBmp.Width, m_slidingBmp.Height, GraphicsUnit.Pixel)
Path.Dispose()

Exit Select
'-----------> rest of the code

بالمرفقات ستجدون نسخة كاملة من المشروع وطريقة استخدامه و الملف المرفق بنسخة الفيجوال استوديو 2008
وإن شاء الله سوف نكمل إضافة مجموعة من المؤثرات الأخري في مقال لاحق بإذن الله

مع تحياتي للجميع
أخوكم عمر