[RaggiTech]

كاتب الموضوع : silverlight


بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

مقدمـــــة

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

عالم +GDI

المهتمين بالرسم أو بالجرافكس بشكل عام يعلمون جيدا معني كلمة +GDI وأيضا يعلمون جيدا كيف يستخدمون الأوامر الخاصة بمكتبة +GDI لرسم الأشكال الهندسية المختلفة أو رسم الصور أو أي شئ أخر علي الفورم أو علي الكونترول لذلك نحن هنا لن نناقش كيف نرسم بل سوف نناقش كيف نستفيد ونطور من عمليات الرسم المختلفة وبالتالي نستفيد منها في بناء ما نريده

الفكرة الأولي:

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

المثال الأول :

لكي نرسم أي شكل هندسي علي الفورم ولنأخذ المستطيل كمثال غالبا ما نحتاج الي تعريف نقطة بداية عملية الرسم وأيضا أبعاد هذا المستطيل اي أننا نحتاج الي تعريف Location وأيضا Size ومن ثم نقوم برسم هذه المستطيل علي سطح الفورم أو الكونترول باستخدام أوامر +GDI وغاليا ما يتم ذلك في الحدث Paint وهذا الحدث موجود في كل من الفورم والكونترول والكود التالي يوضح الفكرة

كود :

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
' تعريف نقطة بداية الرسم
Dim startPoint As Point = New Point(10, 10)
' تعريف أبعاد المستطيل
Dim RectangleSize As Size = New Size(100, 100)
' تعريف المستطيل
Dim Rect As Rectangle = New Rectangle(startPoint, RectangleSize)
' تلوين المستطيل
e.Graphics.FillRectangle(Brushes.Red, Rect)
' رسم المستطيل
e.Graphics.DrawRectangle(Pens.Blue, Rect)
End Sub

أيضا من الممكن الرسم عن طريق عمل Overrides للحدث Paint والكود التالي يوضح الفكرة

كود :

Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(e)
' تعريف نقطة بداية الرسم
Dim startPoint As Point = New Point(10, 10)
' تعريف أبعاد المستطيل
Dim RectangleSize As Size = New Size(100, 100)
' تعريف المستطيل
Dim Rect As Rectangle = New Rectangle(startPoint, RectangleSize)
' تلوين المستطيل
e.Graphics.FillRectangle(Brushes.Red, Rect)
' رسم المستطيل
e.Graphics.DrawRectangle(Pens.Blue, Rect)
End Sub

المثال الثاني:

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

كود :

Public Class Form1
Private startPoint As Point = New Point(10, 10)
Private RectangleSize As Size = New Size(100, 100)
Private Rect As Rectangle

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
' تعريف المستطيل
Rect = New Rectangle(startPoint, RectangleSize)
' تلوين المستطيل
e.Graphics.FillRectangle(Brushes.Red, Rect)
' رسم المستطيل
e.Graphics.DrawRectangle(Pens.Blue, Rect)
End Sub
End Class

أيضا من الممكن الرسم عن طريق عمل Overrides للحدث Paint والكود التالي يوضح الفكرة

كود :

Public Class Form1

Private startPoint As Point = New Point(10, 10)
Private RectangleSize As Size = New Size(100, 100)
Private Rect As Rectangle

Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(e)
' تعريف المستطيل
Rect = New Rectangle(startPoint, RectangleSize)
' تلوين المستطيل
e.Graphics.FillRectangle(Brushes.Red, Rect)
' رسم المستطيل
e.Graphics.DrawRectangle(Pens.Blue, Rect)
End Sub

End Class

المثال الثالث:

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

والكود التالي يوضح المتغيرات التي نحتاجها مع توضيح للهدف من كل من متغير قمنا بتعريفه
بالإضافة الي كيفية استخدام كل متغير في ألأحداث الخاصة بالفورم مثل الحدث Paint و MouseDown و MouseMove وأيضا MouseUp

كود :

Public Class Form1

' نقطة بداية الرسم
Private startPoint As Point = New Point(10, 10)
' أبعاد المستطيل
Private RectangleSize As Size = New Size(100, 100)
' تعريف المستطيل
Private Rect As Rectangle
' تعريف نقطة سوف تستخدم لتحديد مكان نقطة تحريك المستطيل
Private emptyPoint As Point = Point.Empty
' تعريف متغير رقمي يشير الي نقطة رسم المستطيل في الاتجاه الأفقي أثاء حركة الماوس
Private x As Integer = startPoint.X
' تعريف متغير رقمي يشير الي نقطة رسم المستطيل في الاتجاه الرأسي أثناء حركة الماوس
Private y As Integer = startPoint.Y

Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(e)
Rect = New Rectangle(x, y, RectangleSize.Width, RectangleSize.Height)
Using lgb As New Drawing2D.LinearGradientBrush(Rect, Color.FromArgb(255, Color.DarkBlue), Color.FromArgb(255, Color.Cyan), 90, True)
e.Graphics.FillRectangle(lgb, Rect)
End Using
End Sub

Protected Overrides Sub OnMouseDown(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseDown(e)
If e.Button = Windows.Forms.MouseButtons.Right Then Return
' تمرير قيمة للمتغير الذي يشير الي مكان أو نقطة تحريك المستطيل عن طريق ربطها مع الماوس
emptyPoint.X = e.Location.X
emptyPoint.Y = e.Location.Y
End Sub

Protected Overrides Sub OnMouseMove(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseMove(e)
' هنا نتأكد أن المتغير الذي يشير الي نقطة تحريك الماوس بالفعل يمتلك بعض القيم
If emptyPoint = Point.Empty Then Return
' هما نمرر قيم جديدة لنقطة بداية رسم المستطيل في الاتجاه الأفقي
x = e.X - emptyPoint.X + startPoint.X
' هنا نمرر قيم جديدة لنقطة بداية رسم المستطيل في الاتجاه الرأسي
y = e.Y - emptyPoint.Y + startPoint.Y
' هنا نطلب من الفورم أن يعيد رسم المستطيل
Me.Invalidate()
End Sub

Protected Overrides Sub OnMouseUp(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseUp(e)
' هنا نتأكد بأن المستخدم قام باستخدام الباتون الخاص بيسار الماوس
If e.Button = Windows.Forms.MouseButtons.Right Then Return
' هنا نمرر قيمة جديدة الب نقطة باية رسم المستطيل
startPoint.X += e.X - emptyPoint.X
startPoint.Y += e.Y - emptyPoint.Y
' هنا نعيد المتغير الذي يشير الي مكان تحريك المستطيل الي قيمته الأصلية وهي لا شئ
emptyPoint = Point.Empty
End Sub

End Class

المثال الرابع:

تحريك المستطيل في الاتجاه الأفقي فقط والكود التالي يوضح ذلك

كود :

Public Class Form1

' نقطة بداية الرسم
Private startPoint As Point = New Point(10, 10)
' أبعاد المستطيل
Private RectangleSize As Size = New Size(100, 100)
' تعريف المستطيل
Private Rect As Rectangle
' تعريف نقطة سوف تستخدم لتحديد مكان نقطة تحريك المستطيل
Private emptyPoint As Point = Point.Empty
' تعريف متغير رقمي يشير الي نقطة رسم المستطيل في الاتجاه الأفقي أثاء حركة الماوس
Private x As Integer = startPoint.X

Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(e)
Rect = New Rectangle(x, startPoint.Y, RectangleSize.Width, RectangleSize.Height)
Using lgb As New Drawing2D.LinearGradientBrush(Rect, Color.FromArgb(255, Color.DarkBlue), Color.FromArgb(255, Color.Cyan), 90, True)
e.Graphics.FillRectangle(lgb, Rect)
End Using
End Sub

Protected Overrides Sub OnMouseDown(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseDown(e)
If e.Button = Windows.Forms.MouseButtons.Right Then Return
' تمرير قيمة للمتغير الذي يشير الي مكان أو نقطة تحريك المستطيل عن طريق ربطها مع الماوس
emptyPoint.X = e.Location.X
End Sub

Protected Overrides Sub OnMouseMove(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseMove(e)
' هنا نتأكد أن المتغير الذي يشير الي نقطة تحريك الماوس بالفعل يمتلك بعض القيم
If emptyPoint = Point.Empty Then Return
' هما نمرر قيم جديدة لنقطة بداية رسم المستطيل في الاتجاه الأفقي
x = e.X - emptyPoint.X + startPoint.X
' هنا نطلب من الفورم أن يعيد رسم المستطيل
Me.Invalidate()
End Sub

Protected Overrides Sub OnMouseUp(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseUp(e)
' هنا نتأكد بأن المستخدم قام باستخدام الباتون الخاص بيسار الماوس
If e.Button = Windows.Forms.MouseButtons.Right Then Return
' هنا نمرر قيمة جديدة الب نقطة باية رسم المستطيل
startPoint.X += e.X - emptyPoint.X
' هنا نعيد المتغير الذي يشير الي مكان تحريك المستطيل الي قيمته الأصلية وهي لا شئ
emptyPoint = Point.Empty
End Sub

End Class

المثال الخامس:

تحريك المستطيل في الاتجاه الرأسي فقط والكود التالي يوضح ذلك

كود :

Public Class Form1

' نقطة بداية الرسم
Private startPoint As Point = New Point(10, 10)
' أبعاد المستطيل
Private RectangleSize As Size = New Size(100, 100)
' تعريف المستطيل
Private Rect As Rectangle
' تعريف نقطة سوف تستخدم لتحديد مكان نقطة تحريك المستطيل
Private emptyPoint As Point = Point.Empty
' تعريف متغير رقمي يشير الي نقطة رسم المستطيل في الاتجاه الرأسي أثناء حركة الماوس
Private y As Integer = startPoint.Y

Protected Overrides Sub OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)
MyBase.OnPaint(e)
Rect = New Rectangle(startPoint.X, y, RectangleSize.Width, RectangleSize.Height)
Using lgb As New Drawing2D.LinearGradientBrush(Rect, Color.FromArgb(255, Color.DarkBlue), Color.FromArgb(255, Color.Cyan), 90, True)
e.Graphics.FillRectangle(lgb, Rect)
End Using
End Sub

Protected Overrides Sub OnMouseDown(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseDown(e)
If e.Button = Windows.Forms.MouseButtons.Right Then Return
' تمرير قيمة للمتغير الذي يشير الي مكان أو نقطة تحريك المستطيل عن طريق ربطها مع الماوس
emptyPoint.Y = e.Location.Y
End Sub

Protected Overrides Sub OnMouseMove(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseMove(e)
' هنا نتأكد أن المتغير الذي يشير الي نقطة تحريك الماوس بالفعل يمتلك بعض القيم
If emptyPoint = Point.Empty Then Return
' هنا نمرر قيم جديدة لنقطة بداية رسم المستطيل في الاتجاه الرأسي
y = e.Y - emptyPoint.Y + startPoint.Y
' هنا نطلب من الفورم أن يعيد رسم المستطيل
Me.Invalidate()
End Sub

Protected Overrides Sub OnMouseUp(ByVal e As System.Windows.Forms.MouseEventArgs)
MyBase.OnMouseUp(e)
' هنا نتأكد بأن المستخدم قام باستخدام الباتون الخاص بيسار الماوس
If e.Button = Windows.Forms.MouseButtons.Right Then Return
' هنا نمرر قيمة جديدة الب نقطة باية رسم المستطيل
startPoint.Y += e.Y - emptyPoint.Y
' هنا نعيد المتغير الذي يشير الي مكان تحريك المستطيل الي قيمته الأصلية وهي لا شئ
emptyPoint = Point.Empty
End Sub

End Class

في الكود الخاص بالمثال الثالث الي الخامس أعلاه بعض القصور وهي كالتالي

1- إهتزاز الرسم أثناء عملية تحريك المستطيل
2- عند الضغط علي الفورم في اي ماكن بالمثال الثالث يتم تحريك المستطيل
3- عند الضغط علي الفورم في يمين أو يسار المستطيل بالمثال الرابع يتم تحريك المستطيل
4- عند الضغط علي الفورم في أعلي أو أسفل المستطيل بالمثال الخامس يتم تحريك المستطيل
5- عند تحريك المستطيل خارج أبعاد الفورم يبدأ المستطيل في الاختفاء

حاول عزيزي القارئ أن تجد حلولا لمثل هذه المشاكل وحاول أيضا أن تستخدم شكلا هندسيا أخر غير المستطيل ..... وذلك قبل أن تقرأ المشاركات التالية والخاصة بالفكرة التي نتحدث عنها في هذا الجزء الأول

ملحوظة:

ألا يذكرك الكود الموجود أعلاه بأي كونترول تستخدمه علي سبيل المثال TrackBar أو ScrollBar وهذا يعود بنا إلي بداية المقال وهو أن مجموعة أفكار صغيرة سوف تؤدي الي بناء فكرة كبيرة


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