Графічні елементи управління у Delphi |
Написав kims | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
П'ятниця, 07 червня 2013 09:37 Переглядів: 20276
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Delphi дозволяє програмісту розробляти програми, які можуть виводити графіку: схеми, креслення, ілюстрації. Програма виводить графіку на поверхню об'єкту (форми або компоненту Image). Поверхні об'єкту відповідає властивість canvas. Для того, щоб вивести на поверхню об'єкту графічний елемент (пряму лінію, коло, прямокутник і т. д.), необхідно застосувати до властивості canvas цього об'єкту відповідний метод. Наприклад, інструкція Form1.Canvas.Rectangle (10,10,100,100) викреслює у вікні програми прямокутник.
Полотно Як було сказано раніше, поверхні, на яку програма може виводити графіку, відповідає властивість Canvas. У свою чергу, властивість canvas — це об'єкт типу TCanvas. Методи цього типу забезпечують виведення графічних примітивів (крапок, ліній, кіл, прямокутників і т. д.), а властивості дозволяють задати характеристики графічних примітивів, що виводяться: колір, товщину і стиль ліній; колір і вид заповнення областей; характеристики шрифту при виведенні текстової інформації. Методи виведення графічних примітивів розглядають властивість Canvas як деяке абстрактне полотно, на якому вони можуть малювати (canvas переводиться як "поверхня", "полотно для малювання"). Полотно складається з окремих крапок — пікселів. Положення піксела характеризується його горизонтальними (X) і вертикальними (Y) координатами. Лівий верхній піксел має координати (0, 0). Координати зростають зверху вниз і зліва направо (див. мал). Значення координат правої нижньої точки полотна залежать від розміру полотна.
Координати точок полотна
Розмір полотна можна отримати, звернувшися до властивостей Height і Width області ілюстрації (image) або до властивостей форми: ClientHeight і Clientwidth.
Олівець і пензлик Художник в своїй роботі використовує олівці і кисті. Методи, що забезпечують викреслювання на поверхні полотна графічних примітивів, теж використовують олівець і кисть. Олівець застосовується для викреслювання ліній і контурів, а кисть — для зафарбовування (заливки) областей, обмежених контурами. Олівцю і пензлику, що використовується для виведення графіки на полотні, відповідають властивості Реn (олівець) і Brush (пензлик), які є об'єктами типу TPen і ТВrush, відповідно. Значення властивостей цих об'єктів визначають вид графічних елементів, що виводяться.
Олівець Олівець використовується для викреслювання крапок, ліній, контурів геометричних фігур: прямокутників, кіл, еліпсів, дуг і ін. Вид лінії, яку залишає олівець на поверхні полотна, визначають властивості об'єкту TPen , які перераховані в таблиці.
Властивості об'єкту TPen (олівець)
Властивість Color задає колір лінії, викреслюваної олівцем. В таблиці нижче перераховані іменовані константи (тип TColor), які можна використовувати як значення властивості color.
Значення властивості Color визначає колір лінії
Властивість Width задає товщину лінії (в пікселях). Наприклад, інструкція Canvas.Pen.width: =2 встановлює товщину лінії в 2 піксели. Властивість Style визначає вид (стиль) лінії, яка може бути безперервна або переривиста, складається з штрихів різної довжини. В таблиці нижче перераховані іменовані константи, що дозволяють задати стиль лінії. Товщина пунктирної лінії не може бути більше 1. Якщо значення властивості Pen.width більше одиниці, то пунктирна лінія буде виведена як суцільна.
Значення властивості Реn.color визначає вид лінії
Властивість Mode визначає, як формуватиметься колір точок лінії залежно від кольору точок полотна, через які ця лінія викреслюється. За замовчуванням вся лінія викреслюється кольором, яка визначається значенням властивості Pen.Color. Проте програміст може задати інверсний колір лінії по відношенню до кольору фону. Це гарантує, що незалежно від кольору фону всі ділянки лінії будуть видні, навіть в тому випадку, якщо колір лінії і колір фону співпадають. Нижче перераховані деякі константи, які можна використовувати як значення властивості Pen.Mode.
Значення властивості Рeп. Mode впливає на колір лінії
Пензлик Пензлик (canvas.Brush) використовується методами, що забезпечують викреслювання замкнутих областей, наприклад геометричних фігур, для заливки (зафарбовування) цих областей. Кисть, як об'єкт, володіє двома властивостями.
Властивості об'єкту ТВrush (кисть)
Область усередині контура може бути зафарбована або заштрихована. В першому випадку область повністю перекриває фон, а в другому — крізь незаштриховані ділянки області буде видний фон. Як значення властивості Color можна використовувати будь-яку з констант типу TColor (див. список констант для властивості Pen.color). Константи, що дозволяють задати стиль заповнення області, приведені в таблиці.
Значення властивості Brush, style визначають тип зафарбовування
Компонент Shape (фігура) До стандартної бібліотеки візуальних компонентів Delphi входять декілька об’єктів, за допомогою яких можна надати прикладній програмі оригінального вигляду. Основні з них – Image (зображення) і Shape (фігура). Компонент Shape ( сторінка Additional) являє собою різні геометричні фігури, заштриховані зазначеним стилем. Його властивість Pen визначає колір і стиль лінії побудови. Властивість Brush визначає стиль і колір зафарбовування фігури. Розглянемо на малюнках нижче фігури, які можна вибрати через властивість Shape та стилі заповнення і стилі лінії побудови. Також для цих фігур можна задати товщину лінії, колір, колір заповнення. Це все можна виконати через вище згадані властивості – Pen та Brush.
Вікно програми «Стилі заповнення областей»
Фігури Shape
Проект «Shape» - Розмітити на формі п’ять компонентів Shape - Використовуючи властивість Shape компонентів, надати фігурам вигляду - Прямокутника (stRectangle) - Кола (stCircle) - Еліпса (stElipse) - Квадрата (stSquere) - Прямокутника із заокругленими кутами (stRoundRect) - Використовуючи властивості Pen.Color, Pen.Width, Pen.Style, змінити вигляд ліній і фігур. - Використовуючи властивості Brush.Style , Brush.Style, залити фігури потрібним кольором та стилем.
Виведення тексту Для виведення тексту на поверхню графічного об'єкту використовується метод TextOut. Інструкція виклику методу TextOut в загальному вигляді виглядає таким чином: Объект.Canvas.TextOut(x, у, Текст) де: об'єкт — ім'я об'єкту, на поверхню якого виводиться текст; х, у — координати точки графічної поверхні, від якої виконується виведення тексту; Текст — змінна або константа символьного типу, значення якої визначає що виводитьс.
Координати області виведення тексту Шрифт, який використовується для виведення тексту, визначається значенням властивості Font відповідного об'єкту canvas. Властивість Font є об'єктом типу TFont. В таблиці, наведеній нижче, перераховані властивості об'єкту TFont, що дозволяють задати характеристики шрифту, що використовується методами TextOut і TextRect для виведення тексту.
Властивості об'єкту TFont
Область виведення тексту зафарбовується поточним кольором кисті.
Тому перед виведенням тексту властивості Brush.Color потрібно привласнити значення bsClear або задати колір кисті, співпадаючий з кольором поверхні, на яку виводиться текст. Наступний фрагмент програми демонструє використовування функції Textout для виведення тексту на поверхню форми:
Після виведення тексту методом Textout покажчик виводу (олівець) переміщається в правий верхній кут області виведення тексту. Іноді вимагається вивести який-небудь текст після повідомлення, довжина якого під час розробки програми невідома. Наприклад, це може бути слово "грн." після значення числа, записаного прописом. В цьому випадку необхідно знати координати правої межі вже виведеного тексту. Координати правої межі тексту, виведеного методом Textout, можна отримати, звернувшись до властивості PenPos. Наступний фрагмент програми демонструє можливість виведення рядка тексту за допомогою двох інструкцій Textout. with Form1.Canvas do begin TextOut(0, 10, 'Borland '); TextOut(PenPos.X, PenPos.Y, 'Delphi 7'); end;
Виведення ілюстрацій Найбільш просто вивести ілюстрацію, яка знаходиться у файлі з розширенням bmp, jpg або ico, можна за допомогою компоненту Іmage, значок якого знаходиться на вкладці Additional палітри (див. мал. далі).
Значок компоненту Image
Нижчеперераховані основні властивості компоненту Іmage.
Властивості компоненту image
Ілюстрацію, яка буде виведена в полі компоненту image, можна задати як під час розробки форми додатку, так і під час роботи програми. Під час розробки форми ілюстрація задається установкою значення властивості picture шляхом вибору файлу ілюстрації в стандартному діалоговому вікні, яке з'являється в результаті клацання на командній кнопці Load вікна Picture Editor. Щоб запустити його, потрібно у вікні Object Inspector вибрати властивість Picture і клацнути на кнопці з трьома крапками. Якщо розмір ілюстрації більше розміру компоненту, то властивості Stretch потрібно привласнити значення True і встановити значення властивостей width і Height пропорційно реальним розмірам ілюстрації. Щоб вивести ілюстрацію в полі компоненту image під час роботи програми, потрібно застосувати метод LoadFromFile до властивості Picture, вказавши як параметр ім'я файлу ілюстрації. Наприклад, інструкція Form1.Image1.Picture.LoadFromFile('e:\temp\bart.bmp') завантажує ілюстрацію з файлу bart.bmp і виводить її в полі виведення ілюстрації (image1). Метод LoadFromFile дозволяє відображати ілюстрації різних графічних форматів: BMP, WMF, JPEG (файли з розширенням jpg).
Проект «Рух фігури Shape» На прикладі фігури Shape ознайомимося з тим як можна створити перетягування компонента під час роботи програми. 1. Розмістити на формі компонент Shape. 2. Використовуючи закладку Events в інспекторі об’єктів, створимо для цього компонента процедури обробки подій: OnMouseDown (натискання кнопки миші), OnMouseMove (рух миші), OnMouswUp(відпускання кнопки миші в області об’єкта). 3. Лістинг програми буде такий: var Form1: TForm1; x1,y1:integer; flag:boolean=false; implementation {$R *.dfm} procedure TForm1.Shape1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin flag:=false; end; procedure TForm1.Shape1MouseDown(Sender:TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin x1:=x;y1:=y; flag:=true; end; procedure TForm1.Shape1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer); begin if flag then with TShape(Sender) do begin Left:=Left+x-x1;Top:=Top+y-y1; end; end; Пояснимо як працюють процедури даного проекту . Коли курсор миші знаходиться в області компонента Shape і в цей момент натиснути кнопку миші, змінні x1,y1 запам’ятають координати розміщення фігури, а прапорець прийме значення true (flag:=true) і це означає, що перетягування почалося. Якщо кнопку миші не відпускати й рухатися, то у процедурі TForm1.Shape1MouseMove, відбувається перерахунок координат об’єкта Shape стосовно системи координат форми. Це створює ефект руху фігури під курсором миші. Якщо кнопку миші відпустити, то виконається тільки одна операція flag:=false і перетягування звершиться.
Проект «Тварини світу» Задача. Створити проект в якому передбачити можливість переглядати декілька малюнків, а також, щоб можна було малюнок зменшити або збільшити. 1. Створіть відповідну форму, встановіть на форму чотири кнопки BitBtn, дві кнопки Button та компонент Image. 2. На кнопки BitBtn встановіть зображення малюнків через властивість Glyp. Одну з кнопок Button назвіть «Збільшити малюнок», а другу «Зменшити малюнок» 3. Компоненту Image наддайте властивість Stretch – true. 4. Напишіть процедури для кнопок BitBtn1-BitBtn4 та Button1, Button2. 5. Процедури для цих кнопок можуть бути такими:
procedure TForm1.BitBtn2Click(Sender: TObject); begin Form1.Image1.Picture.LoadFromFile('jaba.bmp') end; procedure TForm1.BitBtn3Click(Sender: TObject); begin Form1.Image1.Picture.LoadFromFile('kotuk.bmp') end; procedure TForm1.BitBtn4Click(Sender: TObject); begin Form1.Image1.Picture.LoadFromFile('mous.bmp') end; procedure TForm1.BitBtn5Click(Sender: TObject); begin Form1.Image1.Picture.LoadFromFile('tigr.bmp') end; procedure TForm1.Button1Click(Sender: TObject); begin Image1.Width:=Image1.Width+50; Image1.Height:=Image1.Height+50; end; procedure TForm1.Button2Click(Sender: TObject); begin Image1.Width:=Image1.Width-50; Image1.Height:=Image1.Height-50; end; 6. Для завантаження малюнка використано метод : Form1. Image1.Picture.LoadFromFile(). 7. Збережіть проект. Запустіть проект на виконання, перевірте правильність роботи цього проекту.
Практичні завдання для статті (пункт 2.7)
Ця стаття входить в курс уроків по Delphi. Зміст курсу лекцій та практичних занять по Delphi.
Кузбит І.М. ( 19 Проголосувало ) Новіші матеріали:
Старіші матеріали:
3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved." |