الدرس الرابع والخمسون - Gdi+ - نسخة قابلة للطباعة

الدرس الرابع والخمسون - Gdi+ - نسخة قابلة للطباعة

+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : الأقسام التعليمية - المنتدى القديم (http://vb4arb.com/vb/forumdisplay.php?fid=90)
+--- قسم : قسم دورات المنتدى (http://vb4arb.com/vb/forumdisplay.php?fid=113)
+---- قسم : دورة .net 2008 . لنبدأ سوياً (http://vb4arb.com/vb/forumdisplay.php?fid=138)
+---- الموضوع : الدرس الرابع والخمسون - Gdi+ (/showthread.php?tid=5650)

الدرس الرابع والخمسون - Gdi+ - RaggiTech - 14-10-12

كاتب الموضوع : أحمد جمال

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

GDI+ :

تتبع هذه الأوامر الفئة System.Drawing وتوفر لك حلولاً افضل من اجل رسومات 2D على الفورم والمخططات البيانية وخلافه ، تحتوي على الفئات الرئيسية التالية :

System.Drawing : الفئة الرئيسية ، تحتوي على الأقلام والفرش الاساسية التي تستخدمها في عمليات الرسم .
System.Drawing.Drawing2D : تقدم مجموعة أخرى من الدوال التي تساعدك على الرسم مثل gradient brushes و geometric transforms .
System.Drawing.Imaging : تساعدك في عملياتك على الصور وقراءة البيانات الداخلية وتنفيذ العمليات المختلفة .
System.Drawing.Printing : تساعدك على تحويل رسومات إلى صور للطباعة والتعامل مع الطاعبة .
System.Drawing.Text : التعامل بصورة رسومية مع الخطوط وخلافه .

محتويات الفئة System.Drawing :
هي الفئة الاساسية والأكثر استخداماً ،أهم محتوياتها هي :

Bitmap : لاحتواء معلومات الصورة .
Brush : فرشاة لعملية التلوين ، ولها عدة انواع .
BufferedGraphics : يمكنك باستخدام هذا ال Buffer الرسم باستخدام تقنية double buffering ، وهي تقنية تسمح للرسم بالاكتمال في buffer مستقل ثم ظهوره للمستخدم مرة واحدة لتلافي مشكلة flicker ، على العموم هي تقنية مشهورة في تقنيات الرسم يمكن التعرف عليها من هنا :
http://msdn.microsoft.com/en-us/library/b367a457.aspx

Color
SystemColors : الألوان التي يمكن استخدامها في عمليات الرسم والتلوين .

Font
FontFamily : الخطوط التي يمكن استخدامها في عمليات رسم النصوص .

Graphics : الكائن الاساسي في عمليات الرسم ، والتي سنتعرف عليها لاحقاً .

Icon
SystemIcons : التعامل مع الايقونات .

Image : ال abstract class لكل ما يتعلق بعمليات الصور .
ImageAnimator : للتعامل مع الصور المتحركة .

Pen : قلم لعمليات الرسم ، وله عدة أنواع .
Point : للتعامل مع الاحداثيات .
Rectangle : مستطيل .
Size : حساب المساحة للشكل .
StringFormat : يحتوي هذا الكلاس على كل ما يتعلق بعمليات النصوص .
Region : خاص بالتعامل مع الاشكال أي كانت ، وله عدة خصائص مفيدة جداً .

يمكنك معرفة المزيد عن جميع محتوياتها من خلال هذا الرابط :
http://msdn.microsoft.com/en-us/library/system.drawing.aspx

الكائن Graphics .
الكائن Graphics هو الكائن الأساسي في عملية الرسم ، يمكن انشاءه بعدة طرق :

- من الفورم ، وينطبق عليه من picture box وخلافه :
C#:

كود :

Graphics myGraphic = Form1.CreateGraphics();

vb.net:

كود :

Dim myGraphic As Graphics = Form1.CreateGraphics()

- أو من حدث الرسم لأي اداة كالفوم مثلاً ، عن طريق الكائن PaintEventArgs بالشكل التالي مثلاً :
C#:

كود :

[FONT=Tahoma] private void Form1_Paint(object sender, PaintEventArgs e)[/FONT]

[FONT=Tahoma]{[/FONT]

[FONT=Tahoma]Graphics myGraphic = e.Graphics();[/FONT]

[FONT=Tahoma]}[/FONT]

vb.net:

كود :

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs)

كود :

[FONT=Tahoma] Dim myGraphic As Graphics = e.Graphics() [/FONT]

[FONT=Tahoma]End Sub [/FONT]

ويحتوي هذا الكائن على الأوامر التالية :

FromHdc()
FromHwnd()
FromImage() : عمل كائن رسم من صورة موجودة حالياً .
Clear() : مسح محتويات الكائن .
DrawArc() : رسم صورة او شكل هندسي .
DrawBeziers() : رسم Beziers - لا أعرف معناها ولكنها ترسم منحنيات - .
DrawCurve() : رسم منحنى .
DrawEllipse() : رسم شكل بيضاوي.
DrawIcon() : رسم ايقونة .
DrawLine() : رسم خط مستقيم .
DrawLines() : رسم مجموعة من الخطوط .
DrawPie() : رسم مخطط بياني .
DrawPath() : رسم مسار .
DrawRectangle() : رسم مستطيل .
DrawRectangles() : رسم مستطيلات .
DrawString() : رسم نص .
FillEllipse() : تلوين مضلع .
FillPie() : تلوين مخطط بياني .
FillPolygon() : تلوين شكل بيضاوي.
FillRectangle() : تلوين مربع .
FillPath() : تلوين مسار .

لمزيد من المعلومات حول هذه الفئة ودوالها :
http://msdn.microsoft.com/en-us/library/system.drawing.graphics_members.aspx

الدرس الرابع والخمسون - Gdi+ - RaggiTech - 14-10-12

والآن لعلك لاحظت أن جميع دوال الرسم DrawXXX تستخدم القلم Pen ، أما دوال التلوين FillXXX فهي تستخدم الفرشاة Brush ،لذا سنبدأ بالتعرف على هذين الكائنين أولاً .

Pen :
يمكن استخدام Pen في عمليات الرسم مباشرة عن طريق تحديد مثل Pen.Blue للقلم الأزرق وخلافه ، إلا أننا ما زلنا قادرين على تعريف كائن منه والاستفادة من خصائصه المتعددة بالشكل التالي مثلاً :
C#:

كود :

[FONT=Tahoma]Pen myPen = new Pen(Color.Black, 3);[/FONT]

vb.net:

كود :

Dim myPen As New Pen(Color.Black, 3)

حيث قمنا بانشاء قلم بلون أسود وبعرض 3 .يمكننا استخدام المزيد من الخصائص للقلم عن طريق تحديد مثلاً شكل نقطة البداية :

كود :

[FONT=Tahoma]myPen.StartCap = LineCap.ArrowAnchor[/FONT]

لمعرفة المزيد عن خصائص القلم :
http://msdn.microsoft.com/en-us/library/system.drawing.pen.aspx

Brush :
بنفس الطريقة ، يمكن انشاء فرشاة باللون الأصفر كأبسط مثال بالشكل التالي :
C#:

كود :

SolidBrush myBrush = new SolidBrush (Color.Yellow);

vb.net:

كود :

Dim myBrush As New SolidBrush(Color.Yellow)

يمكن ايضاً انشاء فرشاة بأكثر من لون بالشكل التالي مثلاً :
C#:

كود :

HatchBrush myBrush =new HatchBrush(HatchStyle.BackwardDiagonal, Color.Green, Color.White);

vb.net:

كود :

Dim myBrush As New HatchBrush(HatchStyle.BackwardDiagonal, Color.Green, Color.White)

لمعرفة المزيد عن خصائص الفرشاة :
http://msdn.microsoft.com/en-us/library/system.drawing.brush.aspx

الدرس الرابع والخمسون - Gdi+ - RaggiTech - 14-10-12

الرسم :

بعد ان انشأنا كائننا الخاص للرسم ، يمكننا البدء في رسم خط مستقيم بالشكل التالي مثلاً :

كود :

[FONT=Tahoma]myGraphic.DrawLine(Pens.Blue, 20, 20, 100, 100)[/FONT]

أو مستطيل :

كود :

myGraphic.DrawRectangle(Pens.Blue, New Rectangle(20, 20, 100, 100))

أو رسم منحنى :

كود :

[FONT=Tahoma]myGraphic.DrawBezier(Pens.Blue, 10, 20, 50, 80, 10, 80, 100, 50)[/FONT]

بامكاننا رسم خط مستقيم ولكن باستخدام كائن قلم سبق تعريفه وتحديده بأنه منقط بالشكل التالي مثلاً :
C#:

كود :

[FONT=Tahoma] Graphics myGraphic = e.Graphics;

Pen myPen = new Pen(Color.Blue, 3);

myPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;

myGraphic.DrawLine(myPen, 20, 20, 100, 100);[/FONT]

vb.net:

كود :

[FONT=Tahoma]Dim myGraphic As Graphics = e.Graphics 

Dim myPen As New Pen(Color.Blue, 3) 

myPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot 

myGraphic.DrawLine(myPen, 20, 20, 100, 100) [/FONT]

او لرسم مسار من عدة خطوط على شكل مثلث مثلاً :
C#:

كود :

[FONT=Tahoma]GraphicsPath myGraphicPath = new GraphicsPath(); 

myGraphicPath.StartFigure(); 

myPath.AddLine(10, 10, 30, 60); 

myPath.AddLine(30, 60, 60, 10); 

myPath.AddLine(60, 10, 10, 10); 

myGraphicPath.CloseFigure(); 

myGraphic.DrawPath(myPen, myGraphicPath); [/FONT]

vb.net:

كود :

[FONT=Tahoma]Dim myGraphicPath As New GraphicsPath()

myGraphicPath.StartFigure()[/FONT]

[FONT=Tahoma]myPath.AddLine(10, 10, 30, 60)

myPath.AddLine(30, 60, 60, 10)

myPath.AddLine(60, 10, 10, 10)[/FONT]

[FONT=Tahoma]myGraphicPath.CloseFigure()[/FONT]

[FONT=Tahoma]myGraphic.DrawPath(myPen, myGraphicPath)[/FONT]

أو لرسمه ملوناً نغير السطر الأخير ليكون FillPath مع تمرير الفرشاة المناسبة :

الدرس الرابع والخمسون - Gdi+ - RaggiTech - 14-10-12

رسم النصوص :

رسم النصوص هو قسم آخر من عالم ال GDI أبسط مثال عليه هو الكود التالي لرسم نص بفرشاة حمراء وبلون أحمر في النقطة 200 و 200 .

كود :

[FONT=Tahoma]myGraphic.DrawString("Hello GDI+", new Font("Times New Roman", 30), Brushes.Red, 200, 200);[/FONT]

لكن لاحقاً يكون بامكاننا استخدام الكائن StringFormat واضافته إلى متغيرات الرسم ، لكي نرسم مثلاً نصاً بصورة عمودية :
C#:

كود :

[FONT=Tahoma]Graphics myGraphic = e.Graphics;[/FONT]

[FONT=Tahoma]StringFormat drawFormat = new StringFormat();

drawFormat.FormatFlags = StringFormatFlags.DirectionVertical;[/FONT]

[FONT=Tahoma]myGraphic.DrawString("Hello GDI+", new Font("Times New Roman", 30), Brushes.Red, 100, 20, drawFormat);[/FONT]

vb.net:

كود :

[FONT=Tahoma]Dim myGraphic As Graphics = e.Graphics [/FONT]

[FONT=Tahoma]Dim drawFormat As New StringFormat() 

drawFormat.FormatFlags = StringFormatFlags.DirectionVertical [/FONT]

[FONT=Tahoma]myGraphic.DrawString("Hello GDI+", New Font("Times New Roman", 30), Brushes.Red, 100, 20, drawFormat) [/FONT]

سيكون الناتج شيئاً مثل هذا :

اختم الدرس بمثال جيد ليكون تطبيقاً على دروس الرسوميات لدينا ، المثال موجود على هذا الرابط وهو لرسم ساعة بالشكل التالي :

رابط المثال :
http://www.java2s.com/Tutorial/CSharp/0480__2D/Clockanimation.htm

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

إلى هنا نكون قد انتهينا من درس اليوم ، الدرس القادم سيكون في عالم WPF و XAML .

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