8 клас Урок 59

Тема уроку. Відображення базових графічних примітивів – лінія, прямокутник, сектор, ламана, еліпс, засобами мови програмування

 

Мета:

-     формувати уявлення про графічні можливості середовища програмування, принципи формування зображень на формі; сформувати вміння використовувати графічні методи для створення зображень;

- розвивати наочно-образне та алгоритмічне мислення, пам'ять;

- виховувати інтерес до предмета засобами практичного втілення прийомів роботи із сучасними технологіями.

Організаційний момент 

Комп’ютерна графіка – розділ інформатики, який вивчає технології опрацювання графічних зображень за допомогою комп’ютерної техніки.

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

Растрове графічне зображення складається з окремих маленьких прямокутників – пікселів. Ви знайомі з інструментами побудови растрових зображень редактора растрової графіки Paint.

Векторне графічне зображення будується з окремих базових об’єктів – графічних примітивів: відрізків, многокутників, кривих, овалів тощо. У ході вивчення текстового редактора Word, програми для створення презентацій MS PowerPoint ви дізналися про способи формування зображень із геометричних примітивів, поняття й принципи побудови векторних зображень, способи зафарбовування об’єктів, встановлення параметрів контура і заливки.

Графічні примітиви – це елементи простої форми, з яких будують більш складні зображення.

Будь-який малюнок або креслення можна розглядати як сукупність графічних примітивів: крапок, ліній, кіл, дуг та ін. Для того щоб на екрані з’явився малюнок, програма повинна забезпечити креслення кожного з графічних примітивів, з яких він складається.

Чи можна  виводити на екран графічні зображення за допомогою програм, створених в  середовищі програмування.

На даному уроці ми  дізнаємося як:

•       Як намалювати лінію, прямокутник, сектор, ламану, еліпс засобами мови програмування

•       Як вивести на екран створені фігури

Розминка (Логічні задачі)

 

Перевірка домашнього завдання 

Актуалізація вивченого матеріалу 

Пояснення нового матеріалу

У мові програмування для промальовування різних елементів графіки використовується спеціальний клас TCanvas.

Поверхні, на яку програма може виводити графіку, відповідає властивість Canvas. У свою чергу, властивість canvas — це об'єкт типу TCanvas. Методи цього типу забезпечують виведення графічних примітивів (крапок, ліній, кіл, прямокутників і т. д.), а властивості дозволяють задати характеристики графічних примітивів, що виводяться: колір, товщину і стиль ліній; колір і вид заповнення областей; характеристики шрифту при виведенні текстової інформації.

Методи виведення графічних примітивів розглядають властивість Canvas як деяке абстрактне полотно, на якому вони можуть малювати (canvas переводиться як "поверхня", "полотно для малювання"). Полотно складається з окремих крапок — пікселів. Положення піксела характеризується його горизонтальними (X) і вертикальними (Y) координатами. Лівий верхній піксел має координати (0, 0). Координати зростають зверху вниз і зліва направо (див. мал). Значення координат правої нижньої точки полотна залежать від розміру полотна.

Фізкультхвилинка

 Робота за комп'ютером 

Перш ніж що-небудь намалювати у вікні форми треба створити об’єкт класу Graphics та провести його ініціалізацію. Наприклад таким чином:

Graphics g;

g = CreateGraphics();

Клас Pen визначає об'єкт, який використовується для малювання прямих ліній і кривих.

Приклади :

Pen myPen1 = new Pen(Color.Gold, 2); // перший аргумент – колір, другий – товщина.

Pen myPen1 = new Pen(Color.Gold);// тільки один аргумент, що визначає колір.

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

Приклад:

SolidBrush b1;

          b1 = new SolidBrush(Color.LightGreen)

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

Відповідь. Додаток Windows Forms визначає положення вікна на екрані в екранних координатах. Початок екранних координат знаходиться у верхньому лівому куті екрана, осі напрямлені вниз.

Методи для побудови базових графічних примітивів.

Метод DrawLine проводить відрізок, що сполучає дві точки, які задаються парами координат( (x1, y1) - координати одного кінця; (x2, y2) - координати другого кінця). Загальний вигляд DrawLine (Pen, x1, y1, x2, y2).

Приклад:

Pen myPen1 = new Pen(Color.Gold, 2);

gr.DrawLine (myPen1, 50, 100, 200, 300)

Метод DrawRectangle малює прямокутник, який визначається парою координат (x1,y1) (координати лівого верхнього кута прямокутника), ширини w і висоти h. Якщо ширина і висота співпадають, то отримаємо квадрат. Загальний вигляд:  DrawRectangle (Pen, x1, y1, w, h), Перший аргумент об’єкт класу Pen.

Приклад:

Pen p1 = new Pen(Color.Blue, 3);

DrawRectangle (Pen, 100, 200, 70, 70)

Метод FillRectangle заповнює внутрішню частину прямокутника, що визначається обмежуючим прямокутником, заданим за допомогою пари координат (x1, y1) (координати лівого верхнього кута прямокутника), ширини w і висоти h. Загальний вигляд: FillRectangle (Brush, x1, y1, w, h), Перший аргумент – об’єкт класу SolidBrush.

Приклад:

SolidBrush b1;

b1 = new SolidBrush(Color.Green);

graph.FillRectangle(b1, 170, 130, 70, 140)

Метод DrawEllipse малює еліпс, який визначається обмежуючим прямокутником, заданим за допомогою пари координат (x1,y1) (координати лівого верхнього кута прямокутника), ширини w і висоти h.  Якщо ширина і висота співпадають, то отримаємо круг. Загальний вигляд: DrawEllipse(Pen, x1, y1, w, h), Перший аргумент об’єкт класу  Pen.

Приклад:

Pen myPen1 = new Pen(Color.Gold, 2);

gr.DrawEllipse(myPen1, 200, 200, 300, 150)

Метод FillEllipse заповнює внутрішню частину еліпса, що визначається обмежуючим прямокутником, заданим за допомогою пари координат (x1, y1) (координати лівого верхнього кута прямокутника), ширини w і висоти h. Загальний вигляд:  FillEllipse (Brush, x1, y1, w, h), Перший аргумент – об’єкт класу SolidBrush.

Приклад:

SolidBrush b1;

                    b1 = new SolidBrush(Color.LightGreen);

           gr.FillEllipse(b1, 200, 200, 300, 150)

Метод DrawArc малює дугу, яка є частиною еліпса, заданого парою координат, шириною і висотою. Загальний вигляд: DrawArc (Pen, x, y, w, h, a, l), a – початкове значення кута (в градусах), який вимірюється за годинниковою стрілкою, починаючи від осі X; l – розмір дуги.

Pen myPen1 = new Pen(Color.Gold, 2);

gr.DrawArc(myPen1, 445, 380, 140, 140, 180, 180)

Клас FillPie заповнює внутрішню частину сектора, що визначається еліпсом, який заданий парою координат, шириною, висотою і двома кутами. Загальний вигляд: FillPie (Pen, x, y, w, h, a, l), a – початкове значення кута (в градусах), який вимірюється за годинниковою стрілкою, починаючи від осі X; l – розмір дуги.

Приклад:

b1 = new SolidBrush(Color.Gold);

gr.FillPie(b1, 445, 380, 140, 140, 180, 180)

Для побудови багатокутника треба задати масив точок з координатами, що обмежують багатокутник, а потім побудувати контур багатокутника та (або) заливку.

Для побудови контура багатокутника використовується метод DrawPolygon. Загальний вигляд: DrawPolygon(myPen1, myPoints), myPoints – масив точок.

Для заливки внутрішньої області багатокутника використовується метод

FillPolygon. Загальний вигляд: FillPolygon(b1, myPoints), myPoints – масив точок.

Приклад:

Pen myPen1 = new Pen(Color.Gold, 2);

b1 = new SolidBrush(Color.Gold);

                    // масив точок

            Point[] myPoints4 =          { 

                new Point(550, 210),

                new Point(550, 340),

                new Point(500, 275),             };

            //багатокутник

            gr.FillPolygon(b1, myPoints4);

  gr.DrawPolygon(myPen1, myPoints4);

 

Підсумок уроку

 

Домашнє завдання

Практичні завдання на вибір учня.
✵ Створити проект, під час виконання якого після вибору відповідної кнопки з текстом назви фігури (лінія, прямокутник, квадрат, трикутник, коло, окружність, еліпс) на формі з’являється відповідна фігура.
✵ Створити проект, під час виконання якого на формі з’являється малюнок, створений учнями вдома з графічних примітивів засобами текстового редактора.