РОЗДІЛ 1 C#dn.hoippo.km.ua/csharp/asset/doc/pr4-tp.pdf · РОЗДІЛ 1 ТЕОРЕТИЧНІ ... Перший аргумент об’єкт класу Pen. Приклад:

РОЗДІЛ 1

ТЕОРЕТИЧНІ ОСНОВИ ГРАФІКИ В C#

В мові С# для малювання є клас Graphics. Він містить спеціальні методи для малювання.

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

Робота з графікою складається з двох етапів:

1. Створення об'єкта Graphics .

2. Використання об'єкта Graphics для малювання ліній і фігур, відображення тексту або зображень і управління ними.

Створення об'єктів Graphics

Об'єкти Graphics можуть створюватися різними способами.

Щоб створити об'єкт Graphics:

- Отримайте посилання на об'єкт Graphics як частину PaintEventArgs в події Paint форми або елемента керування. Це звичайний спосіб отримання посилання на об'єкт Graphics при створенні коду малювання для елемента керування.

private void Form1_Paint(object sender, PaintEventArgs e) { Graphics gr = e.Graphics; //...ваш код для малювання; }

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

Graphics g = CreateGraphics(); //...створюємо зображення із графічних примітивів;

- Створіть об'єкт Graphics з будь-якого об'єкта, який успадкований від Image . Цей підхід корисний в тих випадках, коли потрібно змінити вже існуючий образ. Викличте метод Graphics.FromImage , вказавши ім'я змінної типу Image, з якої потрібно створити об'єкт Graphics . У наступному прикладі показано, як використовувати об'єкт Bitmap для pictureBox, який попередньо додали на форму:

Bitmap myBitmap = new Bitmap(pictureBox1.Width, pictureBox1.Height); Graphics g = Graphics.FromImage(myBitmap); //...створюємо зображення із графічних примітивів; pictureBox1.Image = myBitmap; //переносимо зображення на pictureBox

Після створення об'єкт Graphics можна використовувати для малювання ліній і фігур, відтворення тексту, а також показу і зміни зображень. Основні об'єкти, які використовуються з об'єктами Graphics:

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

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

Клас Font, що містить опис фігур, які повинні використовуватися при відображенні тексту.

Структура Color , що представляє різні кольори для відображення.

Ну і на завершення. Перш ніж будувати графічні примітиви

подумайте, де знаходиться початок координат та куди напрямлені

осі. Додаток Windows Forms визначає положення вікна на екрані в

екранних координатах. Початок екранних координат знаходиться у

верхньому лівому куті екрана, осі напрямлені вниз і вправо.

Практичне застосування

Щоб отримати об’єкт Graphics, запрограмуємо подію Paint для форми Form1:

private void Form1_Paint(object sender, PaintEventArgs e) {

//код обробника; }

Подія Paint виникає, коли вікно змінює розмір, коли воно перестає закривати (частково або повністю) інше вікно або коли воно було згорнуто а потім розгорнуто. У всіх цих випадках – тобто коли форму необхідно перерисувати, платформа .NET автоматично викликає подію Paint.

Обробник події Form1_Paint() отримує два параметри. Перший параметр типу System.Object sender - посилання на джерело повідомлення (наше вікно Form1), другий параметр типу PaintEventArgs e - посилання на клас Graphics. Параметр типу PaintEventArgs містить об’єкт Graphics, необхідний для прорисовування на поверхні форми.

Метод DrawLine – малювання ліній.

Для того, щоб викликати метод DrawLine, в коді обробника події Paint потрібно написати:

1. Graphics g = e.Graphics; 2. g.Clear(Color.White); 3. Pen myPen = new Pen(Color.Red, 3); 4. myPen.DashStyle = DashStyle.Dot; 5. g.DrawLine(myPen, 50, 50, 200, 200); 6. myPen.Dispose(); g.Dispose();

1. Перш ніж що-небудь намалювати у вікні форми треба створити об’єкт класу Graphics.

2. При потребі перефарбовуємо всю робочу частину вікна проекту білим (або іншим) кольором.

3. Далі ми оголошуємо змінну myPen, для того, щоб вказати колір лінії, товщину пера.

4. При потребі можемо задати стиль лінії пера (в прикладі - крапки).

5. Потім викликаємо метод малювання лінії, для якого передаємо в якості параметрів перо і координати двох точок, через які проводиться лінія.

6. На завершення слід завжди викликати Dispose на будь-які об'єкти, які споживають системні ресурси, такі як Pen об'єкти.

Стилі лінії потребують включення using System.Drawing.Drawing2D;

Стилі ліній:

myPen.DashStyle = DashStyle.Dot; //стиль - крапки myPen.DashStyle = DashStyle.Dash; //стиль - штрих myPen.DashStyle = DashStyle.DashDot; //стиль – штрих-пунктирна myPen.DashStyle = DashStyle.DashDotDot; //стиль – штрих-дві крапки

//стиль малювання: безперервна, товщиною = 7 pix myPen.Width = 7; myPen.DashStyle = DashStyle.Solid;

РОЗДІЛ 2

За матеріалами сайту naurok.com.ua. Конспект уроку Зелінської Юлії Миколаївни

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

Приклади:

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

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

Клас SolidBrush визначає пензлик одного кольору. Пензлики

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

кола, багатокутники.

Приклад:

SolidBrush sb;

sb = new SolidBrush(Color.LightGreen);

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

Метод DrawLine проводить відрізок, що сполучає дві точки, які задаються

парами координат( (x1, y1) - координати одного кінця; (x2, y2) - координати другого

кінця). Загальний вигляд DrawLine (Pen, x1, y1, x2, y2).

Приклад:

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

g.DrawLine (myPen, 50, 100, 200, 300)

Метод DrawRectangle малює прямокутник, який визначається парою

координат (x1,y1) (координати лівого верхнього кута прямокутника), ширини w і

висоти h. Якщо ширина і висота співпадають, то отримаємо квадрат. Загальний

вигляд: DrawRectangle (Pen, x1, y1, w, h), Перший аргумент об’єкт класу Pen.

Приклад:

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

g.DrawRectangle (myPen, 100, 200, 70, 70);

Метод FillRectangle заповнює внутрішню частину прямокутника, що

визначається обмежуючим прямокутником, заданим за допомогою пари координат

(x1, y1) (координати лівого верхнього кута прямокутника), ширини w і висоти h.

Загальний вигляд: FillRectangle (Brush, x1, y1, w, h), Перший аргумент – об’єкт

класу SolidBrush.

https://msdn.microsoft.com/ru-ru/library/wt06kxfd(v=vs.110).aspx


Приклад:

SolidBrush sb;

sb = new SolidBrush(Color.Green);

g.FillRectangle(sb, 170, 130, 70, 140);

Метод DrawEllipse малює еліпс, який визначається обмежуючим

прямокутником, заданим за допомогою пари координат (x1,y1) (координати лівого

верхнього кута прямокутника), ширини w і висоти h. Якщо ширина і висота

співпадають, то отримаємо круг. Загальний вигляд:

DrawEllipse(Pen, x1, y1, w, h), Перший аргумент об’єкт класу Pen. Приклад:


g.DrawEllipse(myPen, 200, 200, 300, 150)

Метод FillEllipse заповнює внутрішню частину еліпса, що визначається

обмежуючим прямокутником, заданим за допомогою пари координат (x1, y1)

(координати лівого верхнього кута прямокутника), ширини w і висоти h. Загальний

вигляд: FillEllipse (Brush, x1, y1, w, h), Перший аргумент – об’єкт класу SolidBrush.

Приклад:

SolidBrush sb;

sb = new SolidBrush(Color.LightGreen);

g.FillEllipse(sb, 200, 200, 300, 150)

Метод DrawArc малює дугу, яка є частиною еліпса, заданого парою координат,

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

значення кута (в градусах), який вимірюється за годинниковою стрілкою,

починаючи від осі X; l – розмір дуги.

Приклад:


g.DrawArc(myPen, 445, 380, 140, 140, 180, 180)

Клас FillPie заповнює внутрішню частину сектора, що визначається еліпсом,

який заданий парою координат, шириною, висотою і двома кутами. Загальний

вигляд: FillPie (Pen, x, y, w, h, a, l), a – початкове значення кута (в градусах), який

вимірюється за годинниковою стрілкою, починаючи від осі X; l – розмір дуги.

Приклад:

SolidBrush sb;

sb = new SolidBrush(Color.Gold);

g.FillPie(sb, 445, 380, 140, 140, 180, 180)



Для побудови багатокутника треба задати масив точок з координатами, що

обмежують багатокутник, а потім побудувати контур багатокутника та (або)

заливку.

Для побудови контура багатокутника використовується метод DrawPolygon.

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

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

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

точок.

Приклад:

// попередньо створити об’єкт класу Graphics. (див. вище)


SolidBrush sb;

sb = new SolidBrush(Color.Gold);

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

Point[] myPoints4 =

{

new Point(550, 210),



};

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

g.FillPolygon(sb, myPoints4);

g.DrawPolygon(myPen, myPoints4);

Практична робота

Завдання1. Скласти програму, яка будує зображення машини за поданим

зразком:

Хід виконання:

1. Створити на робочому столі власну папку.

2. Запустити середовище програмування Visual Studio 2015.

3. Створити проект WindowsForms та зберегти у власну папку.

4. Розмістити на формі один елемент Button. Задати властивості форми та

кнопки самостійно.

5. Створити подію Click для кнопки.

6. Задати код для кнопки «Намалювати»

private void button1_Click(object sender, EventArgs e)

{

Graphics graph;

graph = CreateGraphics();

SolidBrush b1;

b1 = new SolidBrush(Color.Blue);

graph.FillRectangle(b1, 100, 200, 70, 70);

b1 = new SolidBrush(Color.Green);


b1 = new SolidBrush(Color.Yellow);


b1 = new SolidBrush(Color.Green);

graph.FillEllipse(b1, 115, 270, 40, 40);//перше колесо

b1 = new SolidBrush(Color.Gold);

graph.FillEllipse(b1, 185, 270, 40, 40); //друге колесо

b1 = new SolidBrush(Color.LightCoral);

graph.FillRectangle(b1, 245, 200, 120, 70); //перший причіп

b1 = new SolidBrush(Color.LightCoral);

graph.FillRectangle(b1, 370, 200, 120, 70); //другий причіп

b1 = new SolidBrush(Color.LightPink);

graph.FillEllipse(b1, 285, 270, 40, 40); //третє колесо


graph.FillEllipse(b1, 410, 270, 40, 40); //четверте колесо


graph.FillPie(b1, 245, 165, 120, 70, 180, 180); //перший вантаж


graph.FillPie(b1, 370, 165, 120, 70, 180, 180); //другий вантаж


Point[] myPoints =

{




};

graph.FillPolygon(b1, myPoints); //побудова та заливка трикутника

}

7. Запустити проект на виконання. Очікуваний результат:

Завдання 2. Скласти програму, яка будує зображення рибки за зразком:

Хід виконання:

1. Створити проект Windows Forms та зберегти у власну папку.

2. Розмістити на формі один елемент Button. Задати властивості форми та

кнопки самостійно.

3. Створити подію Click для кнопки.

4. Задати код для кнопки «Малюй!»

private void button1_Click(object sender, EventArgs e)

{

Graphics gr;

gr = CreateGraphics();

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

SolidBrush b1;

b1 = new SolidBrush(Color.LightGreen);

gr.FillEllipse(b1, 200, 200, 300, 150);//тулуб риби

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

b1 = new SolidBrush(Color.Red);

Point[] myPoints1 =

{




};

//graph.DrawPolygon(myPen1, myPoints);

gr.FillPolygon(b1, myPoints1); //заливка трикутника

// масив точок з координатами нижнього плавника

Point[] myPoints2 =

{




};

//нижній плавник

gr.FillPolygon(b1, myPoints2);

gr.DrawPolygon(myPen1, myPoints1);


//око

b1 = new SolidBrush(Color.Blue);

gr.FillEllipse(b1, 250, 250, 30, 30);

gr.DrawEllipse(myPen1, 250, 250, 30, 30);

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


// масив точок з координатами носа

Point[] myPoints3 =

{




};

//ніс




// масив точок з координатами хвоста

Point[] myPoints4 =

{




};

//хвіст



//бульбашки

b1 = new SolidBrush(Color.Violet);

gr.FillEllipse(b1, 100, 210, 30, 30);

gr.FillEllipse(b1, 150, 140, 30, 30);

//морський пейзаж


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

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

b1 = new SolidBrush(Color.Red);

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

gr.FillPie(b1, 160, 380, 140, 140, 180, 180);

gr.DrawArc(myPen1, 160, 380, 140, 140, 180, 180);

}

Домашнє завдання. Створити проект, який будує наступне зображення.

РОЗДІЛ 3

За матеріалами сайту-портфоліо http://sayt-portfolio.at.ua/ Кравчук Г.Т.

Будуємо графічні примітиви в C#

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

Pens.Blue; //олівець синього кольору

Для заливки використовуємо пензель Brush. Аналогічно будемо використовувати його статичні властивості brushes.

Brushes.Blue; //кисть синього кольору. Безпосередньо для малювання використовуються наступні об’єкти:

1. FillPie (Brushes.Beige, 100, 100, 500, 500, 0, 90); //залили прямокутну область

2. DrawPie (Pens.Red, 100, 100, 500, 500, 0, 90); // виконали контур

3. Багатокутник. будується по масиву точок, тому спочатку потрібно створити масив, а потім малюємо сам багатокутник

g.DrawPolygon (Pens.Green,tt); І при необхідності його заливаємо

g.FillPolygon (Pens.Green,tt); Під час масштабування форми зменшується не одиниця виміру (це не можливо в принципі, так як розмір форми виміряється в пікселях ), а зменшується кількість пікселів. Для того щоб обійти цю проблему, створюється своя система координат. Початок залишиться там же у верхньому лівому кутку. А ось одиницю виміру змінюємо, прив’язавши її безпосередньо до розмірів форми і, тим самим при зміні розмірів форми буде змінюватися і одиниця виміру.

В константі потрібно прописати, скільки одиниць буде по вертикалі і по горизонталі. Припустимо, що форма це поле 10х10, тоді записуємо

const int x = 10, y=10;

Далі потрібні 2 змінні типу int для зберігання координат x і y

іnt dx, dy; //глобальні змінні Після цього слід перерахувати dx і dy.

dx = (this.ClientSize.Width)/x; dy = (this.ClientSize.Height)/y;

Робити це доведеться в 2 випадках: 1. При завантаженні форми подія Load

2. Під час зміни розміру форми подія Resize

Відображення малюнка на формі відбувається в події Paint. Ця подія спрацьовує автоматично при виклику події Load, а ось при зміні розмірів його потрібно викликати вручну за допомогою команди Refresh (); Далі в подію Paint малюємо звичайними методами, але вже використовуючи нові одиниці вимірювання. Наприклад: Малюємо пряму з точки (2,2) в точку (5,5) Graphics g =e.Graphics ; //ініціалізація графіки

g.DrawLine (Pens.Black, 2 * dx, 2 * dy, 5 * dx, 5 * dy); //малювання прямої

const int x = 10, y=10; int dx, dy; dx = (this.ClientSize.Width)/x; dy = (this.ClientSize.Height)/y; Graphics g =e.Graphics; g.DrawLine (Pens.Black, 2 * dx, 2 * dy, 5 * dx, 5 * dy);

Алгоритм роботи: 1. Створимо нову форму, дамо їй назву

2. Додамо на форму компонент pictureBox необхідного для зображення розміру

3. Тиснемо F7 (або ПКМ на Form1.cs), переходимо до створення програмного коду

4. Запускаємо програму на виконання

Малювання прямокутника

Малювання прямокутника в мові Сі Шарп відбувається через метод: DrawRectangle. При чому лінії ми можемо намалювати різною товщиною: 1px, 2px, 3px, 4px, 5px і так далі. Також ми можемо намалювати їх різними кольорами, які зазначимо.

Pen pen = new Pen(Color.GreenYellow, 3); graph.DrawRectangle(pen, 50, 50, 100, 50);

Приклад малювання зафарбованого сектора

Pen pen = new Pen(Color.Red); Brush Pen = new SolidBrush(Color.Red); graph.FillPie(Pen, 50, 50, 150, 150, 0, 45);

Приклад малювання будиночка

using System.Drawing; using System.Windows.Forms; namespace WindowsFormsApplication1

{ public partial class Form1 : Form { public Form1() { InitializeComponent(); Draw(); } private void Draw() {

Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height); Graphics graph = Graphics.FromImage(bmp); Pen pen=new Pen(Color.Blue); graph.DrawRectangle(pen,50,100,350,200); graph.DrawLine(pen, 50,100,230,10); graph.DrawLine(pen,230,10,400,100); pen = new Pen(Color.Red); graph.DrawRectangle(pen, 100, 150, 70, 100); graph.DrawRectangle(pen, 200, 150, 100, 150); pictureBox1.Image = bmp; } } }

Побудова зафарбованого сектора

private void Draw() { Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height); Graphics graph = Graphics.FromImage(bmp); Pen pen = new Pen(Color.Red,3); Brush Pen = new SolidBrush(Color.Green); graph.FillPie(Pen, 15, 5, 200, 200, 0, 225); pictureBox1.Image = bmp; }

Використання колекції tabControl (побудова графічних примітивів)

private void button1_Click(object sender, EventArgs e) { Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height); Graphics graph = Graphics.FromImage(bmp); Pen pen = new Pen(Color.Blue); graph.DrawEllipse(pen, 40, 40, 120, 120); pictureBox1.Image = bmp; }

private void button2_Click(object sender, EventArgs e) { Bitmap bmp = new Bitmap(pictureBox2.Width, pictureBox2.Height); Graphics graph = Graphics.FromImage(bmp); Pen pen = new Pen(Color.Blue); graph.DrawLine(pen, 50, 50, 200, 200); pictureBox2.Image = bmp; }

private void button3_Click(object sender, EventArgs e) { Bitmap bmp = new Bitmap(pictureBox3.Width, pictureBox3.Height); Graphics graph = Graphics.FromImage(bmp); Pen pen = new Pen(Color.Blue); graph.DrawRectangle(pen, 50, 30, 150, 180); pictureBox3.Image = bmp; }

private void button4_Click(object sender, EventArgs e) { Bitmap bmp = new Bitmap(pictureBox4.Width, pictureBox4.Height); Graphics graph = Graphics.FromImage(bmp); Pen pen = new Pen(Color.Red); graph.DrawEllipse(pen, 30, 30, 120, 150); pictureBox4.Image = bmp; }

private void button5_Click(object sender, EventArgs e) { Bitmap bmp = new Bitmap(pictureBox5.Width, pictureBox5.Height); Graphics graph = Graphics.FromImage(bmp); Pen pen = new Pen(Color.Green); graph.DrawPie(pen, 40, 50, 150, 150, 180, 225); pictureBox5.Image = bmp; }

Побудова фігур із використанням повторень

private void Draw() { Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height); Graphics graph = Graphics.FromImage(bmp); Pen pen = new Pen(Color.Blue,3); for (int i = 1; i < 50; i+=10) { graph.DrawRectangle(pen, 50 + 2 * i, 50 + 2 * i, 200, 100); } pictureBox1.Image = bmp; }

private void Draw() { Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height); Graphics graph = Graphics.FromImage(bmp); Pen pen = new Pen(Color.Red,3); for (int i = 1; i < 100; i+=10) { graph.DrawEllipse(pen, 20, 20, 250-2*i, 250-2*i); } pictureBox1.Image = bmp; }

private void Draw() { Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height); Graphics graph = Graphics.FromImage(bmp); for (int i = 1; i < 50; i += 10) { Pen pen = new Pen(Color.Red, 3); graph.DrawRectangle(pen, 50+6*i, 50, 50, 50); pen = new Pen(Color.Green,3); graph.DrawLine(pen, 50+i, 150+i, 350-i, 150+i); } pictureBox1.Image = bmp; }

Виконайте малюнок самостійно

Побудова графіка функції з використанням елемента Chart (VS 2010)

1. Створили форму з іменем «Графік функції»

2. Додали з панелі елементів елемент Chart, розмістили його на ширину форми

3. На панелі властивостей обрали Titles, розкрили колекцію, у вікні Редактор колекції Titles клікнули кнопку Додати. У правій частині цього вікна обрали властивість Text та ввели заголовок Графік функції ... Ок

4. Перейти до властивості Sеries – це набір графіків. Перейдемо у колекцію, відкривши вікно Редактор колекції Sеries. Активним у ньому є перший графік Sеries1. Для нього оберемо властивість CharType і у випадаючому списку перейдемо до зглаженого графіку SpLine, після цього обираємо властивість LegendText і підпишемо назву графіка, Ок. Отримали лінійний зглажений графік функції.

5. Робимо активною форму. Створюємо обробник події Load для форми, додаємо наступний код у Form1_Load.

6. Організуємо побудову графіка private void Form1_Load(object sender, EventArgs e) {

for (int i=-5; i<=5; i++) { chart1.Series[0].Points.AddXY(i, i*i);

} }

Домашнє завдання. Побудуйте графіки функцій y=sin(x), y=|x|.

Функція х2

Documents

РОЗДІЛ 1 C#dn.hoippo.km.ua/csharp/asset/doc/pr4-tp.pdf · РОЗДІЛ 1 ТЕОРЕТИЧНІ ... Перший аргумент об’єкт класу Pen. Приклад: