100 Компонентів delphi - відображення графіки на канві canvas

4.2 Відображення графіки на канві Canvas

Канва Canvas не є компонентом, так що, строго кажучи, вона не мала б розглядатися в рамках даної книги. Але оскільки багато компонентів, зокрема, форми, мають канву і канва надає можливість виводити різну графічну інформацію, то деякі початкові відомості про канві все-таки доцільно дати.

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

Кожна точка канви має координати X і Y. Система координат канви, як і всюди в Delphi, має початком лівий верхній кут канви. Координата X зростає при переміщенні зліва направо, а координата Y - при переміщенні зверху вниз. Координати вимірюються в пікселях. Піксель - це найменший елемент поверхні малюнка, з яким можна маніпулювати. Найважливіша властивість пікселя - його колір.

Канва має властивість Pixels. Це властивість є двовимірний масив, який відповідає за кольору канви. Наприклад, Canvas.Pixels [10,20] відповідає кольору пікселя, 10-го зліва і 20-го зверху. З масивом пікселів можна звертатися як з будь-яким властивістю: змінювати колір, задаючи пікселя нове значення, або визначати його колір по зберігається в ньому значенню. Наприклад, Canvas.Pixels [10,20]: = 0 або Canvas.Pixels [10,20]: = clBlack - це завдання пікселя чорного кольору.

Властивість Pixels можна використовувати для малювання на канві. Давайте спробуємо намалювати по пікселям графік синусоїди на канві форми. Для цього в обробник події форми OnPaint (промальовування) можна вставити наступний код:

Виконайте це тестове додаток і ви побачите результат, представлений на рис. 4.1 а. Графік синусоїди вийшов, хоча і не дуже хороший, тому що розбивається на окремі точки - пікселі.

Мал. 4.1
Графік синусоїди, побудований за пикселям (а) і лініями (б)

Канва "> Властивість Style визначає вид лінії. Це властивість може набувати таких значень:

Суцільна лінія, але при Width> 1 допускає кольору, відмінні від палітри Windows

У канви є властивість PenPos типу TPoint (див.). Це властивість визначає в координатах канви поточну позицію пера. Переміщення пера без промальовування лінії, тобто зміна PenPos. проводиться методом канви MoveTo (X, Y). Тут (X, Y) - координати точки, в яку переміщається перо. Ця постійна точка стає вихідної, від якої методом LineTo (X, Y) можна провести лінію в точку з координатами (X, Y). При цьому поточна точка переміщується в кінцеву точку лінії і новий виклик LineTo проводитиме точку з цієї нової поточної точки.

Давайте спробуємо намалювати пером графік синуса з попереднього прикладу. В даному випадку обробник події форми OnPaint може мати вигляд:

Результат роботи програми в цьому варіанті ви можете бачити на рис. 4.1 б. Як бачите, якість графіка істотно покращився.

Перо може малювати не тільки прямі лінії, а й фігури. Повний список методів канви, що використовують перо, див. У вбудованій довідці Delphi. А поки в якості прикладу наведемо лише один з них - Ellipse. який малює еліпс або коло. Він оголошений як де параметри X1, Х2, Y1, Y2 визначають координати прямокутника, що описує еліпс або коло. Наприклад, оператор намалює коло з діаметром 10 і з координатами центру (15, 45).

Фігури в загальному випадку малюються не пустими, а зафарбованими за допомогою властивості канви Brush - кисть. Властивість Brush є об'єктом, що має в свою чергу ряд властивостей. Властивість Color визначає колір заповнення. Властивість Style визначає шаблон заповнення (штрихування). За замовчуванням значення Style одно bsSolid. що означає суцільне зафарбовування кольором Color.

Цю особливість режиму pmNotXor можна використовувати для створення простенької анімації. Досить намалювати щось, потім стерти намальоване, перемалювати трохи зміненим - і малюнок буде представлятися ожилим.

Тим самим ви введете глобальні змінні X і Y - поточні координати зображення.

У подія форми OnPaint вставте оператори

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

Навіть найпростіша мультиплікація потребує синхронізації. Інакше швидкість руху буде визначатися швидкодією комп'ютера. Тому перенесіть на форму компонент Timer - таймер зі сторінки System. Цей компонент описаний в розділі 5.7. Можете подивитися там його докладний опис. А поки задайте його властивість Interval рівним, наприклад, 30 (цей час витримки в мілісекундах, але реальний час витримки буде більше - див. 5.7) і встановіть властивість Enabled рівним false (це означає, що таймер не буде запускатися автоматично в момент запуску програми ).

В обробник події цього компонента OnTimer вставте оператори

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

Тепер перенесіть на форму кнопку Button і в обробник клацання на ній помістіть оператори

Перші два оператора задають початкові координати кола. Третій оператор малює окружність в її початковому положенні, а четвертий - запускає таймер.

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

На канві можна відображати не тільки програмно створювані зображення, але і зображення, які знаходяться в графічних файлах. Тільки сама канва не має методу завантаження зображення з файлу. Тому завантажувати файл треба в якийсь інший графічний об'єкт, здатний сприймати інформацію графічних файлів. А потім переписувати зображення з цього об'єкта на канву за допомогою методу канви Draw. Його опис:

Тут параметри Х і Y визначають координати лівого верхнього кута розміщення зображення на канві, a Graphic - об'єкт, який зберігає інформацію. В якості такого об'єкта може виступати, наприклад, об'єкт типу TBitMap. призначений для зберігання бітових матриць. Давайте подивимося, як все це виглядає на практиці.

Відкрийте новий додаток, перенесіть на форму компонент OpenPictureDialog зі сторінки Dialogs (це компонент діалогу відкриття графічних файлів - див. 8.2) і кнопку Button. Додайте OpenPictureDialog в будь-якому місці форми, так як цей компонент невізуальний, а кнопку розмістіть внизу форми. В обробник клацання на кнопці занесіть код:

Цей код створює тимчасовий об'єкт типу TBitMap з ім'ям BitMap. Потім викликається діалог відкриття графічного файлу OpenPictureDialog1 і, якщо користувач вибрав файл, то він завантажується в BitMap методом LoadFromFile. Потім методом Draw завантажене зображення копіюється на канву в область, з координатами лівого верхнього кута (10, 10). Після цього тимчасовий об'єкт BitMap знищується.

Запустіть ваш додаток і клацніть на його кнопці. Ви побачите, що можете завантажити будь-який графічний файл типу .bmp і він відобразиться на канві форми (див. Рис. 4.2 а). Графічні файли ви можете знайти в каталозі Images. У Delphi 5 і 4 він зазвичай розташований в каталозі. \ Program files \ Common Files \ Borland Shared. У Delphi 3 він розташований в каталозі. \ Program files \ Borland \ Delphi 3, а в Delphi 1 - в каталозі Delphi 16. В каталозі Images є, зокрема, підкаталог \ Images \ Splash \ 16Color \, в якому зберігається файл, завантажений в прикладі рис. 4.2.

Зображення на канві графічного файлу (а) і його стирання (б) при перекритті іншим вікном

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

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

Зробіть це, і побачите, що зображення на формі не псується при будь-яких перекриттях вікон.

Метод копіює зазначену параметром Source область зображення в канві джерела зображення Canvas в зазначену параметром Dest область даної канви. Тип TRect. характеризує прямокутні області Source і Dest. вже описувався в розділі 3.2. Наприклад, оператор копіює на канву форми в область MyRect2 зображення з області MyRect1 канви компонента Bitmap.

Цими основними відомостями про виведення графічної інформації на канву ми обмежимося. У розділі 3.2 були повідомлені відомості про виведення на канву тексту. В цілому ж канва - складний об'єкт, що володіє ще багатьма властивостями і методами. Але це вимагає розгорнутого обговорення, що виходить за рамки даної книги. У наступній книзі серії «Все про Delphi» ці питання будуть розглянуті детальніше.