МІНІСТЕРСТВО ОСВІТИ І НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ
ТЕХНІЧНИЙ КОЛЕДЖ НАЦІОНАЛЬНОГО УНІВЕРСИТЕТУ «ЛЬВІВСЬКА ПОЛІТЕХНІКА»
КАФЕДРА ІНФОРМАЦІЙНИХ
ТЕХНОЛОГІЙ ТА
КОМП’ЮТЕРНОЇ ТЕХНІКИ
Лабораторна робота №5
з Людино-машинний інтерфейс
на тему:
“ Конструювання програм з графічним інтерфейсом GDI+ ”
м. Львів – 2011
Мета: Засвоїти методику та виробити практичні навички у проектуванні та створенні програм з графічним інтерфейсом GDI+.
Теоретичні відомості.
Нова концепція графічного інтерфейсу GDI+( Graphics Device Interface) дещо відрізняється від концепці «класичного» графічного інтерфейсу GDI. Для того щоб програма міг що-небудь намалювати у вікні, вона повинна, перш за все, отримати або створити для цього об'єкт класу Graphics. Користуючись властивостями і методами цього об'єкта, програма може малювати у вікні різні фігури або текстові рядки.
Ідентифікатор вікна Handle і об'єкт Graphics.
Перш ніж намалювати у вікні нашої програми, потрібно мати для цього вікна об'єкт класу Graphics. Кожне вікно має свій ідентифікатор (handle). Знаючи ідентифікатор вікна, можна легко отримати пов'язаний з цим вікном контекст відображення. Програми Microsoft. NET Framework можуть отримати ідентифікатор форми або будь-якого іншого елемента керування за допомогою властивості Handle. Програма отримує ідентифікатор вікна форми Form1 за допомогою властивості this.Handle. Знаючи ідентифікатор вікна, за допомогою методу Graphics.FromHwnd неважко отримати потрібний об'єкт класу Graphics:
Graphics g = Graphics.FromHwnd (this.Handle);
Програміст, що створює додаток GDI +, має потребу в інструментах для малювання. Створюється кисть як об'єкт класу SolidBrush:
SolidBrush redBrush = new SolidBrush (Color. Red);
За допомогою цієї кисті можна малювати замкнуті геометричні фігури, зафарбовані заданим кольором. Через єдиний параметр передається конструктор класу SolidBrush колір кисті Color.Red. Таким чином, малюється пензлем червоного кольору.
У класі Graphics є безліч різних методів, призначених для малювання самих різних геометричних фігур, таких як лінії, прямокутники, овали та кола, багатокутники, криві Безьє і т.д. Але в цьому класі немає метода, за допомогою якого можна було б намалювати одну єдину точку. Замість крапки можна намалювати зафарбований квадрат з шириною боку, рівним 1 пікселу. Це виконується за допомогою методу FillRectangle:
g. FillRectangle (redBrush, e. X, e. Y, 1, 1);
Метод FillRectangle викликається для об'єкта g класу Graphics. В якості першого параметра методу FillRectangle передається кисть redBrush, яку потрібно використовуваті для малювання. Кисть потрібна і для інших методів класу Graphics, призначення для малювання геометричних фігур. Другий и Третій параметр методу FillRectangle задають координати, в якіх буде намальованій квадрат. Початок системи координат при цьому знаходиться в лівому верхньому кутку вікна, для якого був отриманий об'єкт Graphics.
Вісь X в цій системі координат, прийнятій за замовчуванням, спрямована зліва направо, а вісь Y - зверху вниз.
Обробникові Form 1_ Paint передаються два параметри.
Через перший параметр передається посилання на об'єкт. Що ж стосується другого параметра, то через нього передається посилання на об'єкт класу PaintEventArgs. Цей об'єкт має дві властивості, доступних тільки для читання - Graphics і ClipRectangle.
Клас Graphics - є контекст відображення, необхідний для малювання тексту і геометричних фігур. Обробник події Paint отримує контекст відображення через свої параметри, тому програмісту не потрібно визначати його спеціальним чином.
Через властивість ClipRectangle передаються межі області, яку повинен перемалювати обробник події Paint.
Обробник події Paint може ігнорувати властивість ClipRectangle, перемальовуючи вміст вікна повністю. Однак процес перемальовування вмісту вікна можна помітно прискорити, якщо перемальовувати не все вікно, а тільки область, описану властивістю ClipRectangle. Прискорення буде особливо помітним, якщо у вікні намальовано багато тексту і геометричних фігур.
Тут в тілі обробника Form1_Paint визначили локальну змінну g класу Graphics, призначену для зберігання контексту відображення. Ця змінна ініціалізується за допомогою значення, отриманого з властивості Graphics першого параметра обробника Form1_Paint:
Graphics g = e. Graphics;
Отримавши контекст відображення, обробник події Paint може малювати у відповідному вікні все, що завгодно. Спочатку зафарбовується вікно білим кольором, викликаючи для цього метод Clear, визначений в класі Graphics:
g. Clear (Color. White);
Таким способом можна зафарбувати фон, колір якого заданий для форми у властивості BackColor. Методи DrawString, DrawRectangle і DrawEllipse, також визначені в класі Graphics:
g.DrawString (text, new Font ("Helvetica", 15), Brushes.Black, 0, 0);
g.DrawRectangle (new Pen (Brushes.Black, 2), 10, 30, 200, 100);
g.DrawEllipse (new Pen (Brushes.Black, 2), 150, 120, 100, 130);
Перший з них малює текстовий рядок у верхній частині вікна, а два інших - прямокутник і еліпс, відповідно.
Метод DrawLine малює лінію, що сполучає дві точки з заданими координатами:
Перший параметр задає інструмент для малювання лінії - перо. Пір'я створюються як об'єкти класу Pen, наприклад:
Pen p = new Pen (Brushes. Black, 2);
Створюється чорне перо товщиною 2 пікселя. Створюючи пероможна вибрати його колір, товщину і тип лінії, а також інші атрибути. Інші параметри перевантажених методів DrawLine задають координати з'єднуючих точок. Ці координати можуть бути задані як об'єкти класу Point і PointF, а також у вигляді цілих чисел і чисел з плаваючою крапкою.
У класах Point і PointF визначені властивості X і Y, які визначають, відповідно, координати точки по горизонтальній і вертикальної осі. При цьому в класі Point ці властивості мають цілочисельні значення, а в класі PointF - значення з плаваючою крапкою.
Третій і четвертий варіант методу DrawLine дозволяє задавати координати з'єднуються точок у вигляді двох пар чисел. Перша пара визначає координати першої точки по горизонтальній і вертикальній осі, а друга - координати другої точки по цих же осях. Різниця між третім і четвертим методом полягає у використанні координат різних типів (цілочисельних int і з плаваючою крапкою float).
private void Form 1_ Paint (object sender, System. Windows. Forms. PaintEventArgs e)
{
Graphics g = e. Graphics;
g. Clear (Color. White);
for (int i = 0; i <50; i + +)
{
g. DrawLine (new Pen (Brushes. Black, 1), 10, 4 * i + 20, 200, 4 * i + 20);
}
}Тут викликається метод DrawLine в циклі, Малюється 50 горизонтальних ліній.
Клас Rectangle використовується для опису розташування і розмірів прямокутної області. Властивості X та Y цього класу задають координати верхнього лівого кута прямокутної області, відповідно, по горизонтальній і вертикальної осі координат. Властивості Width і Height, зберігають, відповідно, ширину і висоту прямокутної області. У класі Rectangle визначені й інші властивості, а також методи. Детальний опис цього класу Ви знайдете в документації.
Варіанти методу DrawRectangle з п'ятьма параметрами дозволяють задавати розташування і розміри прямокутника у вигляді цілих чисел, а також у вигляді числі з плаваючою крапкою. Другий і третій параметр задає розташування верхнього лівого кута по горизонтальній і вертикальній осі координат, відповідно, а четвертий і п'ятий - ширину і висоту прямокутника.
Pen myPen = new Pen (Color.Black, 2);
Rectangle [] myRectsArray =
{new Rectangle (10, 10, 200, 200),new Rectangle (20, 20, 180, 180),new Rectangle (30, 30, 160, 160),new Rectangle (40, 40, 140, 140)};
Метод DrawRectangles викликається в тілі обробника події Paint, вихідний текст якого наведено нижче:
private void Form1_Paint (object sender, System.Windows.Forms.PaintEventArgs e)
{
Graphics g = e.Graphics;
g.Clear (Color.White);
g.DrawRectangles (myPen, myRectsArray);
}
Метод DrawPolygon допоможе Вам, коли потрібно намалювати багатокутник, заданий своїми вершинами.
Передбачено два варіанти цього методу:
public void DrawPolygon (Pen, Point[]); public void DrawPolygon (Pen, PointF[]);
У першому випадку методу DrawPolygon через другий параметр передається масив точок класу Point, в якому координати точок задані цілими числами, а в другому — масив класу PointF , де координати з’єднувальних точок задаються у вигляді чисел із плаваючою десятковою точкою.
Еліпс
Метод DrawEllipse рисує еліпс, вписаний у прямокутну область, розміщення і розміри якої передаються йому в якості параметрів.
Передбачено чотири перевантажених варіанти методу DrawEllipse:
public void DrawEllipse (Pen, Rectangle); public void DrawEllipse (Pen, RectangleF); public void DrawEllipse (Pen, int, int, int, int); public void DrawEllipse (Pen, float, float, float, float);
Ці методи відрізняються тільки способом, за допомогою якого описується розташування і розміри прямокутної області, в яку вписаний еліпс. Можна задавати розташування і розміри цієї області у вигляді розглянутих раніше об'єктів класу Rectangle, RectangleF, а також у вигляді цілих чисел або числі з плаваючою крапкою.
Сегмент еліпса
За допомогою методу Draw Arc програма може намалювати сегмент еліпса. Сегмент задається за допомогою координат прямокутної області, в яку вписаний еліпс, а також двох кутів, відлічуваних в напрямку проти годинникової стрілки. Перший кут Angle 1 задає розташування одного кінця сегмента, а другий Angle 2 - розташування іншого кінця сегмента (рис. 10-13).
Передбачено чотири перевантажених варіанти методу Draw Arc :
public void DrawArc (Pen, Rectangle, float, float); public void DrawArc (Pen, RectangleF, float, float); public void DrawArc (Pen, int, int, int, int, int, int); public void DrawArc (Pen, float, float, float, float, float, float);
Перший параметр методу Draw Arc визначає перо, з допомогою якого буде намальований сегмент. Останні два параметри задають кути Angle 1 і Angle 2 відповідно до рис. 10-13. Розташування та розміри прямокутної області передаються методу Draw Arc аналогічно тому, як це робиться для розглянутого вище методу DrawEllipse.
Криві Безьє
Сплайн являє собою криву лінію, що сполучає між собою кілька точок. Крива Безье, що представляє собою одну з різновидів сплайна, задається чотирма точками. Дві з них - початкова і кінцева, а дві інші - керуючі. Крива Безье проходить через початкову та кінцеву точки, а управляючі точки задають вигини кривої лінії. Ті з Вас, хто коли-небудь працював з векторними графічними редакторами, наприклад, з редактором Corel Draw, знають про існування кривих Безьє і керуючих точок.
Для малювання кривих Безьє є два перевантажених набору методів DrawBezier і DrawBeziers:
public void DrawBezier (Pen, Point, Point, Point, Point); public void DrawBezier (Pen, PointF, PointF, PointF, PointF); public void DrawBezier (Pen, float, float, float, float, float, float, float, float);
public void DrawBeziers (Pen, Point[]); public void DrawBeziers (Pen, PointF[]);
У всіх цих методах перший параметр задає перо, яке буде використане для малювання. Інші параметри задають координати початкової, кінцевої і керуючих точок.
Що стосується методу DrawBeziers, то він дозволяє задавати координати точок у вигляді масивів, що може бути зручно в деяких випадках.
Зафарбовані фігури
У класі Graphics визначено ряд методів, призначених для малювання зафарбованих фігур. Імена деяких з цих методів, які мають префікс Fill, перераховано в табл. 10 2.Таблиця 10-2. Методи для малювання зафарбованих фігур
Метод
Опис
FillRectangle
Малювання зафарбованого прямокутника
FillRectangles
Малювання множини зафарбованих прямокутників
FillPolygon
Малювання зафарбованого багатокутника
FillEllipse
Малювання зафарбованого еліпса
FillPie
Малювання зафарбованого сегмента еліпса
FillClosedCurve
Малювання зафарбованого сплайна
Fill Region
Малювання зафарбованої області типу Region
Є дві відмінності методів з префіксом Fill від однойменних методів з префіксом Draw. Перш за все, методи з префіксом Fill малюють зафарбовані фігури, а методи з префіксом Draw - незафарбовані. Крім цього, в якості першого параметра методам з префіксом Fill передається не перо класу Pen, а кисть класу Brush.Приклад:
SolidBrush redBrush = new SolidBrush ( Color . Red ); g . FillEllipse ( redBrush , 50, 50, 100, 110);
Тут спочатку створюємо кисть червоного кольору як об'єкт класу SolidBrush. Ця кисть потім передається методу FillEllipse в якості першого параметра. Інші параметри методу FillEllipse задають розташування і розміри прямокутника, в який буде вписаний еліпс.
Інструменти для малювання
Піря
Піря використовуються для малювання ліній і простих геометричних фігур та створюються як об’єкти класу Pen . Відповідні конструктори :
public Pen(Color); public Pen(Color, float); public Pen(Brush); public Pen(Brush, float);
Перший із цих конструкторів створює перо заданного кольору. Колір задається за допомогою об'єкту класу Color. Другий конструктор дозволяє додатково задати товщину пера.
Третій і четвертий конструктор створюють перо на основі кисті, причому в четвертому конструкторі можна вказати товщину створюваного пера. Про кистях ми розповімо трохи пізніше в цьому розділі.
Після того як перо створено, програма може визначити його атрибути за допомогою властивостей класу Pen. Деякі з цих властивостей перераховані в табл. 10-7.
Таблиця 10-7. властивості пера
Властивість
Опис
Alignment
Вирівнювання пера
Width
Ширина линії
Brush
Кисть, що використовується пером
Color
Колір пера
DashStyle
Стиль пунктирних і штрих-пунктирних ліній
DashCup
Вид точок і штріхов пунктирних і штрих-пунктирних ліній
DashOffset
Відстань від початку лінії до початку штриха
DashPattern
Масив шаблонів для створення довільних штрихів і пробілів штрихових і штрих-пунктирних ліній
StartCup EndCup
Стиль кінців ліній
LineCap
Форми кінців ліній
LineJoin
Стиль зєднання кінців двох різних ліній
MiterLimit
Гранична товщина в області з'єднання гострих ліній
Якщо треба намалювати пунктирну або штрих-пунктирну лінію, програма має задати необхідне значення для властивості DashStyle. При цьому допускається змінювати вигляд крапок і тире пунктирних і штрих-пунктирних ліній (властивість DashCup), задавати відстань від початку лінії до початку штриха (властивість DashOffset) або навіть зовсім задати довільний вид для штрихів і розділяють ці штрихи прогалин (властивість DashPattern).
При необхідності змінити зовнішній вигляд кінців ліній використовуйте властивості StartCup і EndCup, що задають стиль кінців ліній. Властивість LineCap визначає форму кінців ліній.
Хід роботи
Завдання. Спроектувати та розробити програму, яка б виводила радіо елемент та за допомогою клавіатури рухати його по формі
Варіант 5
Код програми:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace laba_GDI_
{
public partial class Form1 : Form {
String text = "Світлодіод";
int p = 0;
int x, y;
public Form1() {
InitializeComponent(); }
private void Form1_Paint(object sender, PaintEventArgs e) {
Graphics g = e.Graphics;
diod(e, g, x, y); }
private void Form1_Load(object sender, EventArgs e) {
x = 150; y = 180; }
private void diod(PaintEventArgs e, Graphics g, int x, int y) {
g.Clear(Color.White);
g.DrawString(text, new Font("Helvetica", 15), Brushes.Black, 250, 50);
g.DrawEllipse(new Pen(Brushes.Black, 2), x, y, 100, 100);
g.DrawLine(new Pen(Brushes.Black, 2), x - 20, y + 50, x + 120, y + 50);
g.DrawLine(new Pen(Brushes.Black,2), x+70,y+30,x+70,y+70);
g.DrawLine(new Pen(Brushes.Black,2),x+30,y+30,x+30,y+70);
g.DrawLine(new Pen(Brushes.Black,2),x+30,y+30,x+70,y+50);
g.DrawLine(new Pen(Brushes.Black, 2), x + 30, y + 70, x + 70, y + 50);
g.DrawLine(new Pen(Brushes.Black, 2), x + 100, y - 40, x + 70, y - 10);
g.DrawLine(new Pen(Brushes.Black, 2), x + 100, y - 40, x + 80, y - 35);
g.DrawLine(new Pen(Brushes.Black, 2), x + 100, y - 40, x + 98, y - 25);
g.DrawLine(new Pen(Brushes.Black, 2), x + 140, y + 0, x +110, y +30);
g.DrawLine(new Pen(Brushes.Black, 2), x + 140, y + 0, x + 120, y + 05);
g.DrawLine(new Pen(Brushes.Black, 2), x + 140, y + 0, x + 138, y + 15); }
private void diodMove(Graphics g, int x, int y) {
g.Clear(Color.White);
g.DrawString(text, new Font("Helvetica", 15), Brushes.Black, 250, 50);
g.DrawEllipse(new Pen(Brushes.Black, 2), x, y, 100, 100);
g.DrawLine(new Pen(Brushes.Black, 2), x - 20, y + 50, x + 120, y + 50);
g.DrawLine(new Pen(Brushes.Black, 2), x + 70, y + 30, x + 70, y + 70);
g.DrawLine(new Pen(Brushes.Black, 2), x + 30, y + 30, x + 30, y + 70);
g.DrawLine(new Pen(Brushes.Black, 2), x + 30, y + 30, x + 70, y + 50);
g.DrawLine(new Pen(Brushes.Black, 2), x + 30, y + 70, x + 70, y + 50);
g.DrawLine(new Pen(Brushes.Black, 2), x + 100, y - 40, x + 70, y - 10);
g.DrawLine(new Pen(Brushes.Black, 2), x + 100, y - 40, x + 80, y - 35);
g.DrawLine(new Pen(Brushes.Black, 2), x + 100, y - 40, x + 98, y - 25);
g.DrawLine(new Pen(Brushes.Black, 2), x + 140, y + 0, x + 110, y + 30);
g.DrawLine(new Pen(Brushes.Black, 2), x + 140, y + 0, x + 120, y + 05);
g.DrawLine(new Pen(Brushes.Black, 2), x + 140, y + 0, x + 138, y + 15); }
private void Form1_KeyPress(object sender, KeyPressEventArgs e) {
Graphics g = Graphics.FromHwnd(this.Handle);
g.Clear(Color.White);
if (e.KeyChar == 'w') {
this.diodMove(g, x, y);
y = y - 1; }
else if (e.KeyChar == 's') {
this.diodMove(g, x, y);
y = y + 1; }
else if (e.KeyChar == 'd') {
this.diodMove(g, x, y);
x = x + 1; } else if (e.KeyChar == 'a') {
this.diodMove(g, x, y);
x = x - 1; } } }}
UML-діаграма
Результат виконання програми:
Висновок: засвоїти методику та виробив практичні навички роботи та створення Windows форм за допомогою Visual C# 2010.