مقال: أفكار في الجرافكس ....... الجزء الأول Graphics Ideas in VisualBasic.Net Part 1

مقدمـــــة

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

عالم 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