فصل ششم : برنامه نویسی گرافیکی

تاکنون در تمام مثال‌هایمان، از TextWindow برای نمایش خروجی برنامه های Small Basic استفاده کرده‌ایم.

با این حال، Small Basic دارای مجموعه‌ای از قابلیت‌های گرافیکی قدرتمند می باشد که در این فصل شروع به بررسی آن‌ها خواهیم کرد.

معرفی GraphicsWindow

همانطور که دیدیم TextWindow به ما اجازه می داد که با متون و اعداد کار کنیم.

حال می خواهیم در Small Basic از GraphicsWindow برای ترسیم اشکال مختلف استفاده کنیم.

بیایید کار را با نمایش صفحه خروجی  GraphicsWindow شروع کنیم:

()GraphicsWindow.Show

هنگامی که این برنامه را اجرا می کنید، متوجه خواهید شد که به جای پنجره متن سیاه معمولی، یک پنجره سفید مانند تصویر زیر دریافت می کنید.

این پنجره پایه ای خواهد بود که برنامه های گرافیکی این فصل را روی آن کار خواهیم کرد.

می توانید این پنجره را با کلیک بر روی دکمه “X” در گوشه بالا سمت راست ببندید.

شکل ۱-۶ : یک پنجره گرافیک خالی

راه اندازی و تنظیمات پنجره گرافیکی

پنجره گرافیکی به شما این امکان را می دهد که ظاهر آن را مطابق میل خود شخصی سازی کنید.

می توانید عنوان، پس زمینه و اندازه آن را تغییر دهید. بیایید جلو برویم و کمی آن را اصلاح کنیم تا با این پنجره بیشتر آشنا شویم:

“GraphicsWindow.BackgroundColor = “SteelBlue

“GraphicsWindow.Title = “My Graphics Window

GraphicsWindow.Width = 320

GraphicsWindow.Height = 200

()GraphicsWindow.Show

در اینجا پنجره گرافیکی سفارشی شده ای نشان داده شده است. می‌توانید رنگ پس‌زمینه را با یکی از مقادیر متعدد فهرست‌شده در ضمیمه A تغییر دهید.

با مقادیر این ویژگی‌ها بازی کنید تا ببینید چگونه می‌توانید ظاهر پنجره را تغییر دهید.

شکل ۲-۶ : پنجره گرافیکی سفارشی شده

ترسیم خطوط

هنگامی که از GraphicsWindow استفاده می کنیم، می‌توانیم اشکال، متون و حتی تصاویر را روی آن بکشیم.

بیایید با کشیدن چند شکل ساده شروع کنیم.

در اینجا برنامه ای وجود دارد که چند خط روی پنجره گرافیکی ترسیم می کند:

GraphicsWindow.Width = 200

GraphicsWindow.Height = 200

GraphicsWindow.DrawLine(10, 10, 100, 100)

GraphicsWindow.DrawLine(10, 100, 100, 10)

شکل ۳-۶ : رسم خطوط متقاطع

دو خط اول برنامه طول و عرض پنجره را تنظیم می کند و دو خط بعدی خطوط متقاطع را ترسیم می کند.

دو عدد اول که به دنبال DrawLine می آیند مختصات x و y شروع و دو عدد دیگر مختصات x و y انتهایی را مشخص می کنند.

توجه نمایید که در گرافیک کامپیوتری مختصات (۰، ۰) از گوشه سمت چپ بالای پنجره شروع می شود.

توجه: به جای استفاده از نام برای رنگ ها می توانید از نماد رنگی وب (#RRGGBB) استفاده کنید. به عنوان مثال، #FF0000 نشان دهنده قرمز، #FFFF00 برای زرد و … است.

در مورد رنگ ها در بخش مربوط به رنگ ها بیشتر خواهیم آموخت.

شکل ۴-۶ _ نقشه مختصات

اگر به برنامه رسم خط برگردیم، جالب است بدانید که Small Basic به شما امکان می‌دهد تا ویژگی‌های خط، مانند رنگ و ضخامت آن را تغییر دهید.

ابتدا رنگ خطوط را همانطور که در برنامه زیر نشان داده شده است تغییر می دهیم:

GraphicsWindow.Width = 200

GraphicsWindow.Height = 200

“GraphicsWindow.PenColor = “Green

GraphicsWindow.DrawLine(10, 10, 100, 100)

“GraphicsWindow.PenColor = “Gold

GraphicsWindow.DrawLine(10, 100, 100, 10)

شکل ۵-۶ : تغییر رنگ خط

حالا بیایید اندازه ضخامت خط را نیز تغییر دهیم.

در برنامه زیر، ضخامت خطوط را به جای پیش فرض که ۱ است به ۱۰ تغییر می دهیم:

GraphicsWindow.Width = 200

GraphicsWindow.Height = 200

GraphicsWindow.PenWidth = 10

“GraphicsWindow.PenColor = “Green

GraphicsWindow.DrawLine(10, 10, 100, 100)

“GraphicsWindow.PenColor = “Gold

GraphicsWindow.DrawLine(10, 100, 100, 10)

شکل ۶-۶ : خطوط ضخیم رنگی

PenWidth و PenColor خصوصیات قلمی را که این خطوط با آن ترسیم شده اند را تغییر می دهند.

آنها نه تنها روی خطوط، بلکه بر هر شکلی که پس از تنظیم ویژگی های آنها ترسیم می شود نیز تأثیر می گذارند.

با استفاده از دستورات حلقه ای که در فصل های قبل یاد گرفتیم، می توانیم به راحتی برنامه ای بنویسیم که چندین خط با افزایش ضخامت قلم رسم کند:

“GraphicsWindow.BackgroundColor = “Black

GraphicsWindow.Width = 200

GraphicsWindow.Height = 160

“GraphicsWindow.PenColor = “Blue

For i = 1 To 10

GraphicsWindow.PenWidth = i

GraphicsWindow.DrawLine(20, i * 15, 180, i * 15)

endfor

شکل ۷-۶ : رسم خطوط با ضخامت های مختلف

رسم اشکال توخالی و توپر

وقتی صحبت از رسم اشکال می شود، معمولاً دو نوع عملیات برای هر شکل وجود دارد. آنها عملیات Draw و Fill هستند.

عملیات Draw طرح کلی شکل را با استفاده از قلم ترسیم می کند و عملیات Fill شکل را به صورت رنگ شده ترسیم می کند.

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

GraphicsWindow.Width = 400

GraphicsWindow.Height = 300

 “GraphicsWindow.PenColor = “Red

GraphicsWindow.DrawRectangle(20, 20, 300, 60)

“GraphicsWindow.BrushColor = “Green

GraphicsWindow.FillRectangle(60, 100, 300, 60)

شکل ۸-۶ : رسم اشکال و رنگ کردن آن ها

برای رسم یک مستطیل توخالی و توپر به چهار عدد نیاز دارید. دو عدد اول مختصات X و Y را برای گوشه سمت چپ بالای مستطیل نشان می‌دهند. عدد سوم عرض مستطیل و عدد چهارم ارتفاع آن را مشخص می کند.

در واقع، همانطور که در برنامه زیر نشان داده شده است، در مورد ترسیم و پر کردن بیضی ها نیز همینطور است:

GraphicsWindow.Width = 400

GraphicsWindow.Height = 300

 “GraphicsWindow.PenColor = “Red

GraphicsWindow.DrawEllipse(20, 20, 300, 60)

“GraphicsWindow.BrushColor = “Green

GraphicsWindow.FillEllipse(60, 100, 300, 60)

شکل ۹-۶ : رسم بیضی توخالی و توپر

دایره، حالتی خاص از بیضی می باشد. اگر می خواهید دایره بکشید، باید در دستور رسم بیضی، اندازه عرض و ارتفاع را برابر قرار دهیم:

GraphicsWindow.Width = 400

GraphicsWindow.Height = 300

 “GraphicsWindow.PenColor = “Red

GraphicsWindow.DrawEllipse(20, 20, 100, 100)

 “GraphicsWindow.BrushColor = “Green

GraphicsWindow.FillEllipse(100, 100, 100, 100)

شکل ۱۰-۶ : رسم دایره

ترجمه و تألیف : کامبیز حسامی

تهیه شده در : تیناسافت

بازگشت به صفحه اصلی آموزش اسمال بیسیک