Назад Вперед Зміст

Малювання на формі та PictureBox (Підготовка до проекту «Візуалізація графа»)

Основи роботи з Graphics

Для роботи з графікою використовується клас Graphics з простору імен System.Drawing.

Методи створення "холста"

1. Безпосередньо на формі:

   Graphics g = this.CreateGraphics();

2. Через PictureBox:

   Bitmap buf = new Bitmap(pictureBox1.Width, pictureBox1.Height);
   Graphics g = Graphics.FromImage(buf);

Приклади реалізації

protected override void OnPaint(PaintEventArgs e) {
    e.Graphics.DrawRectangle(new Pen(Color.Blue), 10, 10, 100, 50);
}

HatchBrush brush = new HatchBrush(
    HatchStyle.DiagonalCross, 
    Color.Red, 
    Color.Yellow);
e.Graphics.FillEllipse(brush, 50, 50, 150, 100);

Детальна теорія штриховки (HatchBrush)

HatchBrush (кисть зі штриховкою) використовується для заповнення фігур візерунком, що складається з комбінації ліній, крапок або інших геометричних елементів. На відміну від суцільної заливки (SolidBrush), штрихова кисть створює декоративний фон, який часто застосовують для виділення областей, позначення різних типів даних або створення графічних ефектів.

Основні властивості та конструктори

Клас HatchBrush має кілька конструкторів:

// 1. З вказанням стилю штриховки та кольору переднього плану
HatchBrush brush1 = new HatchBrush(HatchStyle.Cross, Color.Blue);

// 2. З вказанням стилю, кольору переднього плану та кольору фону
HatchBrush brush2 = new HatchBrush(HatchStyle.DiagonalCross, Color.Red, Color.Yellow);

// 3. З вказанням стилю, кольору переднього плану та прозорого фону
HatchBrush brush3 = new HatchBrush(HatchStyle.Percent50, Color.Green); // фон буде прозорим (Transparent)

ForegroundColor (передній план) — колір ліній або елементів штриховки. BackgroundColor (фон) — колір, яким заповнюється простір між елементами штриховки. Якщо фон не задано, він вважається прозорим, тобто буде видно вміст, що знаходиться під фігурою.

Перелік стилів штриховки (HatchStyle)

Перелічення HatchStyle містить понад 50 різних візерунків. Найбільш уживані з них:

Практичний приклад: демонстрація різних стилів

Наступний код малює серію прямокутників, кожен з яких заповнений різним стилем штриховки. Це дозволяє швидко оцінити вигляд візерунків.

private void DrawHatchStyles(Graphics g)
{
    // Масив найменувань стилів
    HatchStyle[] styles = {
        HatchStyle.Cross,
        HatchStyle.DiagonalCross,
        HatchStyle.ForwardDiagonal,
        HatchStyle.BackwardDiagonal,
        HatchStyle.Horizontal,
        HatchStyle.Vertical,
        HatchStyle.Percent50,
        HatchStyle.Shingle,
        HatchStyle.Sphere,
        HatchStyle.LargeConfetti
    };

    int x = 10, y = 10;
    int width = 100, height = 60;
    int gap = 10;

    // Для кожного стилю створюємо кисть і малюємо прямокутник
    for (int i = 0; i < styles.Length; i++)
    {
        // Використовуємо різні кольори переднього плану та фону
        Color foreColor = Color.FromArgb(255, (i * 25) % 255, 0, 0);
        Color backColor = Color.FromArgb(255, 255, 255, (i * 30) % 255);
        using (HatchBrush brush = new HatchBrush(styles[i], foreColor, backColor))
        {
            g.FillRectangle(brush, x, y, width, height);
        }
        // Підпис стилю
        g.DrawString(styles[i].ToString(), this.Font, Brushes.Black, x, y + height + 2);
        
        // Перехід до наступної позиції
        x += width + gap;
        if (x + width > this.ClientSize.Width)
        {
            x = 10;
            y += height + 40; // враховуємо висоту підпису
        }
    }
}

// Виклик у події Paint:
protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
    DrawHatchStyles(e.Graphics);
}

Комбінування з іншими методами

Штриховку можна використовувати не лише для прямокутників, але й для будь-яких фігур: еліпсів, багатокутників, областей (Region) тощо. Наприклад, заповнення еліпса зі штриховкою HatchStyle.DiagonalCross:

using (HatchBrush brush = new HatchBrush(HatchStyle.DiagonalCross, Color.DarkBlue, Color.LightGray))
{
    e.Graphics.FillEllipse(brush, 20, 20, 150, 100);
}

Важливі зауваження

• Клас HatchBrush успадковує від Brush і реалізує IDisposable, тому завжди викликайте Dispose() або використовуйте конструкцію using.
• Колір фону штрихової кисті можна зробити прозорим, передавши Color.Transparent або не вказуючи третій параметр конструктора.
• При використанні великої кількості штрихових кистей в одному малюнку слідкуйте за продуктивністю: створення та знищення кистей – відносно дешева операція, але все ж краще перевикористовувати їх, якщо візерунок повторюється.
• Штриховка не масштабується автоматично при зміні розмірів фігури: візерунок залишається однакового розміру, просто обрізається по межі фігури.

Додатковий приклад: малювання на PictureBox з використанням штриховки

У попередньому прикладі ми малювали безпосередньо на формі. Але часто зручніше використовувати компонент PictureBox для відображення графіки, особливо якщо потрібно зберегти зображення або уникнути мерехтіння. Для цього застосовується буферизація: створюється об'єкт Bitmap, на ньому виконується малювання, а потім він призначається властивості Image компонента.

Код для малювання на PictureBox

private void DrawOnPictureBox()
{
    // Створюємо буфер (Bitmap) розміром з PictureBox
    Bitmap buf = new Bitmap(pictureBox1.Width, pictureBox1.Height);
    
    // Отримуємо графічний контекст для малювання на буфері
    using (Graphics g = Graphics.FromImage(buf))
    {
        // Очищаємо фон білим кольором
        g.Clear(Color.White);
        
        // Малюємо штрихований еліпс
        using (HatchBrush brush = new HatchBrush(HatchStyle.Sphere, Color.Purple, Color.Lavender))
        {
            g.FillEllipse(brush, 20, 20, 200, 150);
        }
        
        // Додатково можна намалювати контур
        using (Pen pen = new Pen(Color.DarkSlateBlue, 2))
        {
            g.DrawEllipse(pen, 20, 20, 200, 150);
        }
    }
    
    // Виводимо готове зображення на PictureBox
    pictureBox1.Image = buf;
}

Викликати цей метод можна, наприклад, у обробнику події натискання кнопки:

private void buttonDraw_Click(object sender, EventArgs e)
{
    DrawOnPictureBox();
}

Або у конструкторі форми після ініціалізації компонентів, якщо потрібно одразу показати зображення.

Варіанти завдань

Варіант	Завдання	Складність
1	Намалювати заповнений прямокутник	★☆☆
1		—
2		—
3		—
4		—
5		—
6		—
7		—
8		—
9		—
10		—
11		—
12		—
13		—
14		—
15		—
16		—
17		—

Назад Вперед Зміст