ВІДОБРАЖЕННЯ БАЗОВИХ ГРАФІЧНИХ ПРИМІТИВІВ – ЛІНІЯ, ПРЯМОКУТНИК, СЕКТОР, ЛАМАНА, ЕЛІПС, НАЛАШТУВАННЯ СТИЛЮ ТА КОЛЬОРУ ПРИМІТИВІВ ЗАСОБАМИ МОВИ ПРОГРАМУВАННЯ. ВІДОБРАЖЕННЯ РИСУНКІВ ІЗ ЗОВНІШНІХ ФАЙЛІВ. Урок 59
Запитання 1. Які графічні примітиви можна створювати у графічному редакторі та текстовому процесорі? 2. Які властивості графічних примітивів ви знаєте? 3. Які спільні властивості напису, кнопки і форми ви знаєте? Допомога при вивченні інформатики
Засоби для малювання в Object Pascal Графічні об'єкти у проектах, розроблених у Lazarus, можна створювати та відображати різними способами. Одним з них є малювання графічних примітивів за їх координатами на координатній площині. Допомога при вивченні інформатики
Засоби для малювання в Object Pascal Частина такої координатної площини розміщена, наприклад, на формі. Початок координат збігається з верхнім лівим кутом форми. Вісь Ох спрямована вправо, вісь Оy - униз. Частина координатної площини, що відображається на формі, має розміри ширини і висоти форми. На малюнку червоним кольором позначено точку з координатами (100, 200). Допомога при вивченні інформатики
Засоби для малювання в Object Pascal Для малювання ліній і фігур у процесі виконання програми на формі в середовищі програмування Lazarus потрібно розміщувати полотно. Для цього звертаються до властивості Canvas — властивості об'єкта Form, який у свою чергу є об'єктом, що має свої методи та властивості. Методи Властивості використовують для побудови на полотні різних фігур використовують щоб задавати колір лінії, її товщину тощо. Допомога при вивченні інформатики
Засоби для малювання в Object Pascal Кожна точка (піксель) на формі має свої координати та колір. Координати можуть бути задані лише цілими числами. Колір можна задати константою типу ТСоlоr. Приклади констант і відповідних їм кольорів наведено у таблиці: Значення Колір cl. Black Чорний cl. Silve Срібний cl. Purple Рожевий cl. Maroon Каштановий cl. Red Червоний cl. Teal Пурпурний cl. Green Зелений cl. Lime Салатовий cl. Gray Сірий cl. Olive Оливковий cl. Blue Синій cl. Navy Темно-синій cl. Fuchsia Яскраво рожевий Допомога при вивченні інформатики сl. Aqua cl. White Бірюзовий Білий
Засоби для малювання в Object Pascal Для того щоб установити для точки з координатами (х, у) деякий колір, наприклад червоний, потрібно виконати команду: Canvas. Pixels[x, у] : = cl. Red; Допомога при вивченні інформатики
Засоби для малювання в Object Pascal Для створення графічних примітивів можна використовувати команди: Canvas. Move. To (x, у) Canvas. Line. To (x, y) Canvas. Rectangle (x 1, y 1, x 2, y 2) Вибір на формі точки (я, у), з якої буде розпочинатися малювання ліній Малювання відрізка від останньої точки, у якій відбувалось малювання, до точки (х, у). Використання послідовно кількох таких команд приведе до малювання відрізка або ламаної Малювання прямокутника, у якого протилежні вершини розміщені в точках (х1, у1) та (х2, у2)у а сторони паралельні осям координат Допомога при вивченні інформатики
Засоби для малювання в Object Pascal Продовження Canvas. Ellip se (x 1, y 1, x 2, y 2) Малювання еліпса, вписаного у прямокутник, у якого протилежні вершини розміщені у точках (x 1, y 1) та (х2, y 2), а сторони паралельні осям координат. Прямокутник при цьому не відображається Canvas. Pie (x 1, y 1, x 2, y 2, x 3, y 3, x 4, y 4) Малювання замкненої фігури - сектора еліпса. Точки (x 1, y 1) та (x 2, у2) задають прямокутник, у який вписано еліпс. Початкова точка дуги визначається перетином еліпса з прямою, що проходить через його центр і точку (x 3, y. З). Кінцева точка дуги визначається перетином еліпса з прямою, що проходить через його центр і точку (х4, у4). Дуга малюється проти годинникової стрілки від початкової до кінцевої точки. Допомога при вивченні інформатики
Засоби для малювання в Object Pascal У наведеному на малюнку прикладі еліпс вписаний у прямокутник, що має протилежні вершини в точках А (100, 100) та С (500, 300). Сектор еліпса утворений відрізками, що сполучають центр прямокутника (точку Т (300, 200)) з точками М (300, 100) та N (400, 100), та дугою еліпса, що починається в точці М (300, 100), а закінчується при перетині еліпса з відрізком TN. Canvas. Pie (100, 500, 300, 100, 400, 100) Допомога при вивченні інформатики
Для кожного примітива можна задати значення властивостей його контуру та внутрішньої області. Значення властивостей контуру та внутрішньої області графічного примітива збігаються зі значеннями властивостей форми, наведеними у таблиці. Допомога при вивченні інформатики
Засоби для малювання в Object Pascal Створюючи зображення, що складається з графічних примітивів, варто спочатку встановити значення властивостей контуру та внутрішньої області фігури, після чого відобразити саму фігуру. Допомога при вивченні інформатики
Засоби для малювання в Object Pascal Процедура створення кольорового прямокутника: procedure Tform 1. Button 1 Click(Sender: Tobject); begin Canvas. Pen. Color : = cl. Green; // колір контуру зелений Canvas. Pen. Width : = 3; // товщина контуру З пікселі Canvas. Brush. Color : = cl. Red; // колір заливки червоний Canvas. Brush. Style : = bs. Diag. Cross; (* стиль заливки — сітка з діагональними лініями*) Canvas. Rectangle (100, 500, 300); (* прямокутник з протилежними вершинами в точках (100, 100) та (500, 300) і сторонами, паралельними осям координат *) end; Допомога при вивченні інформатики
Засоби для малювання в Object Pascal Для того щоб малюнок відображався на формі одразу після запуску проекту на виконання, потрібно команди малювання розміщувати в процедурі обробнику події Paint для форми. Допомога при вивченні інформатики Результат виконання процедури малювання графічного примітива
Компонент фігура для створення графічних примітивів Щоб розмістити Фігуру на формі, потрібно двічі клацнути на кнопці TShape (англ. shape - форма, фігура) на вкладці Additional (англ. additional - додатковий) вікна середовища Lazarus. Допомога при вивченні інформатики
Компонент фігура для створення графічних примітивів Властивості Фігури Name, Enabled, Visible аналогічні до відповідних властивостей форми. Як і для форми, значення властивостей Фігури Тор, Left, Height і Width можна змінити або на вкладці Властивості, або перетягуванням. Допомога при вивченні інформатики
Компонент фігура для створення графічних примітивів Компонент Фігура має властивості, що визначають колір і стиль контуру та внутрішньої області. Властивість Що визначає її значення Pen. Color Колір контуру Pen. Width Товщина контуру Pen. Style Стиль лінії контуру Brush. Color Колір заливки внутрішньої області Brush. Style Стиль заливки внутрішньої області Допомога при вивченні інформатики
Компонент фігура для створення графічних примітивів Властивість Style може набувати значень із набору, вказаного в таблиці: Значення Пояснення Значення Вигляд bs. Solid Суцільне зафарбування bs. Horizontal Горизонтальна штриховка bs. Clear He зафарбовується bs. Vertical bs. DFiagonal Діагональна штриховка з нахилом ліній вперед bs. Cross Горизонтальновертикальна штриховка в клітинку Допомога при вивченні інформатики Вертикальна штриховка bs. BFiagonal Діагональна штриховка з нахилом ліній назад bs. Diag. Cross Діагональна штриховка в клітинку
Компонент фігура для створення графічних примітивів Значення цих властивостей можна встановлювати на вкладці Властивості у вікні Інспектор об'єктів або з використанням команди присвоювання. Ці значення можуть бути такими самими, як і для графічних примітивів. Допомога при вивченні інформатики
Компонент фігура для створення графічних примітивів Крім того, Фігура має властивість Shape, що визначає її форму. Ця властивість може набувати, наприклад: За замовчуванням значення цієї властивості визначає квадрат з контуром чорного кольору товщиною 1 піксель і суцільною заливкою білого кольору. Допомога при вивченні інформатики
Компонент фігура для створення графічних примітивів На малюнку наведено приклад зображення, створеного з використанням кількох об'єктів Фігура з різними значеннями властивостей. Створення зображення з використанням об'єктів Фігура Допомога при вивченні інформатики
Переміщення об'єктів мишею Щоб перемістити об'єкт, треба: 1 натиснути ліву кнопку миші на об'єкті (подія Mouse. Down); 2 перемістити вказівник при натиснутій кнопці миші (подія Mouse. Move); 3 відпустити кнопку миші (подія Mouse. Up). Допомога при вивченні інформатики
Переміщення об'єктів мишею Щоб запрограмувати переміщення по формі елемента Shape 1, треба, використовуючи закладку Події у вікні Інспектор об'єктів, створити для цього компонента процедури обробки подій: On. Mouse. Down (натискання кнопки миші), On. Mouse. Move (рух миші), On. Mouse. Up (відпускання кнопки миші в області об'єкта). Текст програми буде таким: var Form 1: TForm 1; х1, y 1: Integer; // опис глобальних змінних flag: Boolean = False; implementation {$R *. dfm} Допомога при вивченні інформатики
Переміщення об'єктів мишею Продовження procedure Tform 1. Shape 1 Mouse. Up (Sender: TObject; Button: TMouse. Button; Shift: TShift. State; X, Y: Integer); begin flag : = False; end; procedure Tform 1. Shape 1 Mouse. Move (Sender: TObject; Shift: TShift. State; X, Y: Integer); begin If flag Then with Tshape (Sender) do Допомога при вивченні інформатики
Переміщення об'єктів мишею Продовження begin end; Left : = Left + x - x 1; Top : = Top + у – y 1; end; procedure Tform 1. Shape 1 Mouse. Down (Sender: TObject; Button: TMouse. Button; Shift: TShift. State; X, Y: Integer); begin x 1 : = x; y 1 : = y; flag : = True end; Допомога при вивченні інформатики
Переміщення об'єктів мишею Розглянемо, як працюють процедури даного проекту. Якщо натиснути кнопку миші в момент, коли вказівник міститься в області компонента Shape, то в процедурі Shape 1 Mouse. Down змінним х1, у1 будуть присвоєні значення координат розміщення вказівника, а змінній flag — значення true. Значення змінної flag (прапорця) сигналізує, чи натиснута кнопка миші. Якщо не відпускати кнопку миші й перетягувати об'єкт, то в процедурі TForm 1. Shape 1 Mouse. Move відбувається перерахунок координат компонента Shape відносно системи координат форми. Це створює ефект руху фігури за вказівником. Якщо кнопку миші відпустити, то виконається процедура TForm 1. Shape 1 Mouse. Up, в якій flag набуває значення False, і перетягування завершиться. Допомога при вивченні інформатики
Переміщення об'єктів мишею Створивши процедури обробки подій On. Mouse. Down, On. Mouse. Move, On. Mouse. Up для компонентів Shape, можна розробити гру «Конструктор» . Допомога при вивченні інформатики
Розгадайте ребус Графіка Допомога при вивченні інформатики
Запитання 1. Як розміщена на формі координатна площина? 2. Яка властивість форми використовується для малювання графічних примітивів? 3. Які команди використовуються для малювання графічних примітивів лінія, ламана, прямокутник, еліпс, сектор? 4. Як змінити контур і внутрішню область графічних примітивів? 5. Який компонент використовується для створення графічних примітивів? Як його встановити на формі? Допомога при вивченні інформатики
Фізкультхвилинка Допомога при вивченні інформатики
Працюємо за комп’ютером Допомога при вивченні інформатики
ДЯКУЮ ЗА УВАГУ!!! Урок 47
Скачать презентацию ВІДОБРАЖЕННЯ БАЗОВИХ ГРАФІЧНИХ ПРИМІТИВІВ ЛІНІЯ ПРЯМОКУТНИК СЕКТОР
Урок 59.pptx