Основні питання, які виникають при розробці проєкту:
- як можна малювати кола на формі?
- як зробити, щоб при натисканні по колу він змінював колір?
- як перевіряти чи можна зробити натупний крок?
Засоби малювання на формі
Щоб відповісти на перше питання, спочатку потрібно взагалі розібратися що таке область малювання і як можна вивести на формі наприклад прямокутник або коло?
Це питання розглянуто у цій статті: http://it-game.sfera.org.ua/2022/04/gdi-dotnet.html
Проєкт DemoDrawEllipse - малюємо пола різного кольору
Проєкт на Visual Basic
1. У Visual Studio 2022 створіть новий проект Windows Forms App, назва прооєкту DemoDrawEllipse.
2. Зменшіть розмір форми, встановіть заголовок форми Demo DrawEllipse.
3. Розташуйте на формі три елементи Label. Встановіть розміри елементів 50, 50, властивостям Text задайте значення 10, 20 та 30, щоб нам було простіше розрізняти елементи на формі.
4. Клацніть на елементі Label1, у вікні Properties перейдіть до вкладки Events (Події), знайдіть подію Paint. Двічі натисніть на рядку з подіїю Paint, відкриється редактор коду:
Private Sub Label1_Paint(sender As Object, e As PaintEventArgs) Handles Label1.Paint
End Sub
У редакторі коду введіть наступний рядок:
e.Graphics.DrawEllipse(Pens.Red, 0, 0, 50, 50)
Ця команда виводить коло червоним пером у правому верхньому куті, розміри кола - 50 пікселей шириною та 50 пікселей висотою. Розміри кола як раз відповідають розмірам елемента Label.
5. Клацніть на елементі Label2, у вікні Properties перейдіть до вкладки Events (Події), знайдіть подію Paint. Двічі натисніть на рядку з подіїю Paint, у редакторі коду введіть наступний текст:
Dim myBrush As Brush
myBrush = New SolidBrush(Color.Coral)
e.Graphics.FillEllipse(myBrush, 0, 0, 50, 50)
6. Запустіть програму на виконання. Вікно повинно мати такий вигляд:
Що ми бачимо на формі? Перше коло обрізане з правого та нижнього краю, це ми потім виправимо на нижньому колі. А на другому колі взагалі не видно цифр 20, ці цифри замалювалися колорьом. Щоб було видно цифри, потрібно замальовувати не суцільною кистю, а встановити прозорість. Давайте це зробимо.
7. Клацніть на елементі Label3, у вікні Properties перейдіть до вкладки Events (Події), знайдіть подію Paint. Двічі натисніть на рядку з подіїю Paint, у редакторі коду введіть наступний текст:
Dim semiTransBrush As New SolidBrush(Color.FromArgb(128, 0, 0, 255))
e.Graphics.FillEllipse(semiTransBrush, 0, 0, 50, 50)
8. Запустіть програму на виконання. Вікно повинно мати такий вигляд:
9. Клацніть на елементі Label4, у вікні Properties перейдіть до вкладки Events (Події), знайдіть подію Paint. Двічі натисніть на рядку з подіїю Paint, у редакторі коду введіть наступний текст:
e.Graphics.DrawEllipse(Pens.Red, 0, 0, 49, 49)
10. Запустіть програму на виконання. Вікно повинно мати такий вигляд:
Зараз все гаразд. Тепер ми знаємо як виводити прозорі кола, та кола з фоном іншого кольору.
Не забудьте зберегти проєкт.
Проєкт на Visual C#
Візуальна частина проєкту на Visual C# створюється аналогічно проекту на Visual Basic. Різниця буде лише у коді. Ось повний код програми на Visual C#:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace DemoDrawEllipse
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Label1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawEllipse(Pens.Red, 0, 0, 50, 50);
}
private void Label2_Paint(object sender, PaintEventArgs e)
{
Brush myBrush;
myBrush = new SolidBrush(Color.Coral);
e.Graphics.FillEllipse(myBrush, 0, 0, 50, 50);
}
private void Label3_Paint(object sender, PaintEventArgs e)
{
Brush semiTransBrush = new SolidBrush(Color.FromArgb(128, 0, 0, 255));
e.Graphics.FillEllipse(semiTransBrush, 0, 0, 50, 50);
}
private void Label4_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawEllipse(Pens.Red, 0, 0, 49, 49);
}
}
}
Що далі?
Наступного разу ми створимо форму для нашого майбутнього проекту, тобто створимо новий проєкт та розташуємо на формі необхідні елементи - елементи Label, фонові зображення щоб відмітити початок та кінець лабіринту, добавимо текст для пояснення користувачю що йому потрібно робити в цій програмі.