منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب
الرسم باستخدام +gdi - نسخة قابلة للطباعة

+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم لغة الفيجوال بيسك VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=182)
+--- قسم : قسم مقالات VB.NET (http://vb4arb.com/vb/forumdisplay.php?fid=184)
+--- الموضوع : الرسم باستخدام +gdi (/showthread.php?tid=4579)

الرسم باستخدام +gdi - RaggiTech - 29-09-12

كاتب الموضوع حامد الهادى عيد

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


مقدمة: واجهة تصميم الرسوم Graphics Design Interface أو GDI على سبيل الإختصار. عبارة عن مجموعة من الفئات Classes والتى تمكنك من انشاء الرسوم والنصوص والصور . وقد تم تحديثها إلى حتى وصلت الى الإصدار +GDI وهى الطريقة الوحيده للرسم داخل بيئة دوت نت.

هذه الفئات مضمنه داخل مجالات الإسماء التاليه .. لذلك يجب عليك استرادها أو تضمينها فى مشروعك..


كود :
[color=#0000ff]Imports[/color] System.Drawing
[color=#0000ff]Imports[/color] System.Drawing.Drawing2D
[color=#0000ff]Imports[/color] System.Drawing.Imaging
[color=#0000ff]Imports[/color] System.Text
عندما تريد ان ترسم عليك تحديد العناصر التالية:
  • السطح الذى سيتم الرسم عليه وهو كائن من النوع Graphics.

  • القلم الذى سيتم استخدامة فى عملية الرسم.

  • الشكل المراد رسمه.

  • المكان الذى سيتم الرسم فيه - من ناحية الاحداثيات -.
دعنا نأخذ مثال لرسم خط:

كود :
[align=right][SIZE=4][color=darkgreen]'هذه هى الوظيفة الخاصة برسم خط على النموذج.[/color][/SIZE][/align]
[SIZE=4] [FONT=Times New Roman]Me.CreateGraphics.DrawLine(pen ,x1,y1,x2,y2)[/FONT][/SIZE]
'السطح الذى سيتم الرسم عليه هو الكائن فورم.'أما الوسيطات التى تقبلها وظيفة رسم خط فهى .
-القلم المستخدم فى عملية الرسم.-الإحداثى السينى لنقطة البداية - الإحداثى الأفقى--الإحداثى الصادى لنقطة البداية - الإحداثى الرأسى--الإحداثى السينى لنقطة البداية - الإحداثى الأفقى--الإحداثى الصادى لنقطة النهاية - الإحداثى الرأسى-
الآن هذا الكود لرسم خط ..ضعه فى حدث النقر لزر مثلا.

كود :
[color=#0000ff]Me[/color].CreateGraphics.DrawLine(Pens.AliceBlue, 12, 12, 150, 250)
فى المشاركة التالية سوف نتعرف على الكائنات الخاصة بالرسم بتفصيل اكثر.
يتبع;;;


الرسم باستخدام +gdi - RaggiTech - 29-09-12

[b]بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

الكائنات الخاصة بالرسم:

أولا الكائن Graphics :
وهو يمثل السطح الذى سيتم الرسم عليه سواء كان النموذج او اى اداة اخرى ..ويمكن استدعاء هذا الكائن التابع لأى اداة عن طريق استدعاء الطريقة CreateGraphics .
كما انه يمكننا انشاء كائن من نوع Graphics واسناد الطريقة CreateGraphics ايه:
كود :
[b][align=center]
[SIZE=2][color=#0000ff]Dim[/color] g [color=#0000ff]As[/color] Graphics = [color=#0000ff]Me[/color].CreateGraphics[/SIZE][/align]
[/b]
[b]
[/b]
ثانيا الكائن Point :
[b]وهو يمثل نقطة على سطح الرسم ويتم تمثيله بالاحداثى الأفقى والرأسى حيث يمثل X البعد الأفقى عن النقطة المرجعية ويمثل Y البعد الرأسى عن النقطة المرجعية . والنقطه المرجعية تمثل الركن الأيسر العلوى للأداه وهى دائما تمثل (0,0).
[/b]
كود :
[b][align=center]
[color=darkgreen]'اولا ارسال الإحداثيات لمشيد الفئة.[/color][/align]
[/b]
كود :
[SIZE=2][color=#0000ff]Dim[/color] P1 [color=#0000ff]As[/color] [color=#0000ff]New[/color] Point(x, y)[/SIZE] [SIZE=2][color=darkgreen]'أو تحديد خصائصها كأى كائن عادى.[/color][/SIZE][SIZE=2][color=#0000ff]Dim[/color] p2 [color=#0000ff]As[/color] Point[/SIZE][SIZE=2]p2.X = 150 [/SIZE][align=right][b][align=center]
[SIZE=2]p2.Y = 250[/SIZE][/align]
[/b][/align]
[b]
[/b]


ثالثا الكائن Rectangle:
[b]وهو يمثل مستطيل :
[/b]
[/b]
كود :
[b][color=darkgreen]'مشيد هذا الكائن يقبل الوسائط التاليه . [/color][/b]
[b][color=darkgreen]- الإحداثى السينى للركن الأيسر العلوى للمستطيل.[/color][/b][b][color=darkgreen]- الإحداثى الصادى للركن الأيسر العلوى للمستطيل.[/color][/b][b][color=darkgreen]-عرض المستطيل[/color][/b][b][color=darkgreen]-طول المستطيل [/color][/b][SIZE=2][color=#000000][FONT=arial][b][COLOR=#0000ff]Dim[/color][/b][/FONT][/COLOR][/SIZE][SIZE=2][color=#000000][FONT=arial][b] rec [/b][/FONT][/color][/SIZE][SIZE=2][color=#000000][FONT=arial][b][COLOR=#0000ff]As[/color][/b][/FONT][/COLOR][/SIZE][SIZE=2][color=#000000][FONT=arial][b][COLOR=#0000ff]New[/color][/b][/FONT][/COLOR][/SIZE][SIZE=2][color=#000000][FONT=arial][b] Rectangle(x, y, Width, Height)[/b][/FONT][/color][/SIZE]


رابعا الكائن Color :
[b]وهو يمثل لون من الألوان التى تستخدم فى عملية الرسم.
[/b]
كود :
[color=#0000ff][FONT=arial][b]Dim[/b][/FONT][/color][color=#000000][FONT=arial][b] col1 [/b][/FONT][/color][color=#0000ff][FONT=arial][b]As[/b][/FONT][/color][color=#000000][FONT=arial][b] Color[/b][/FONT][/color]
[color=#000000][FONT=arial][b]col1 = Color.Blue[/b][/FONT][/color]
[b]

[/b]
خامسا الكائن Font:
[b]يستخدم لتحديد الخط الذى سيستخدم عن رسم النصوص باستخدام الوظيفة DrawString.
[/b]
كود :
[color=#0000ff][FONT=arial][b]Dim[/b][/FONT][/color][color=#000000][FONT=arial][b] myfont [/b][/FONT][/color][color=#0000ff][FONT=arial][b]As[/b][/FONT][/color][color=#0000ff][FONT=arial][b]New[/b][/FONT][/color][color=#000000][FONT=arial][b] Font(FontName, FontSize, FontStyle, Unit)[/b][/FONT][/color]

[SIZE=2][color=darkgreen]'فقط اريد ان اضيف الى انه يمكننا ان نحدد اكثر من قيمة للوسيط  FontStyle عن طريق استخدام المعامل OR[/color][/SIZE]  [color=#0000ff][FONT=arial][b][SIZE=2]Dim[/SIZE][/b][/FONT][/color][SIZE=2][color=#000000][FONT=arial][b] font1 [COLOR=#0000ff]As[/color] [color=#0000ff]New[/color] Font([color=#a31515]"aril"[/color], 30, FontStyle.Bold [color=#0000ff]Or[/color] FontStyle.Italic, GraphicsUnit.Pixel)[/b][/FONT][/COLOR][/SIZE]
[b]

[/b]
[b]سادسا الكائن Pen:[/b]
يمثل القلم الذى يستخدم فى عملية الرسم .. ويمكنك تعرف كائن من هذا النوع وارسال لونه وسمكنه كوسائط لمشيدات الفئه.
كود :
[SIZE=2][color=#000000][FONT=arial][b][COLOR=#0000ff]Dim[/color][/b][/FONT][/COLOR][/SIZE][SIZE=2][color=#000000][FONT=arial][b] pen1 [/b][/FONT][/color][/SIZE][SIZE=2][color=#000000][FONT=arial][b][COLOR=#0000ff]As[/color][/b][/FONT][/COLOR][/SIZE][SIZE=2][color=#000000][FONT=arial][b][COLOR=#0000ff]New[/color][/b][/FONT][/COLOR][/SIZE][SIZE=2][color=#000000][FONT=arial][b] Pen(Color, Width)[/b][/FONT][/color][/SIZE]

[SIZE=2][color=#000000][FONT=arial][b][COLOR=#0000ff]Dim[/color][/b][/FONT][/COLOR][/SIZE][SIZE=2][color=#000000][FONT=arial][b] pen1 [/b][/FONT][/color][/SIZE][SIZE=2][color=#000000][FONT=arial][b][COLOR=#0000ff]As[/color][/b][/FONT][/COLOR][/SIZE][SIZE=2][color=#000000][FONT=arial][b][COLOR=#0000ff]New[/color][/b][/FONT][/COLOR][/SIZE][SIZE=2][color=#000000][FONT=arial][b] Pen(Color.Black, 15)[/b][/FONT][/color][/SIZE]
[b]فى المشاركة التالية سنتحدث عن الوظائف الخاصة بالرسم .[/b]
[b]يتبع;;[/b]


الرسم باستخدام +gdi - RaggiTech - 29-09-12

[b]بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

الوظائف الخاصة بالرسم:
[/b]
[b]ملحوظة : فى الأكواد التالية g هى عبارة عن كائن من نوع Graphics مع اسناد الوظيفة GreateGraphics التابعة للفورم له.
[/b]
رمز برمجي:

كود :
[SIZE=2][color=#0000ff]Dim[/color][/SIZE][SIZE=2] g [/SIZE][SIZE=2][color=#0000ff]As[/color][/SIZE][SIZE=2] Graphics = [/SIZE][SIZE=2][color=#0000ff]Me[/color][/SIZE][SIZE=2].CreateGraphics[/SIZE]

[b]أولا الوظيفة DrawLine.
رسم خط بين نقطتين وسيطها الأول كائن من نوع Pen.

كود :
[SIZE=2]g.DrawLine(Pen, StartPoint, EndPoint)[/SIZE]
مثال

كود :
[SIZE=2]g.DrawLine([color=#0000ff]New[/color] Pen(Color.Black, 5), [color=#0000ff]New[/color] Point(0, 0), [color=#0000ff]New[/color] Point(150, 250))[/SIZE]
ثانيا الوظيفة DrawRectangle:
رسم مستطيل مجوف وهى معرفة بأكثر من طريقة وإحدى صيغها .تقبل كائن من نوع Pen وآخر من نوع Rectangle.

كود :
[SIZE=2]g.DrawRectangle(Pen, Rectangle)[/SIZE]
مثال

كود :
[SIZE=2]g.DrawRectangle([color=#0000ff]New[/color] Pen(Color.Black, 7), [color=#0000ff]New[/color] Rectangle(0, 0, 250, 100))[/SIZE]
الوظيفة DrawEllipse:
رسم شكل بيضاوى أو دائرة . والوسيطات التى يقبلهاهى نفسها وسيطات الدالة DrawRectangle.

الوظيفة DrawString:
وهى المسئوله عن رسم النصوص على الأسطح الرسومية.

كود :
[SIZE=2]g.DrawString(Text, Font, bruch, Point)[/SIZE][color=darkgreen]'بالنسبة للوسط bruch فيمكنك اختيار أحد القيم من القائمة المنسدله.[/color]
مثال

كود :
[SIZE=2]g.DrawString([color=#a31515]"hamed eid"[/color], [color=#0000ff]New[/color] Font([color=#a31515]"tahoma"[/color], 14, FontStyle.Italic, GraphicsUnit.Pixel), _[/SIZE][SIZE=2]Brushes.Orchid, [color=#0000ff]New[/color] Point(0, 0))[/SIZE]
[/b]

[b]الآن انتهينا من الموضوع .. وربما أضيف بعض الأمثله التطبيقية.. واى استفسار أنا حاضر
[/b]

الرسم باستخدام +gdi - أسامة أحمد - 29-09-12

بارك الله فيك أخي الكريم

الرسم باستخدام +gdi - GAGARAIN - 30-09-12

مشكور علي الشرح المختصر والوافي