آموزش برنامه نویسی گرافیک از مبتدی تا پیشرفته

[m-heidari]

GDI+ مولفه دسترسی به گرافیک در چهارچوب جدید Microsoft که به .Net معروفه کار رو برای برنامه نویس ها آسونتر کرده البته منظورم از آسونتر کردن این نیست که خیلی راحته و در عرض یکی دو ساعت میشه یاد گرفت چون GDI+ هم مثل بقیه قسمت های دیگه .Net از پیچیدگی خاصی برخورداره و منظور من از آسونتر شدن نسبت به توابع API هست که قبلا تو Visual Basic Classic مجبور بودیم از این روش یعنی API استفاده کنیم. خلاصه یه یا علی بگین تا کار رو شروع کنیم.

تقریبا همه Class هایی که برای GDI+ نوشته شدن تو فضای نامی System.Drawing قرار دارند و بعد از این فضای نامی بخش های مهم دیگه ای هم هست که پایین نوشتم و سعی میکنم که اونهایی که بیشتر به درد میخورن رو توضیح بدم . البته تا جایی که بلد هستم :
اولین و مهمترین Class که ما باید برای شروع کار یاد بگیریم :

System.Drawing.Graphics :
این Class برای کشیدن و پرکردن اشکال مختلف مثل کمان , منحنی , دایره , چهار ضلعی , چند ضلعی , رشته و غیره که تقریبا برای همشون مثال میزنم.
این کلاس قابلیت New کردن رو نداره و باید مقدار دهی مستقیم بشه مثلا برای ایجاد این گرافیک ها بر روی یک کنترل خاص باید متد CreateGraphic یک کنترل و یا فرم رو به این کلاس نسبت بدیم :



Dim objGr As System.Drawing.Graphics = Me.CreateGraphics


این متد باعث میشه که مقدار خروجی CreateGraphics که یک Object از نوع کلاس Graphics هست به داخل فیلد objGr ریخته بشه و اجازه ایجاد این گرافیک ها بر روی فرم به objGr داده بشه :

به عنوان مثال اولین شکل گرافیکی رو بر روی یک فرم تست میکنیم :

این مثال یک خط رو بر رو روی فرم میکشه :



Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e _
As System.EventArgs) Handles Button1.Click

Dim objGr As Graphics = Me.CreateGraphics
objGr.DrawLine(Pens.Blue, 100, 50, 50, 200)

End Sub

End Class



توی این مثال اولین پارامتر که رنگ خط رو مشخص میکنه و به رنگ Blueو توست کلاس Pens مشخص شده بود رو پاس کردیم و مقدار های بعدی به ترتیب
X1 , Y1 که نشون دهنده نقطه شروع و X2 , Y2 که نشون دهنده مقادیر نقطه پایانی هستن .

پس حالا ما با یک مثال دیگه برعکس این خط و با یک رنگ دیکه و کلفتتر نشون میدیم



Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim objGr As Graphics = Me.CreateGraphics
objGr.DrawLine(Pens.Black, 100, 50, 50, 200)
objGr.DrawLine(New Pen(Color.Red, 2), 100, 200, 50, 50)
End Sub

End Class



تو این مثال ما از کلاس Pen استفاده کردیم و رنگ خط و کلفتی خط رو هم مقدار دهی کردیم .

امیدوارم که تا اینجا مفید بوده باشه.
:قلب: :قلب: :قلب:

[meh_secure]

ممنون. زحمت کشیدید. ادامه داره؟

[m-heidari]

اگه ادامه نداشته باشه که ارزش نداره حتما ادامه خواهد داشت :قلب:

[بابک زواری]

بسیار کار زیبا و با ارزشی هست اگر کاملتر بشه بعنوان گفتگوی مهم در میاد

[m-heidari]

در این قسمت Class Pen رو کمی بیشتر کار میکنیم و با بعضی از امکانات اون آشنا میشیم این کلاس همونطور که از اسمش پیداس به عنوان یک قلم برای ایجاد اشکال مختلف استفاده میشه Class Pen تعدادی خواص مهم و جالب داره که من سی میکنم ونا رو توضیح بدم از این خواص میشه به موارد پایین اشاره کرد :

Color:

این خاصیت رنگ قلم رو مشخص میکنه

Brush:

این خاصیت یک مقدار از نوع انواع کلاس های Brush رو قبول میکنه که مهمترین این کلاس ها کلاس Brushes و SolidBrush و LinerGradiantBrush و HachedBrush و PathGradiantBrush که بعدا به صورت کامل در مورد Brush ها بحث میکنیم.

DashStyle:

این خاصیت یک مقدار از شمارنده System.Drawing.Drawing2D.DashStyle میگیره که قلم خطوطی رو که میکشه از این خاصیت تبعیت میکنه که با یک مثال کامل توضیح میدم.

Width:

این خاصیت هم پهنای خط قلم رو مشخص میکنه که یک مقدار Single رو میگیره.

و حالا یک مثال کامل برای Pen :



Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim objGr As Graphics = Me.CreateGraphics
Dim clrPenColor As Color = Color.Blue
Dim brPenBrush As New System.Drawing.Drawing2D.HatchBrush( _
Drawing2D.HatchStyle.BackwardDiagonal, Color.Black, Color.White)
Dim MyColorPen As New Pen(clrPenColor)
MyColorPen.Width = 3
MyColorPen.DashStyle = Drawing2D.DashStyle.DashDot
Dim MyBrushPen As New Pen(brPenBrush)
MyBrushPen.Width = 20
objGr.DrawLine(MyColorPen, 50, 100, 50, 200)
objGr.DrawLine(MyBrushPen, 100, 100, 100, 200)
End Sub

End Class


همینطور که میبینید تو این مثال ما دو تا قلم داریم که با یکیشون از کلاس Color استفاده کردیم و با اون یکی دیگه از کلاس HacheBrush استفاده کردیم تو قلم اول ما به خاصیت DashStyle مقدار DotDash اختصاص دادیم و همینطور که میبینید این خاصیت باعث شد که قلم ما به حالت نقطه و خط که همون Dot و Dash هستن در بیاد و خطمون به این صورت در بیاد و در قلم دوم مقدار BackwardDiagonal باعث شده که خط ما به این شکل در بیاد که ما میتونیم از حالت های دیگه که تو کلاس HachBrush هست هم استفاده کنیم.

البته اینو هم بگم که تو درس های بعدیمون بیشتر در مورد HacheBrush صحبت میکنیم.

خوب . حالا که فهمیدیم Pen یعنی چی میریم سر متد های بعدی کلاس Graphics

تا حالا همه مثال ها رو با متد DrawLine انجام داده بودیم حالا میخوایم در مورد DrawLines که تقریبا همون کار DrawLine رو انجام میده منتها با این تفاوت که DrawLines یک مقدار از نوع Array و از کلاس های Point یا PointF میگیره و به ترتیب اندیس های آرایه Point یا PointF نقاط رو به همدیگه وصل میکنه که در نهایت یک شکل چند خطی به وجود میاد به عنوان مثال :



Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim objGr As Graphics = Me.CreateGraphics
Dim myPen As New Pen(Color.Red)
Dim myPoints() As Point = { _
New Point(30, 100), _
New Point(30, 200), _
New Point(130, 250), _
New Point(230, 100)}
objGr.DrawLines(myPen, myPoints)
End Sub

End Class


همینطور که تو این مثال میبینید ما یک آرایه با چهار اندیس داریم که از نوع کلاس Point هست که البته شما میتونید همین آرایه رو از نوع کلاس PointF ایجاد کنید.

حالا نوبت به متد DrawRectangle میرسه :

این متد یه چهار ضلعی برای ما میسازه البطه چهارضلعی که همه زاویه های اون 90 درجه هستن که درواقع میشه مربع و مستطیل این متد دو تا پارامتر ورودی داره که اولیش مثل همه متد های Draw مقدار کلاس Pen و دومی از نوع کلاس Rectangle و یا RectangleF هست.
کلاس Rectangle کارش تقریبا شبیه کلاس Point هست با این تفاوت که انگار دو تا Point رو میگیره و نسبت به نقاط داده شده تو این دو تا Point چهار ضلعی رو در نظر میگیره.
شکل کلی به این صورت هست که X , Y رو به عنوان نقاط شروع که UpperLeft یا بالای چپ در نظر گرفته شده و Width , Height هم پهنا و ارتفاء یا BottonRigth یا پایین راست در نظر گرفته میشن.

به عنوان مثال :



Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim objGr As Graphics = Me.CreateGraphics
Dim myPen As New Pen(Color.Red)
Dim myRectangle As New Rectangle(10, 10, 100, 50)
objGr.DrawRectangle(myPen, myRectangle)
End Sub

End Class


تو این مثال ما یک کلاس Rectangle با اسم myRectangle تعریف میکنیم که پارامتر های اون به ترتیب به شکل زیر هستن :

1 : مقدار Left یا چپ رو میگیره که ما تو مثال بالا به اون مقدار 10 رو تخصیص دادیم.
2 : مقدار Top یا بالا رو میگیره که ما 10 رو اختصاص دادیم.
3 : مقدار Width یا پهنا رو از ما میگیره که ما عشقمون کشید که 100 بدیم. :قلب:
4 : مقدار Height یا ارتفاع رو از ما میگیره که بازم حال کردیم که 50 بدیم. :قلب:

پس همینطور که میبینید پارامتر های 1و2 UpperLeft هستن و 2و3 BottonRigth

(بابا به خدا خیلی راحت هست فقط باید کمی کار کرد ) :لبخند:

فعلا با اینها هم کار کنید تا ببینیم بعدا چی به سرمون میاد. :بوس:

( این داستان ادامه دارد ... ) :لبخندساده :چشمک:

[m-heidari]

دوستان اگه سوال خاصی داشته باشن مطرح کنند انشاالله که کم نمیاریم.

خوشحال میشم اگه بتونم کمکتون کنم

در ضمن من علاقه دارم که این آموزش رو تا صطح پیشرفته ادامه بدم.
از این بابت خیالتون راحت باشه :چشمک:

[HO457]

دوست عزیز بهتره کار قشنگی که تو این تاپیک داری انجام میدی با آف تاپیک ها خراب نشه، آقای زواری لطف کنن تاپیک دوستمون رو به گفتگوی مهم تبدیل کنن (البته به شرط اینکه ادامه بدی) و آف تاپیک ها رو هم پاک کنن. خودت هم تاپیک رو قفل کن و فقط وقتی میخوای مطلب اضافه کنی بازش کن.
از کارت هم خیلی ممنون.....

[بابک زواری]

دوست عزیز بهتره کار قشنگی که تو این تاپیک داری انجام میدی با آف تاپیک ها خراب نشه، آقای زواری لطف کنن تاپیک دوستمون رو به گفتگوی مهم تبدیل کنن (البته به شرط اینکه ادامه بدی) و آف تاپیک ها رو هم پاک کنن. خودت هم تاپیک رو قفل کن و فقط وقتی میخوای مطلب اضافه کنی بازش کن.
از کارت هم خیلی ممنون.....
بذارید بخش ترجمه کتاب تموم بشه تا از گفتگوی مهم در بیاد و جا باز بشه و هم این تاپیک یک کم پیشرفت کنه ؛ هم آف تاپیک ها پاک میشه و هم گفتگوی مهم میشه .
این مطلب باید به قدر کافی رشد داشته باشه که توجیه گفتگوی مهم رو بتونه انجام بده

[m-heidari]

اگه تا حالا مثال ها و متد هایی که قبلا توضیح دادم رو تمرین کردین و کامل یاد گرفتین آماده بشین که بقیه داستان رو ادامه بدیم.

بعد از متد DrawRectangle نوبت DrawRectangles هست که مثل DrawLines که یه ارایه از کلاس Point یا PointF میگرفت . متد DrawRectangle هم یک آرایه به عنوان پارامتر ورودی از ما میگیره البته بعد از پارامتر اولی که هموطور که گفتم تو همه متد های Draw وجود داره .

این متد ارایه رو میگیره و به تعداد اندیس هایی که تو آرایه وجود دارن با توجه به مقادیر هر کدوم چهارضلعی ها رو میکشه.

با یه مثال آموزش این متد رو هم کامل میکنیم :



فکر نمیکنم نیاز باشه مثال بالا رو توضیح بدم اما اگه لازم باشه سوال کنید.

متد DrawBezier :

این متد چهار تا پارامتر از نوع Point یا PointF میگیره و مابین این چهار نقطه یک کمان ایجاد میکنه.

با چند تا مثال متوجه میشید منظورم چی هست :

یه مثال ساده :



Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim objGr As Graphics = Me.CreateGraphics
Dim myPen As New Pen(Color.Red)
Dim poiOne As New Point(50, 50)
Dim poiTwo As New Point(50, 200)
Dim poiThree As New Point(200, 200)
Dim poiFour As New Point(200, 50)
objGr.DrawBezier(myPen, poiOne, poiTwo, poiThree, poiFour)
End Sub

End Class


یه مثال دیگه که کاملتر متوجه بشین منظورم چی هست :



Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim objGr As Graphics = Me.CreateGraphics
Dim myPen As New Pen(Color.Red)
Dim poiOne As New Point(50, 50)
Dim poiTwo As New Point(50, 200)
Dim poiThree As New Point(200, 200)
Dim poiFour As New Point(200, 50)
objGr.DrawBezier(myPen, poiOne, poiTwo, poiThree, poiFour)
Dim myLinesPen As New Pen(Color.Black)
myLinesPen.Width = 0.2
myLinesPen.DashStyle = Drawing2D.DashStyle.Dot
Dim myLinesPoints() As Point = {poiOne, poiTwo, poiThree, poiFour}
objGr.DrawLines(myLinesPen, myLinesPoints)
End Sub

End Class


تو این مثال برای اینکه بهتر متوجه بشید از متد DrawLines استفاده کردم و Point هایی که برای DrawBezier استفاده کرده بودم رو برای متد DrawLines هم استفاده کردم تا مفهوم اینکه گفتم DrawBezier یک کمان بین نقاط داده شده میکشه وضوح بیشتری پیدا بکنه.

متد DrawBeziers :

این متد هم شباهت هایی که DrawLine با DrawLines و DrawRectangle با DrawRectangles داشتن با DrawBezier داره یعنی یک آرایه به عنوان پارامتر ورودی میگیره و به تعداد اندیس های موجود در آرایه و مقادیر داده شده Bezier میکشه.

مثال :



Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim objGr As Graphics = Me.CreateGraphics
Dim myPen As New Pen(Color.Red)
Dim myPoints() As Point = { _
New Point(50, 50), _
New Point(50, 100), _
New Point(100, 100), _
New Point(100, 50), _
New Point(100, 200), _
New Point(125, 200), _
New Point(125, 50)}
objGr.DrawBeziers(myPen, myPoints)
End Sub

End Class


تو این مثال هم چهار Point اولی کمان اول و چهار Point دیگه کمان دوم رو میکشن.


فعلا این ها رو تمرین کنید تا بقیه آموزشمون آماده بشن

[m-heidari]

متد DrawCurve :

این متد برای کشیدن خطوط خمیده استفاده میشه به صورتی که پارامتری که بعد از قلم دریافت میکند یک آرایه از کلاس Point بوده و نقاطی را که باید به هم وصل شوند را مشخص میکند.

اگر این متد را با دو پارامتر به کار ببریم یعنی پارامتر Pen و آرایه Point در این صورت مقدار خمیدگی ها به حالت پیش فرض 0.5 میبا شد :


Dim objGr As Graphics = Me.CreateGraphics
Dim myPoints1() As Point = { _
New Point(50, 50), _
New Point(50, 150), _
New Point(150, 150), _
New Point(150, 50)}
objGr.DrawCurve(New Pen(Color.Blue), myPoints1)

ولی اگر بخواهیم مقدار خمیدگی نقاط اتصال را خودمان وارد کنیم :


Dim myPoints2() As Point = { _
New Point(50, 200), _
New Point(50, 300), _
New Point(150, 300), _
New Point(150, 200)}
objGr.DrawCurve(New Pen(Color.Red), myPoints2, 0.8)

تو مثال بالا ما مقدار tension یا خمیدگی رو خودمون مقدار دهی کردیم.

و این هم یک مثال کامل :


Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim objGr As Graphics = Me.CreateGraphics
Dim myPoints1() As Point = { _
New Point(50, 50), _
New Point(50, 150), _
New Point(150, 150), _
New Point(150, 50)}
objGr.DrawCurve(New Pen(Color.Blue), myPoints1)
Dim myPoints2() As Point = { _
New Point(50, 200), _
New Point(50, 300), _
New Point(150, 300), _
New Point(150, 200)}
objGr.DrawCurve(New Pen(Color.Red), myPoints2, 0.0)
End Sub

End Class

متد DrawClosedCurve :

این متد دقیقا کار متد DrawCurve رو انجام میده با این تفاوت که انتهای نقطه رو به ابتدای نقطه وصل میکنه یا اگه بخوام بهتر بگم اندیس اخر آرایه Point رو به اندیس اول وصل میکند .

با یه مثال کامل میکنیم :



Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim objGr As Graphics = Me.CreateGraphics
Dim myPoints1() As Point = { _
New Point(50, 50), _
New Point(50, 150), _
New Point(150, 150), _
New Point(150, 50)}
objGr.DrawClosedCurve(New Pen(Color.Blue), myPoints1)
Dim myPoints2() As Point = { _
New Point(50, 200), _
New Point(50, 300), _
New Point(150, 300), _
New Point(150, 200)}
objGr.DrawCurve(New Pen(Color.Red), myPoints2)
End Sub

End Class


تو مثال بالا ما تو هر کدوم از آرایه هامون چهار تا اندیس داریم که در واقع سه تا خط برای ما میتونه مشخص بکنه اما ما با DrawClosedCurve چهار تا خط رو کشیدیم.

متد DrawPolygon :

این متد برای کشیدن چند ضلعی استفاده میشه .

مثال :



Public Class Form1

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim objGr As Graphics = Me.CreateGraphics
Dim myPoints() As Point = { _
New Point(100, 100), _
New Point(50, 150), _
New Point(50, 200), _
New Point(100, 250), _
New Point(150, 250), _
New Point(200, 200), _
New Point(200, 150), _
New Point(150, 100), _
New Point(100, 100)}
objGr.DrawPolygon(Pens.Blue, myPoints)
End Sub

End Class


تو مثال بالا ما یک آرایه Point داریم که 9 تا اندیس داره که یک 8 ضلعی میکشه.
البته اگه اندیس آخر رو از آرایه حذف کنیم فرقی نمیکنه چون این متد هم اندیس اخر رو به اندیس اول وصل میکنه.

ادامه داره ...

[بابک زواری]

اگر ادامه داده نشه از گفتگوی مهم در میاد
قرار بود مطلب تاسطح پیشرفته بره

[m-heidari]

من مسافرت بودم برای همین نتونستم این کار رو انجام بدم.
مهم هم نیست که از گفتگوی مهم در بیاد یا نه چون من به خاطر بقیه دوستان این کار رو شروع کردم . و نیت من این هست که همه از هم استفاده کنن وگرنه من این هارو که میخوام یاد بدم بلدم.
اما من به قولی که دادم عمل میکنم و ادامه میدم البته تا دو سه روز دیگه.

موفق باشید و پیروز.

[بابک زواری]

منم برای شما آرزوی موفقیت میکنم ؛

[j_sayahzadeh]

با سلام خدمت آقا/خانم حیدری
خسته نباشی
واقعا ازت متشکرم به خاطر این حوصله ای که داری .
یک خواهش داشتم. من برنامه تغییر روشنایی تصویر رو می خواستم بنویسم . می خواستم کمکم کنی . متشکرم

[m-heidari]

سلام دوست خوبم من متاسفانه فعلا اصلا وقت ندارم که به این سایت بیام یعنی فعلا نمیتونم روی هیچ پروژه ای کار کنم اما اگه یه کم بیشتر توضیح بدی که منظورت از شفاف کردن چی هست شاید بتونم بعدا کمکت کنم ولی فعلا تا این حد بگم که باید از System.Drawing.Imaging.ImageAttributes استفاده کنی :
خودت کمی کار کن اگه مشکلی داشتی بپرس :

[yas_system]

دوست عزیر بیشترین حالت خمیدگی منحنی در حالت drawcurve ( یا به عبارتی اوج ) چه جوری بدست می آید ؟

[s.asgari]

با سلام
من با vb می خوام برنامه اسکرین سرور (محافظ صفحه ) بنوسیم . از چه توابعی می تونم استفاده کنم .
برنامه طوری باشه که عکس ها رو از کار بر بگیره و او ن روبه برنامه اسکرین سرور تبدیل کنه .

[rezaei manesh]

سلام
ما هم همچنان منتظر ادامه هستیم
دوست عزیز j_sayahzadeh ببین با کم کردین مقدار Opacity مشکلت حل نمی شه؟البته این متد کنترل یا فرمت رو شیشه ای می کنه اما گاهی می شه با کلک از این هم استفاده کرد.

[bahar2008]

سلام دوست عزیز
ممنون از توضیحات کاملی که دادید
حالا من یک سوالی دارم که امیدوارم جوابش رو شما بدونید چون پست جداگانه نوشتم و کسی جوابی نداد :ناراحت:

من با دستورات گرافیکی کارکردم و یک نمودار ساده برای برنامم طراحی کردم ولی وقتی هر دفعه می خوام نمودار قبلی پاک بشه و به جاش نمودار جدید زسم بشه با کد clear مشکل دارم چون در این کد یکی از پارامترهاش color هست و من هر رنگی که استفاده می کنم موقع پاک کردن صفحه برنامم رو همون رنگ در می آره :ناراحت:
من چه پارامتری باید استفاده کنم در این دستور تا موقع پاک کردن رنگ صفحه ام رو عوض نکنه و فقط اون اشکال گرافیکی رو پاک کنه :ناراحت:

[kablayi]

سلام ...
اگه به تاریخ آخرین پست حیدری نگاه کنید میفهمید که ایشون دیگه به سایت سر نمیزنن...

[bahar2008]

ممنون دوست عزیز منم می دونستم کخ خیلی وقته نیومدن ولی چون سوالم مربوط به این تاپیک بود گفتم که تاپیک جدیدی دوباره باز نکنم و شاید کسی در این مورد اطلاعاتی داشته باشه و همینجا بتونه به من کمک کنه

[e.moradnejad]

میشه چیزی رو که کشیدیم تو یه فایل سیو کنیم

[ahmadreza517]

به نام تنها برنامه نویس هستی
سلام دوستان
در آدرس زیر کتابهایی در مورد گرافیک در VB.NET توضیح داده شده است .(2 کتاب در قالب pdf همراه با پروژه)
http://howprg.blogfa.com/post-16.aspx (http://howprg.blogfa.com/post-16.aspx)

امید وارم مفید واقع بشه ...
یاحق