تعلم الرسم في الدوت نت مع GDI+

ما هي GDI:

Graphic Device Interface أو اختصاراً GDI وهي تقنية للتعامل مع الرسومات ثائية البعد 2D Drawings.

وهي تتألف من مجموعة من كلاسات C++ التي تعمل على الربط بين البرامج والهاردوير اي انها تعمل كوسيط يترجم أوامر البرامج إلى لغة يفهما العتاد الصلب Hardware الخاص بالرسومات Graphics.

حسناً ما هي GDI+ إذاً:

في الفيجوال ستوديو Visual Studio .Net قامت مايكروسوفت بإضافة العديد من التحسينات والمزايا على تقنية GDI لجعل التعامل معها أسهل ,, وهذا قادنا إلى ظهور GDI+ النسخة المطورة من GDI.

والآن لننتقل إلى العمل البرمجي:

مكتبة GDI+ موجودة في ملف التجميع System.Drawing.dll وأما كلاسات هذه المكتبة فتتوزع على أكثر من فضاء (نطاق) أسماء Namespaces, وهي:

System.Drawing, System.Drawing.Text, System.Drawing.Printing, System.Drawing.Imaging, System.Drawing.Drawing2D, System.Drawing.Design

اذاً يجب أولاً تضمين هذه المكتبات من أجل العمل مع GDI+:

using System.Drawing;

Imports System.Drawing

الكلاس Graphics:

هذه الكلاس يمكننا من تعريف أسطح الرسم في GDI+ حيث انه قبل ان ترسم اي كائن رسومي, يجب عليك إنشاء سطح Surface للرسم عليه باستخدام هذا الكلاس Graphics class.

مثال على استخدامها (توجد أكثر من طريقة لتعريف كائن Graphics):

void Form1_Paint(object sender, PaintEventArgs e)

{

    Graphics g = e.Graphics;

}

Private Sub Form1_Load (ByVal sender As Object, ByVal e As System.EventArgs) Handles Me. Load

        Dim g As Graphics = Me.CreateGraphics()

End Sub

كما هو واضح في البداية يجب التأكد من تضمين مكتبة System.Drawing من أجل الوصول إلى الكلاس Graphics ثم في حدث Paint التابع للفورم نقوم بإنشاء كائن Graphics يمثل سطح الفورم عن طريق اسناده إلى البرامتر e ثم الخاصية  Graphics وهذا ما يمكننا من الرسم على الفورم مباشرة.

الحدث Paint:

ينطلق هذا الحدث عندما يتم رسم أو إعادة رسم الكائن (Form,Button,ListBox,……).

وبمجرد ان تنشأ الكائن Graphics, تستطيع بعدها ان تستدعي اي تابع او اجراء من هذا الكائن من أجل رسم العديد من الأشكال. هذه بعضها:

DrawArc	رسم قوس
DrawClosedCurve	رسم منحني مغلق معرف بواسطة مصفوفة من النقاط
DrawCurve	رسم منحني معرف بواسطة مصفوفة من النقاط
DrawEllipse	رسم شكل بيضاوي
DrawImage	رسم صورة
DrawLine	رسم خط
DrawPath	رسم المسارات
DrawPolygon	رسم مضلع
DrawRectangle	رسم مستطيل
DrawString	رسم (كتابة) نص
FillEllipse	تعبئة شكل بيضاوي بلون معين
FillPath	تعبئة مسار
FillPolygon	تعبئة مضلع
FillRectangle	تعبئة مستطيل
FillRegion	تعبئة نطاق (منطقة)

                                                                                                                                                                                                        

ولكن توقف قليلاً .. أصبح عند ورقة (سطح) للرسم ولكن بماذا سترسم؟ انت تحتاج بالطبع إلى قلم أو فرشاة !!

إذا من أجل الرسم, يوجد عندنا اربع كائنات نستطيع ان نستخدمها للرسم وهي:

Brush	الفرشاة, تستخدم لتعبئة السطوح المغلقة بلون معين او نموذج Pattern او صورة
Pen	القلم, يستخدم لرسم الخطوط والمضلعات (مستطيل, قوس, دائرة, ...)
Font	خط, يستخدم لوصف (تعيين خصائص) الخط الذي نريد كتابة النص به
Color	لون, طبعاً يستخدم لتحديد اللون الذي نريد استخدامه في الرسم

                                                                  

مثال:

Pen p = new Pen(Color.Red,100);

Dim p As Pen = New Pen(Color.Red, 100)

قمنا بإنشاء كائن قلم لونه أحمر وعرضه 100 pixel (العرض يعني ثخانة خط القلم). يمكننا أيضاً بدلاً من تحديد لون للقلم ان نحدد له فرشاة كي يرسم بها (سيتم شرحها لاحقاً).

بنية الألوان Colors Structure:

من أجل اختيار اللون الذي نريد, يمكننا إما اختيار الألوان الجاهزة في البرنامج أو تحديد الألوان التي نريدها عن طريق تغيير قيم قنوات الألوان الثلاثة RGB بالإضافة إلى انه يمكننا ايضاً تحديد شفافية اللون عن طريق قناة Alpha. إذاً بناء على ذلك فإن اللون يتكون من اربع عناصر او قنوات هي:

A	تحديد شفافية اللون
R	تحديد قيمة اللون الأحمر
G	تحديد قيمة اللون الأخضر
B	تحديد قيمة اللون الأزرق

مثال:

Dim c As Color = Color.FromArgb(128, 255, 175, 175)

Color c = Color.FromArgb(128, 255, 175, 175);

واضح اننا قمنا بتعريف لون خاص بنا إعتماداً على تغيير قيم القنوات الاربعة (Alpha,Red,Green,Blue) وجميع قيم هذا المكونات تتراوح بين 0 الصفر و 255.

الفرشاة Brush class:

الكلاس Brush هو كلاس مجرد Abstract أي انه لايمكن إنشاء كائن Object منه, وفي الرسم نحن نستخدم الكلاسات الموروثة منه وهي:

SolidBrush, TextureBrush, LinearGradientBrush

مثال:

Rectangle r = new Rectangle(50, 50, 350, 200);

LinearGradientBrush lb = new LinearGradientBrush(r, Color.Red, Color.Black, LinearGradientMode.ForwardDiagonal);

Pen k = new Pen(lb);

g.FillRectangle(lb, r);

في المثال قمنا بتعريف كائن من نوع Rectangle مستطيل حيث إحداثياته (x,y)=(50,50) وأبعاده (w,h)=(350,200).

ثم عرفنا فرشاة تدرج لوني خطي, أبعاد الفرشاة هي المستطيل r الذي عرفناه قبل قليل والتدرج للوني هو من اللون الأحمر إلى الأسود وشكل التدرج هو بشكل قطري ForwardDiagonal. ملاحظة لاستخدام هذه الفرشاة يجب تضمين المكتبة System.Drawing.Drawing2D.

بعد ذلك عرفنا قلم ولم نحدد له لون وإنما مررنا له الفرشاة lb التي عرفناها بدلاً من اللون ثم قمنا برسم مستطيل مملوء بالفرشاة lb, ليصبح الشكل الناتج كالتالي:

أما باقي الفرش فهي:

SolidBrush تستخدم لملء كائن رسومي بلون واحد (مصمت) اي ليس فيه تدرج.

TextureBrush تستخدم لملء كائن رسومي بصورة.

الكلاس Point:

لتعريف نقطة نقوم بإنشاء كائن من الكلاس Point وهذا الكائن يحمل قيمتين هما X,Y لتحديد مكان هذه النقطة. ونحن نستخدم النقطة في الكثير من العمليات في الرسم حيث يمكن استبدال الكائن Rectangle في المثال السابق بكائنين من نوع Point لعمل نفس الشيء.

Dim r As New Rectangle(50, 50, 350, 200)

OR

Dim p1 As New Point(50, 50)

Dim p2 As New Point(350, 200)

وبهذا ننهي هذه المقدمة البسيطة عن هذه التقنية الرائعة GDI+ فهذا الدرس ما هو إلا نقطة في بحر GDI+ ,, وأترككم الآن مع الأمثلة التي ستزيل الكثير من الغموض و الصعوبة عن هذا الدرس فهي مشروحة بالتفصيل.

تحميل المثال - فيجوال بيسيك

تحميل المثال - سي شارب