آموزش 18: ساخت اپلیکیشن نقاشی با اپ ایونتر (قسمت 3)

بزرگ و کوچک کردن نقطه

در دو جلسه قبل اپلیکیشن نقاشی ساختیم که ببا رنگ‌های مختلفش قابل استفاده بود. و می‌توانستیم، با ضربه انگشت نقطه بگذاریم. در این جلسه می‌خواهیم نقطه را به اندازه دلخواه بزرگ یا کوچک کنیم.

بخش طراحی

1. در قسمت طراحی سایت اپ ایونتر، از قسمت لایه‌ها ردیف کردن افقی را انتخاب می‌کنیم و در زیر عکس رها می‌کنیم.

2. دو دکمه درون کادر ردیف کردن ایجاد کرده، نام آنها را کوچک (small) و بزرگ(big) می‌گزاریم.

3. اندازه و نام روی آنها را مانند دکمه رنگ‌ها در قسمت دوم تعیین می‌کنیم

بخش ویرایشگر

1. اگر یادتان باشد در  جلسه قبل اندازه بزرگی نقطه (radius)  را 5 تعیین کردیم، و این باعث می‌شد تا همه نقطه‌ها ما یک اندازه باشد. بلوک عدد 5 را بگیرید و در سطل آشغال بیندازید. علامت اخطاری ظاهر می‌شود. نگران نباشید.
2.  از بخش داخلی- ساخته شده (Built-In)  کشوی متغیّرها (Variables) را باز کنید. بلوک نام اولیه به (initialize global name to) را بیرون بکشید. واژه (name) را به کوچک یا (small) دگرگون کنید. نشانه تعجب زردرنگی ظاهر می‌شود که به ما می‌گوید باید در دهانه این بلوک چیزی وارد کنیم.
3.  این قسمت را با شماره پر می‌کنیم. چون مربوط به کوچ است. از بخش ریاضی بلوک صفر را وارد می‌کنیم و آن را تبدیل به دو می‌کنیم.  تا این جا به برنامه گفته‌ایم که اندازه نقطه کوچک ما دو باشد.

به صورت تصویری ببینید:

 حالا همین کار را یکبار دیگر انجام دهید. به جای کوچک بزرگ (big) بنویسید و اندازه آن را هشت تعیین کنید. حالا اندازه نقطه بزرگ هم تعیین شد. 

4-  حالا می‌خواهیم برای جای اندازه (radius)در بلوک گذاشتن نقطه اندازه تعیین کنیم. همان پنجی که آن را دور انداختیم. این همان اندازه اولیه است. گفته شده که در برنامه‌نویسی بهتر است به جای عدد از متن استفاده کنیم. بنابراین می‌خواهیم یم متغیرمتنی را در این جا قرار دهیم.

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

5- حالا از قسمت متغیرها  (Variables) را بیرون می‌کشیم و آن را وارد دهانه اندازه (radius) می‌کنیم.  اگر روی جهت نمای کوچک آن کلیک کنیم، می‌بینیم که منویی باز می‌شود که  متغیرهای کوچک و بزرگ و اندازه اولیه را در خود دارد. ما اندازه اولیه را انتخاب می‌کنیم.

5- کار زیادی باقی نمانده، فقط حالا باید رویداد را به برنامه اضافه کنیم. به برنامه بگوییم وقتی انگشت روی دکمه کوچک زده می‌شود، نقطه  کوچک بگذارد و وقتی دکمه بزرگ را می‌زنیم، نقطه بزرگ بگذارد.

پس  برای اینکار روی دکمه‌ای که درست کردیم. کلیک می‌کنیم. یکبار دکمه بزرگ و بار دیگر دکمه کوچک از کشوی باز شده وقتی دکمه کلیک شود را انتخاب می‌کنیم.

6- از بخش متغیرها () را انتخاب می‌کنیم و وارد دهانه وقتی دکمه کلیک شود را انتخاب می‌کنیم.  جهت نما را  انتخاب می‌کنیم و   گلوبال اندازه اولیه  را انتخاب می‌کنیم. تا اینجا هر دو بلوک کوچک و بزرگ ما به جز اسم بعد از وقتی  شبیه هم هستند.  حالا از قسمت متغیرها (get) را انتخاب می‌کنیم و وارد دهانه کوچک می‌کنیم و متغیر جهت نمای آن را ( گلوبال کوچک ) انتخاب می‌کنیم.  و  برای بزرگ (گلوبال بزرگ)  را وارد دهانه می‌کنیم.

نتیجه نهایی باید چیزی شبیه به تصویر زیر باشد.

نکته: رنگ پیش فرض این برنامه سیاه است. برای تغییر رنگ باید خودتان رنگ را انتخاب کنید.

آموزش 17: ساخت اپلیکیشن نقاشی با اپ ایونتر(قسمت 2)

بخش دوم برنامه نویسی

پس از آن که وارد ویرایشگر شدید.

1- بر روی دکمه سرخ که خودتان نام گزاری کردید، کلیک کنید تا کشوی آن باز شود. از آن وقتی سرخ کلیک شود (when ButtonRed.Click) را انتخاب کنید.

2- بر  روی بوم کلیک کنید. در کشوی باز شده پایین بروید  و بلوک قرار دادن رنگ بر بوم (set DrawingCanvas.PaintColor) را انتخاب کنید.

3- از منوی ساخته شده،کشوی رنگ(Colors) را باز کنید و در میان رنگها بگرید و رنگ سرخ را پیدا کنید. حالا آن را انتخاب کنید و در دهانه قرار دادن رنگ بر بوم بگذارید.

4- برای باقی رنگ‌ها نیز همین کار را انجام دهید.

5- برای دکمه پاک کن: پس از آن که وقتی پاک کن  کلیک شود (when wipe.Click) را انتخاب کردید.بوم را انتخاب کنید و "پاک کردن بوم(call DrawingCanvas.Clear)" را  دهانه آن بگذارید.

اگر برنامه را امتحان کنید می‌بینید که هیچ اتفاقی در صفحه نمی‌افتد. 

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

6-  روی بوم کلیک کنید و از انتخاب‌هایتان وقتی بوم لمس شد(when DrawingCanvas.Touched)  را انتخاب کنید. می بینید که سه نقطه در آن روشن است. x, y, و touchedSprite.  

می‌توانیم دو حالت (get) و (set) را انتخاب کنیم.

7- برای این که بتوانیم در جای دلخواه نقطه بگذاریم.  از کشوی بوم، "صدا زدن بوم برای کشیدن دایره  (call DrawingCanvas.DrawCircle)" را انتخاب می‌کنیم و داخل دهانه "وقتی بوم لمس شد "می‌گذاریم. می‌بینید که این بلوک جدید چهار دهانه دارد، که یکی از قبل پرشده است.  از سه دهانه دو تا مربوط به محور مختصات نقطه است. روی (x) و (y) که می‌رویم (get x) و (get y) را انتخاب می‌کنیم و در جای خودشان می‌گذاریم. دهانه بعدی اندازه نقطه را مشخص می‌کند.  از قسمت ریاضی (math) صفر را انتخاب می‌کنیم و داخل (radius) می‌گذاریم و اندازه آن را  به 5 یا 4  دگرگونه می‌کنیم.

توجه کنید که تغییر ضخامت خط را بعدتر می‌آموزیم. در حال حاضر فقط یک اندازه را یاد می‌گیریم.

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

این نکته‌ای است که تازه آموختیم.

 

8- حالا در ادامه مثل آموزش قبل رویداد کشیدن خط را انتخاب می‌کنیم و همان موارد را انجام می‌دهیم. اگر یادتان رفته لینک زیر را دوباره مطالعه کنید.

آموزش 15: ساخت اپلیکیشن صفحه نقاشی با اپ ایونتر

 

 

در آموزش بعدی می‌آموزیم که اندازه نقطه را چطور تغییر بدهیم.

آموزش بعد