Лабораторна робота “Побудова простого текстового редактора. Частина 1”

Лабораторна робота “Побудова простого текстового редактора. Частина 1”

Мета: Засвоїти методи створення обробників подій OnCreate, OnDestroy для компоненту Form. Засвоїти основні методи компоненту Image, що їх використовують для побудови простих графічних редакторів. Навчитись застосовувати діалог OpenPictureDialog і головне меню MainMenu у реальних додатках.

Теоретичні основи

Під графічним редактором розуміють інтерактивний додаток, що дозволяє користувачеві виконувати стандартний набір дій з обробки графічних файлів. Основними у ньому є наступні дії:

·  Відкривання вже існуючого або створення нового (пустого) графічного файлу;

·  Збереження створеного або зміненого файлу у пам’яті ЕОМ;

·  Зміну основного кольору малювання та кольору фону;

·  Використання інструментів малювання (олівець, пензель, аерограф, тощо);

·  Використання буферу обміну для копіювання, вирізання і вставки фрагментів зображення або усього графічного файлу.

В першій частині лабораторної роботи передбачається створення оболонки графічного редактора, елементарної системи меню з двома пунктами (Файл і Правка), палітри кольорів з підтримкою 10 кольорів, індикаторів кольорів малювання та фону, двома інструментальними кнопками (Пензель і Вибір кольору).

Послідовність створення простого графічного редактора.

1. Створити новий проект за допомогою пунктів меню File/New/Application. Та ж сама дія виникає при старті середовища Borland C++ Builder 6.

2. Перенести до форми два компоненти типу Image (20 х 20 пікселів) з панелі компонентів Additional і розташувати їх в нижній частині форми. Це будуть вікна основного і фонового кольорів. Імена цих компонентів - Image1 і Image2.

3. Перенести до форми ще один компонент типу Image (Image3) і розташувати його у верхній частині форми, відступивши дещо від лівого краю, де буде знаходитись панель інструментів. Компонент треба розтягнути таким чином, щоб він займав основну частину форми. Це буде полотно для малювання.

4. Перенести до форми ще один компонент типу Image (Image4) і розташувати його унизу праворуч від двох перших і на одному рівні із ними. Це буде палітра кольорів графічного редактора. Її висота має бути такою ж, як у компонентів Image1 і Image2, а довжина – в 10 разів більшою (20 х 200 пікселів).

5. Перенести на форму кнопку типу TSpeedButton з панелі компонентів Additional і розташувати її у лівому верхньому куті форми. Ця кнопка буде відповідати інструменту Пензель – типовому інструменту графічних редакторів. Назва кнопки, що вона її має по замовчуванню, має бути змінена на SBBrush. Далі слід встановити її властивість GroupIndex, такою, що дорівнює 1, а властивість AllowAllUp – true. Дані властивості забезпечать можливість фіксації кнопки у натиснутому і не натиснутому станах. Бажано створити піктограму пензля у вигляді bmp - файлу (20 х 20 пікселів) і завантажити її до властивості кнопки Glyph. Далі слід встановити її властивість GroupIndex, такою, що дорівнює 1, а властивість AllowAllUp – true. Аналогічно до попередньої, також бажано створити піктограму пензля у вигляді bmp - файлу (20 х 20 пікселів) і завантажити її до властивості кнопки Glyph.

6. Перенести на форму ще одну кнопку типу TSpeedButton з панелі компонентів Additional і розташувати її нижче кнопки SBBrush. Ця кнопка буде відповідати інструменту вибору основного і фонового кольорів. Назва кнопки, що вона її має по замовчуванню, має бути змінена на SBColor.

7. Перенести до форми діалог OpenPictureDialog з панелі компонентів Dialogs.

8. Перенести до форми головне меню MainMenu. В меню створити розділ Файл з підрозділом Відкрити, що має мати назву MOpen. Створити ще один розділ – Правка з підрозділом Відмінити, що має мати назву Undo. На цьому розміщення компонентів і налаштування їх властивостей закінчено і можна переходити до написання методів для обробки їх подій. Почати слід з другорядних обробників подій.

9. До заготовочного файлу Unit1.h слід додати оператор, що створює об’єкт BitMap типу TBitmap.

Graphics::TBitmap *BitMap = new Graphics::TBitmap;

В цьому об’єкті буде зберігатися зображення, щоб його було можливо відновити командою Правка / Відмінити.

10. Для події OnCreate форми слід написати обробник:

Image1->Canvas->Brush->Color = clBlack;

Image2->Canvas->Brush->Color = clWhite;

Image1->Canvas->FillRect (Rect(0,0,Image1->Width, Image1->Height));

Image2->Canvas->FillRect (Rect(0,0,Image2->Width, Image2->Height));

int HW = Image4->Width / 10;

for(int i = 1; i<=10; i++)

{

switch (i)

{

case 1: Image4->Canvas->Brush->Color = clBlack; break;

case 2: Image4->Canvas->Brush->Color = clAqua; break;

case 3: Image4->Canvas->Brush->Color = clBlue; break;

case 4: Image4->Canvas->Brush->Color = clFuchsia; break;

case 5: Image4->Canvas->Brush->Color = clGreen; break;

case 6: Image4->Canvas->Brush->Color = clLime; break;

case 7: Image4->Canvas->Brush->Color = clMaroon; break;

case 8: Image4->Canvas->Brush->Color = clRed; break;

case 9: Image4->Canvas->Brush->Color = clYellow; break;

case 10: Image4->Canvas->Brush->Color = clWhite; break;

}

Image4->Canvas->Rectangle((i-1)*HW,0,i*HW, Image4->Height);

}

Image3->Canvas->MoveTo(0,0);

Image3->Canvas->LineTo(Image3->Width, Image3->Height);

Image3->Canvas->MoveTo(0,Image3->Height);

Image3->Canvas->LineTo(Image3->Width,0);

BitMap->Assign(Image3->Picture);

Хоча обробник дещо довгий, втім він достатньо простий. Спочатку визначаються властивості пензля для вікон основного (Image1) й фонового (Image2) кольорів: чорний і білий. Вікна заливаються відповідним кольором за допомогою методу FillRect. Після цього формується палітра кольорів: для кожного елементу палітри визначається свій колір і елемент заповнюється цим кольором за допомогою методу Rectangle. Потім на полотні Image3 малюється діагональний хрест. Він має суто демонстраційне призначення – дати користувачеві можливість перевірити працездатність редактора на простому зображенні з чотирма замкненими областями. В реальному додатку такої потреби немає і оператори, що малюють хрест, можна виключити. Останній рядок методу забезпечує збереження усього намальованого на канві в об’єкті BitMap методом Assign.

11. Для події OnDestroy форми слід записати обробник, що звільняє пам'ять після закриття додатку:

BitMap->Free();

12. Для обробки події клацання мишею на підпункті Відкрити потрібен наступний обробник меню, що завантажує до компоненту Image3 файл зображення, що обирає у діалозі OpenPictureDialog1 користувач і запам’ятовує зображення у BitMap:

if (OpenPictureDialog1->Execute())

{

Image3->Picture->LoadFromFile(OpenPictureDialog1->FileName);

BitMap->Assign(Image3->Picture);

}

13. Для обробки події клацання мишею на підпункті Відмінити, до обробника треба включити рядок, що відновлює на полотні зображення, збережене у BitMap:

Image3->Picture->Assign(BitMap);

14. До обробників подій OnClick для кнопок SBBrush і SBColor треба записати відповідно наступні коди:

if (SBBrush->Down)

BitMap->Assign(Image3->Picture);

і

if (SBColor->Down)

BitMap->Assign(Image3->Picture);

Вони забезпечують запам’ятовування поточного зображення перед початком роботи з наступним інструментом.

15. До обробника події OnMouseDown компонентів Image3 і Image4 треба додати код:

if ((Sender == Image4) || SBColor->Down)

{

if (Button == mbLeft)

{

Image1->Canvas->Brush->Color = ((TImage *)Sender)->Canvas->Pixels[X][Y];

Image1->Canvas->FillRect (Rect(0,0,Image1->Width, Image1->Height));

}

else

{

Image2->Canvas->Brush->Color = ((TImage *)Sender)->Canvas->Pixels [X][Y];

Image2->Canvas->FillRect (Rect(0,0,Image2->Width, Image2->Height));

}

}

else if (SBBrush->Down)

{

if (Button == mbLeft)

Image3->Canvas->Brush->Color = Image1->Canvas->Brush->Color;

else

Image3->Canvas->Brush->Color = Image2->Canvas->Brush->Color;

Image3->Canvas->FloodFill(X, Y,Image3->Canvas->Pixels [X][Y], fsSurface);

}

Це основний код, що здійснює як установку основного і допоміжного кольорів, так і функцію інструменту графічного редактора - пензля. Якщо кнопка миші натиснута на палітрі кольорів Image4 або якщо кнопка SBColor - кнопка покажчика кольору утоплена, то додаток знаходиться в режимі установки кольорів. При натиснутій лівій кнопці миші колір пікселя під курсором миші передається у вікно основного кольору, а при натисканні правої кнопки - у вікно фонового кольору. Якщо кнопка миші натиснута на полотні Image3 і при цьому кнопка SBBrush утоплена, додаток перебуває в режимі зафарбовування вказаної області малюнка, В цьому випадку залежно від натиснутої кнопки миші вибирається основний або допоміжний колір і функцією FloodFiIl проводиться зафарбовування області, координати внутрішньої точки якої вказані курсором миші, а колір - кольором пікселя, на який вказує миша.

Додаток створений. В подальшому, після отримання деяких додаткових відомостей про графіку, його можна буде наповнити новими інструментами. Виконайте компіляцію додатку, збережіть його і запустіть на виконання. Перевірте процедуру встановлення кольорів. При клацанні лівою або правою кнопкою миші на палітрі кольорів має змінюватись відповідно основний і фоновий колір. Якщо натиснута кнопка у вікні додатку, то при клацанні мишею на полотні має зафарбовуватись вказана курсором область у основний або фоновий колір. Якщо відпустити кнопку пензля у вікні додатку і натиснути кнопку визначення кольорів, то при клацанні на полотні, основний або фоновий колір буде встановлюватись таким, яким є колір полотна під курсором миші.

Якщо виконати команду Правка/Відмінити, то зображення стане таким, яким воно було перед початком роботи з останнім з використаних інструментів. Тепер можна завантажити (командою Файл/Завантажити) до створеного додатку графічний файл Ducky.bmp, або створений самостійно у середовищі Paint або Photoshop невеличкий bmp-файл, після чого спробувати перефарбовувати ті чи інші області зображення.

Таким чином, у даній лабораторній роботі були реалізовані два з інструментів будь-якого редактора: пензель і інструмент вибору кольору. Деякі інші інструменти будуть реалізовані на наступній лабораторній роботі.