[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
وإن شاء الله سوف نكمل إضافة مجموعة من المؤثرات الأخري في مقال لاحق بإذن الله

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