Высокоуровневые методы информатики и программирования

Лекция 24

Рисование в форме

План работы

• Класс Graphics• Инструменты рисования– Перо– Кисть– Шрифт

• Рисование фигур• Работа с изображениями

Рисование в окне

Дисплей

• Устройство для отображения световых точек на поверхности экрана

• Поверхность экрана содержит одну прямоугольную матрицу элементарных точек – пикселей.

• Размер каждого пикселя зависит от режима работы дисплея.

• Каждая точка описывается набором данных 1-4 байта

A 19" LG flat-panel LCD monitor.

Пиксель (pixel)• Минимальный элемент изображения на

дисплее (от слов picture и element).• Пиксели упорядочены в двухмерную таблицу и

имеют координаты X (номер столбца) и Y (номер строки).

• С каждым пикселем связан набор данных 1- 24 бит, которые задают цвет точки (bits per pixel, bpp)– 1 bpp, 21 = 2 цвета (монохромный)– 2 bpp, 22 = 4 цвета– 3 bpp, 23 = 8 цветов– ...– 8 bpp, 28 = 256 цветов– 16 bpp, 216 = 65,536 цветов ("Highcolor" )– 24 bpp, 224 ≈ 16.8 млн. цветов ("Truecolor")

• Пиксель имеет физические размеры. Обычно пиксели измеряются в – dots per inch (dpi) или – pixels per inch (ppi) (для дисплея это одно и тоже).

Система координат (по умолчанию)

Разрешение дисплея

• Разрешение дисплея это количество различных пикселей по каждому измерению, которые могут отображаться.

• Дисплей может работать в различных режимах с разными разрешениями.

• К стандартным разрешениям дисплея относятся:

Название Разрешение(млн. пикселей) Ширина × Высота

CGA 0.064 320×200

EGA 0.224 640×350

VGA 0.3 640×480

SVGA 0.5 800×600

XGA 0.8 1024×768

SXGA 1.3 1280×1024

UXGA 1.9 1600×1200

WUXGA 2.3 1920×1200

Selected standard display resolutions include:

Структура окна Windows

Мое первое окно X

cursorclient area

border

title bar

menu bar

status bar

клиентская область

строка состояния

граница

строка заголовка

курсор

button системные кнопки

(0,0) (Left, Top)

(Right, Bottom)

Height

Width

X

Y

строка меню

элемент управления

Дочернее окно

Файл Справка

Bведено 8 объектов

вызов системного меню

Основной класс рисовния System.Windows.Drawing.Graphics

• Соответствует контексту устройства операционной системы (hdc - handle of context device)

• Используется для рисования на поверхности окна

• Использует Graphic Device Interface + (GDI+)

Класс аргументов для события рисования в окне

• При обработке события Paint вторым параметром передается объект класса PaintEventArgs

• Объект PaintEventArgs содержит дополнительные данные– Graphics – ссылка на объект Graphics– ClipRectangle – испорченная прямоугольная

область

Пространство имен System.Drawing

• Используется библиотека GDI+ (gdiplus.dll)• Пространства имен библиотеки

Пространства имен рисования

• System.Drawing – содержит большинство классов, структур, перечислений и делегатов, связанных с рисованием.

• System.Drawing.Drawing2D – включает классы, поддерживающие более продвинутое 2D и векторное рисование, включая сглаживание (anti-aliasing), геометрические преобразования (transformations) и графические пути (paths)

• System.Drawing.Imaging – включает различные классы, которые помогают работать с изображениями (bitmap, GIF file и т.п.)

• System.Drawing.Printing – включает классы для вывода на принтер или предварительного просмотра результатов вывода на принтер;

• System.Drawing.Design – включает некоторые стандартные диалоги (dialog boxes), таблицы свойств (property sheets) и другие элементы пользовательского интерфейса с расширенным интерфейсом пользователя во время пректирования.

• System.Drawing.Text – содержит классы для выполнения наиболее совершенных действий с шрифтами (fonts) и семействами шрифтов (font families).

Библиотека API функций для рисования GDI32.DLL

• Библиотека GDI это набор функций для вывода на внешние устройства. Они предоставляют уровень абстракции, скрывающий различие между разными видео картами или принтерами.

• Программист просто вызывал нужную функцию Windows API для выполнения требуемой работы и GDI определял, как выполнить ее для конкретной видео карты.

• Если пользователь имел несколько устройств отображения, например, дисплеи и принтеры, то GDI позволяет показать на экране, как будет выглядеть результат вывода на принтер.

• Для вывода на принтер вместо дисплея достаточно только указать Операционной Системе, что устройством вывода является принтер и затем использовать те же функции API, которые использовались и для дисплея.

• Библиотека GDI предоставляет достаточно высоко-уровневый API для разработчиков, но все равно этот API основывается на наборе C – подобных функций.

Библиотеки типов рисованияGDI+

• Библиотека GDI+ входит в состав FCL и является посредником между приложением и библиотекой GDI, предоставляя более интуитивно понятную, основанную на наследовании модель классов, структур, интерфейсов и перечислений.

• Хотя GDI+ в основном является оберткой вокруг GDI, Microsoft также реализовал в GDI+ новые особенности и улучшения производительности некоторых функций GDI.

• Библиотека GDI+ является частью библиотеки классов .NET и включает в себя большое количества типов.

• Все эти типы изучить сложно, но важно понять базовые принципы используемые в рисовании, чтобы можно было найти и использовать нужные классы, когда они потребуются.

• Описание всех классов и методов, доступных в GDI+ содержится в MSDN документации.

Основной класс рисования Graphics

• Рисование на поверхности формы (ЭУ) можно выполнить только с помощью объекта класса Graphics.

• Объект класса Graphics позволяет выполнять рисование на заданной поверхности (в окне формы, вывод на принтер или плоттере).

• Реализует интерфейс IDeviceContext, который включает методы для получения и освобождения существующего указателя на контекст устройства операционной системы (Windows device context, hdc - handle of context device)

• Использует интерфейс (набор функций) Graphic Device Interface + (GDI+)

• Пространство имен: System.Drawing (Сборка: System.Drawing.dll).

• Класс Graphics включает 72 метода и 18 свойств.

Основные методы класса Graphics

• void Clear (Color clr) - закраска окна• DrawString(…) – рисование текста• DrawLine(…) – рисование линий• DrawRectangle(…) – рисование прямоугольников• DrawEllipse(…) – рисование эллипсов• DrawCurve(…) – рисование кривых• DrawPoligon(…) – рисование многоугольников• DrawPie(…) – рисование секторов круга• …

Получение объекта Graphics

• Объект класса Graphics нельзя создать самомуGraphics gfx = new Graphics();

• Можно получить ссылку на объект Graphics используя объект формы (или экземпляр производный от Control) с помощью метода CreateGraphics(): Graphics gfx = frm.CreateGraphics(); // получение объекта…gfx.Dispose(); // уничтожение объекта

• В обработчик события Paint объект Graphics передается с помощью параметра PaintEventArgs в виде свойства Graphics

Событие Paint• OC рисует все элементы окна, кроме клиентской области• Когда ОС определяет, что нужно перерисовать поверхность

клиентской области, то она посылает приложению, которое владеет данным окном сообщение WM_PAINT.

• После получения сообщения WM_PAINT класс Control инициирует событие Paint.

• При обработке этого события программа должна заново нарисовать содержание окна, или отдельную его область.

• Программа может сама вызвать создание события WM_PAINT используя метод класса Control :Invalidate() или Invalidate(Rectangle rec)

Выполнение рисования• Рисовать можно в любом методе класса на поверхности

любого окна на которое есть ссылка (например frm).• Используя ссылку frm нужно получить объект Graphics для

данной формы: Graphics gfx = frm.CreateGraphics(); // получение объекта• Используя данный объект можно выполнять рисование.• Следует помнить, что если пользовательская область окна

портится (Invalidated), то для ее восстановления ОС посылает сообщение WM_PAINT (событие Paint).

• Обработчик события Paint должен заново нарисовать пользовательскую область.

• Если требуется в окне что-то, что должно сохраняться при порче окна, то оно должно рисоваться в обработчике события Paint.

Система координат

Система координат (по умолчанию)

Система координат и единиц измерения

• Система координат для задания положения и размеров ЭУ, основывается на координатах устройства и основной единицей измерения при рисовании является пиксель (pixel) – наименьший логический элемент двумерного цифрового изображения в растровой графике.

• Растровое компьютерное изображение состоит из пикселей, расположенных по строкам и столбцам. Точки экрана описываются парами координат (x, y), где координата x увеличивается слева на право, а координата y увеличивается сверху вниз.

• Размещение начала координат зависит от того, задаются ли экранные координаты (координаты экрана) или клиентские координаты (координаты клиентской области окна родителя). – Экранные координаты задают позицию окна на экране дисплея и их началом

является верхний – левый угол экрана. Полное положение окна задается структурой Rectangle, содержащей экранные координаты двух точек, определяющих верхний – левый и правый – нижний углы окна.

– Клиентские координаты задают положение точки в клиентской области окна. Их начальной точкой является верхний – левый угол клиентской области формы или ЭУ.

Классы для описания геометрических объектов

• Для работы с координатами и размерами ЭУ используются определенные в библиотеке FCL структуры – Point, PointF, (поля X и Y)– Size, SizeF (поля Height и Width) – Rectangle (поля X , Y, Height и Width).

• Структуры Point и Size позволяют задать прямоугольную область – структуру Rectangle. Конструктору прямоугольника можно передать в качестве аргументов две структуры – точку, задающую координаты левого верхнего угла прямоугольника, и размер – высоту и ширину прямоугольника.

Класс Point – точка (x,y) (PointF)Point pt = new Point (100,75);

Класс Size – размер (длина ширина) (SizeF)Size sz = new Size (60,100);

Класс Rectangle – прямоугольник (RectangleF)• верхний угол, длина, ширинаRectangle rec = new Rectangle(new Point(50,70),new Size(40,40));• координаты левого верхнего и правого нижнего углаRectangle rec = new Rectangle(x, y, width, height);

Изменение системы координат

• Перенос центра системыgfx.TranslateTransform(x, y);

• Поворот системы кооординат gfx.RotateTransform(угол в градусах);

• Изменение единиц измеренияgfx.PageUnit = GraphicsUnit.Millimeter;

• Задание масштаба– gfx.PageScale = 2F; // увеличить в 2 раза – gfx.PageScale = 0.5F; // уменьшить в 2 раза

Перечисление единиц измерения GraphicsUnit

• GraphicsUnit.Pixel – пиксели (по умолчанию)• GraphicsUnit.Point – поинты (1/72 дюйма)• GraphicsUnit.Inch – дюйм (2.54 см)• GraphicsUnit.Document – 1/300 дюйма• GraphicsUnit.Millimeter – миллиметр

Классы инструментов рисования

Классы инструментов рисования

• Color – цвет пикселя.• Pen – перо, описывает шаблон линии.• Brush – кисть, описывает шаблон

заполнителя замкнутых фигур.• Font – шаблон шрифта для вывода

символов.

Класс Color (цвет)• Статический класс имеет 140 различных

статических цветов• Статический метод создания нового цвета –

комбинация (red, green, blue)

Color.FromArgb (int red, int green, int blue);Красный цвет: red = 0 - 255;Зеленый цвет: green = 0 – 255;Синий цвет: blue = 0 – 255;

Color.FromArgb (int a, int red, int green, int blue);а - прозрачность

Класс Pen (перо)• Статический класс Pens – перья всех стандартных цветов.

• Можно создать свое пероPen pen = new Pen(color);

Pen (Color color); Pen (Color color, float width);

Основные свойства класса Pen:• DashStyle для задания стиля линии - Solid, Dot, Dash, DashDot,

DashDotDot, custom (System.Drawing.Drawing2D.DashStyle)• Color - цвет• Width - ширина

Примеры стилей пера - DashStyle

Кисть Brush (кисть)• Статический класс Brushes – кисти всех

стандартных цветов

Можно создавать свои кисти• Класс SolidBrush – одноцветная кисть• Класс HatchBrush – с геометрическим, регулярным

рисунком• Класс TextureBrush – кисть с произвольным

заданным рисунком• Класс LinearGradientBrush – с градиентной

заливкой

Класс HatchBrush • public HatchBrush(HatchStyle

hStyle, Color forecolor) • public HatchBrush(HatchStyle

hstyle, Color forecolor, Color backcolor)

• Перечисление HatchStyle:– HatchStyle.DarkVertical – HatchStyle.DottedDiamond

Класс LinearGradientBrush (1) Vertical, (2) Horizontal, (3) Focus Point, (4) Tiling

Класс Font (шрифт)• Шрифт – способ рисования символов.• Типы шрифтов

– Растровые– Векторные– Контурные – TrueType

• При выводе текста нужно указывать используемый шрифт.• В ОС устанавливаются семейства (шаблоны) шрифтов. На их

основе создаются конкретные шрифты.

Перечисление всего семейства шрифтов установленных в системе

• Класс InstalledFontCollection содержит в коллекции Families описание всех установленных в ОС шрифтов:

using System.Drawing.Text;using System.Diagnostics;. . . // создаем экземпляр класса InstalledFontCollectionFontFamily[ ] fontFamilies; InstalledFontCollection iFC = new InstalledFontCollection();

// просматриваем коллекцию и выводим в окно Output названия семейств шрифтов

foreach(var fam in iFC.Families) Debug.WriteLine(fam.Name);

Создание шрифта• Конструкторы класса

Font (string strFamily, float size)По умолчанию единица измерения размера шрифта – Point = 1/72 дюйма (2,54 см.)

Font (string strFamily, float size, FontStyle fs)Перечисление FontStyle: Regular (0); Bold (1); Italic (2) Underline (4); Strikeout (8)

• Пример:Font font = new Font (“Times New Roman”, 24;)Font font1 = new Font ("Courier New", 12, FontStyle.Bold | FontStyle.Italic;)

• Можно создать новый фонт на основе имеющегосяFont (Font fnt, FontStyle fs)Font fnt = new Font(“Courier New”, 14);Font font1 = new Font (fnt, FontStyle.Bold | FontStyle.Italic;)

Методы рисования

• Рисование текста• Рисование линий• Рисование фигур

Рисование текста

• Рисование текста относительно верхнего левого угла

• Рисование текста в заданном прямоугольнике

XXXXXXXXXXXXXXXXXXX(x, y)

Center - Center

Near - Near Near - Far

Fart - FarFar - Near

Рисование строки текста

DrawString(string str, Font fn, Brush br, float x , float y)DrawString(string str, Font fn, Brush br, PointF ptf)

DrawString(string str, Font fn, Brush br, RectangleF ptf)DrawString(string str, Font fn, Brush br, RectangleF ptf, StringFormat sf)

где:• str - выводимая строка текста (константа или объект класса

string)• fnt – используемый фонт (объект класса Font)• br – используемая кисть (объект класса Brush)• x и y – координаты вывода строки

Класс StringFormat

• Класс для задания положения строки в прямоугольной областиStringFormat sf = new StringFormat();

• Основные свойства:– Положение по горизонтали

sf.Alignment = StringAlignment.Near (слева), Center (по центру), Far (справа)

– Положение вертикалиsf.LineAlignment = StringAlignment.Near (сверху), Center (по центру), Far (снизу)

Измерение размера текста

• Для определения размеры выводимого текста используется метод класса Graphics: MeasureString(str, Font)

• Например:Sizef s = gfx.MeasureString(str, Font);

Рисование текста под углом

• Устанавливаем начало координат в точку (x, y). gfx.TranslateTransform(x, y);

• Поворот системы кооординат gfx.RotateTransform(угол в градусах)

Рисование линий

• DrawLine(Pen pn, Point pt1, Point pt2);• DrawLine(Pen pn, int x, int y, int x1, int y1);

• DrawLines(Pen pn, Point [] pt);

Рисование фигур

• DrawRectangle(…) – рисование прямоугольника• DrawEllipse(…) – рисование эллепса• DrawCurve(…) – рисование кривой• DrawPoligon(…) – рисование многоугольника• DrawPie(…) – рисование сектора круга

Закраска фигур

• FillRectangle(…)• FillEllipse(…)• FillPoligon(…)• FillPie(…)

Работа с изображениями

Пространство имен System.Drawing.Imaging

• Основные классы– Image – абстрактный базовый класс для Bitmap. Имеет

набор методов для чтения и записи изображений из файлов

– Bitmap - основной класс для создания изображения в оперативной памяти.

• Поддерживаемые графические форматы:– Bitmaps (BMP), – Graphics Interchange Format (GIF), – Joint Photographic Experts Group (JPEG), – Portable Network Graphics (PNG), – Tag Image File Format (TIFF).

Операции с изображениями• Чтение из файлаstring fname = "c:\\globe.gif"; Bitmap bmp = new Bitmap(fname); // Cast to convert Image bmp = (Bitmap)Bitmap.FromFile(fname); • Запись в файлbmp.Save("c:\\globe.jpg",

System.Drawing.Imaging.ImageFormat.Jpeg); • Рисование (gfx – объект Graphics)Bitmap bmp = new Bitmap("C:\\globe.gif");// Draw at coordinates 0,0 gfx.DrawImage(bmp,0,0);

• Bitmap содержит данные и атрибуты пикселей составляющих графическое изображение.

• Существуют разные форматы для хранения bitmap в файлах.

• GDI+ поддерживает такие форматы, как: BMP, GIF, EXIG, JPG, PNG и TIFF.

Класс изображений Image

// Загружаем картинку из файла. Image image = Image.FromFile("1.bmp"); // Создаем объект Graphics для формы. Graphics gfx = this.CreateGraphics();// Выводим изображение gfx.DrawImage(image, 10, 10); // Вписываем изображение gfx.DrawImage(image, 0, 0,this.Width, this.Height);

Класс изображений Bitmap • Чтение из файлаstring fname = "c:\\globe.gif"; Bitmap bmp = new Bitmap(fname); // Cast to convert Image bmp = (Bitmap)Bitmap.FromFile(fname); • Запись в файлbmp.Save("c:\\globe.jpg",

System.Drawing.Imaging.ImageFormat.Jpeg); • РисованиеBitmap bmp = new Bitmap("C:\\globe.gif");// Draw at coordinates 0,0; gfx – объект Graphicsgfx.DrawImage(bmp,0,0);