آموزش ساخت برنامه پینت (نقاشی) در #C
سلام بر برنامه نویسان سی شارپ . در این مطلب آموزشی سی شارپ ، یاد می گیرید که یک برنامه paint یا همون نقاشی بسازید به طوری که کاربر با کشیدن موس روی صفحه ، بتونه عملیات کشیدن و نقاشی رو انجام بده و به ترسیم اشکال هندسی بپردازه و همچنین بتونه ضخامت قلم رو تغییر بده و رنگ بوم نقاشی رو تغییر بدهد و همچنین اندازه ی اشکال هندسی را تعیین کند.همچنین قابلیت ساخت پروژه جدید و پاک کردن بوم نقاشی هم وحود دارد.
پس از پایان آموزش شما می تونید پروژه ای شبیه به تصاویر زیر بسازید:
همچنین در این آموزش متدهای کار با گرافیک و رویدادهای مختف ماوس و … نیز توضیح داده شده و کدها نیز بررسی شده اند.
برای مشاهده ی کامل این آموزش و دانلود سورس کد ، می توانید عضو vip سایت شوید.
مراحل ساخت پروژه:
ابتدا سعی کنید فرمی مانند تصویر زیر بسازید یا می توانید سورس کد این پروژه را دانلود کنید تا وقتتان صرف طراحی فرم نشود:
کنترل های اصلی فرم شامل :
- یک combobox برای تعیین اندازه قلم با نام cmb_PenSize
- یک دکمه برای تعیین رنگ قلم که با کلیک شدن روی آن color dialog باز می شود و کاربر می تواند رنگ قلم را انتخاب کند با نام btn_PenColor
- و یک دکمه برای تعیین رنگ بک گراند (رنگ بوم نقاشی) با نام btn_CanvasColor
- یک دکمه برای رسم مربع با نام btn_Square
- یک دکمه برای رسم مستطیل با نام btn_Rectangle
- یک دکمه برای رسم دایره با نام btn_Circle
- یک text box برای تعیین اندازه شکل با نام txt_ShapeSize
- یک پنل برای کار اصلی این برنامه یعنی نقاشی کشیدن با نام pnl_Draw
- و یک menuStrip با نام menuStrip1 برای ساخت منوی بالایی برنامه و ساخت پروژه جدید و درباره و خروج
خب ابتدای کار کدهای زیر :
{
public Form1()
{
InitializeComponent();
}
را به این صورت تغییر دهید:
{
public Form1()
{
InitializeComponent();
g = pnl_Draw.CreateGraphics();
}
bool startPaint = false;
Graphics g;
//nullable int for storing Null value
int? initX = null;
int? initY = null;
bool drawSquare = false;
bool drawRectangle = false;
bool drawCircle = false;
پس از آن در رویداد MouseMove مربوط به پنل pnl_Draw که پنل اصلی برنامه هست ، کدهای زیر را وارد کنید:
{
//Setting the Pen BackColor and line Width
Pen p = new Pen(btn_PenColor.BackColor,float.Parse(cmb_PenSize.Text));
//Drawing the line
// The DrawLine method draws a line between two points specified by a pair of coordinates. DrawLines draws a series of lines using an array of points.
// DrawLine has four overloaded methods. The first argument of all DrawLine methods is a Pen object, with texture, color, and width attributes. The rest of the arguments vary. You can use two points with integer or floating point values, or you can pass four integer or floating point values directly
g.DrawLine(p, new Point(initX ?? e.X, initY ?? e.Y), new Point(e.X, e.Y));
initX = e.X;
initY = e.Y;
}
رویداد MouseMove مربوط به موقعی است که کاربر ماوسش را روی پنل حرکت می دهد.
کلاس Pen برای رسم خط و منجنی به کار می رود.ابتدا پارمتر مربوط به رنگ رو باید ارسال کنید که در اینجا btn_PenColor.BackColor می باشد و همان رنگ بک گراند دکمه ی پایین کامبو باکس است که کاربر با کلیک کردن بر روی آن می تواند color dialog را مشاهده کند و یک رنگ از درون آن انتخب کند و رنگی که کاربر انتخاب می کند رنگ بک گراند دکمه می شود و در این جا هم رنگ قلم از رنگ بک گراند دکمه گرفته می شود و پس از آن هم باید پارامتر ضخامت (width) رو ارسال کنید که صخامت قلم را کاربر می تواند از کامبوباکس انتخاب کند و می تواند یکی از مقادیر 1 و 2 و 3 و 4 را انتخاب کند که اگر خواستید می توانید عددهای بیشتری خودتان انتخاب کنید.
کد خط بعدی که مربوط به DrawLine هست ، با استفاده از این کد شما می تونید قابلیت رسم کردن و نقاشی کردن رو به کاربر بدهید به این صورت که پارامتر اول p هست که مربوط به کد خط قبلی است و قلم خط را مشخص میکند و پارامتر دوم هم
برای اطلاعات بیش تر درباره Draw Line در سی شارپ به این لینک و این لینک مراجعه کنید.
برای اطلاعات بیش تر درباره عملگر ?? به این لینک مراجعه کنید.
برای اطلاعات بیش تر درباره E.x به این لینک مراجعه کنید.
پس از آن در رویداد MouseDown پنل pnl_Draw کدهای زیر را وارد کنید:
if (drawSquare)
{
//Use Solid Brush for filling the graphic shapes
SolidBrush sb = new SolidBrush(btn_PenColor.BackColor);
//setting the width and height same for creating square.
//Getting the width and Heigt value from Textbox(txt_ShapeSize)
g.FillRectangle(sb, e.X, e.Y, int.Parse(txt_ShapeSize.Text), int.Parse(txt_ShapeSize.Text));
//setting startPaint and drawSquare value to false for creating one graphic on one click.
startPaint = false;
drawSquare = false;
}
if(drawRectangle)
{
SolidBrush sb = new SolidBrush(btn_PenColor.BackColor);
//setting the width twice of the height
g.FillRectangle(sb, e.X, e.Y, 2*int.Parse(txt_ShapeSize.Text), int.Parse(txt_ShapeSize.Text));
startPaint = false;
drawRectangle = false;
}
if(drawCircle)
{
SolidBrush sb = new SolidBrush(btn_PenColor.BackColor);
g.FillEllipse(sb, e.X, e.Y, int.Parse(txt_ShapeSize.Text), int.Parse(txt_ShapeSize.Text));
startPaint = false;
drawCircle = false;
}
این رویداد وقتی اتفاق می افتد که که نشانه گر ماوس روی پنل باشد و کاربر هم ماوس را فشرده باشد.
حالا در رویداد MouseUp پنل pnl_Draw کدهای زیر را وارد کنید:
initX = null;
initY = null;
این رویداد وقتی اتفاق می افتد که کاربر موس را رها کرده باشد.
حالا باید کاربرد متغیر startPaint که از نوع boolean هست رو بفهمید.در ابتدای کار که این متغیر تعریف شد ، مقدار آن false قرار داده شد و در رویداد MouseDown پنل مقدار آن true قرار داده شد که به این معنی است که اگر کاربر روی پنل کلیک کرد و موسش را فشار داد ، مقدار آن را برابر true کن و بعد از وقتی که کاربر کلیک کرد ، اگر موسش را هم حرکت داد (رویداد MouseMove) باید چک کنی که آیا متغیر startPaint مقدارش true است یا false و اگر true بود ، عملیات مربوط به نقاشی و رسم رو در پنل انجام بده و اگر این شرط چک نمی شد ، بدون اینکه کاربر موسش را فشار دهد ، زمانی که موسش روی پنل حرکت می کند ، نقاشی کشیده می شود یعنی بدون اینکه کاربر MouseDown کرده باشد ، متد DrawLine اجرا می شود.
این نکته رو هم بگم که اگر در شرط (به طور مثال کد زیر: )
به این معنی هست که چک کن که آیا مقدار startPaint برابر true می باشد؟ و اگر جواب بله بود کدهای درون if را اجرا کن.
در رویداد MouseDown پنل ، پس از اینکه مقدار startPaint برابر true می شود ، 3 تا شرط وجود دارد ، اولین شرط کد زیر می باشد:
{
//Use Solid Brush for filling the graphic shapes
SolidBrush sb = new SolidBrush(btn_PenColor.BackColor);
//setting the width and height same for creating square.
//Getting the width and Heigt value from Textbox(txt_ShapeSize)