Высокоуровневые методы информатики и программирования Лекция 24 Рисование в форме. - презентация

1 Высокоуровневые методы информатики и программирования Лекция 24 Рисование в форме

2 План работы Класс Graphics Инструменты рисования – Перо – Кисть – Шрифт Рисование фигур Работа с изображениями

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

4 Дисплей Устройство для отображения световых точек на поверхности экрана Поверхность экрана содержит одну прямоугольную матрицу элементарных точек – пикселей. Размер каждого пикселя зависит от режима работы дисплея. Каждая точка описывается набором данных 1-4 байта A 19" LG flat-panel LCD monitor.LGLCD monitor

5 Пиксель (pixel) Минимальный элемент изображения на дисплее (от слов picture и element). Пиксели упорядочены в двухмерную таблицу и имеют координаты X (номер столбца) и Y (номер строки). С каждым пикселем связан набор данных бит, которые задают цвет точки (bits per pixel, bpp) – 1 bpp, 2 1 = 2 цвета (монохромный) – 2 bpp, 2 2 = 4 цвета – 3 bpp, 2 3 = 8 цветов –... – 8 bpp, 2 8 = 256 цветов – 16 bpp, 2 16 = 65,536 цветов ("Highcolor" ) – 24 bpp, млн. цветов ("Truecolor") Пиксель имеет физические размеры. Обычно пиксели измеряются в – dots per inch (dpi) или – pixels per inch (ppi) (для дисплея это одно и тоже).

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

7

8 Разрешение дисплея Разрешение дисплея это количество различных пикселей по каждому измерению, которые могут отображаться. Дисплей может работать в различных режимах с разными разрешениями. К стандартным разрешениям дисплея относятся: Название Разрешение (млн. пикселей) Ширина × Высота CGA ×200 EGA ×350 VGA0.3640×480 SVGA0.5800×600 XGA ×768 SXGA ×1024 UXGA ×1200 WUXGA ×1200 Selected standard display resolutions include:

9 Структура окна Windows Мое первое окно X cursor client area border title bar menu bar status bar клиентская область строка состояния граница строка заголовка курсор button системные кнопки (0,0) (Left, Top) (Right, Bottom) Height Width X Y строка меню элемент управления Дочернее окно Файл Справка Bведено 8 объектов вызов системного меню

10 Основной класс рисовния System.Windows.Drawing.Graphics Соответствует контексту устройства операционной системы (hdc - handle of context device) Используется для рисования на поверхности окна Использует Graphic Device Interface + (GDI+)

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

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

13 Пространства имен рисования 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).

14 Библиотека API функций для рисования GDI32. DLL Библиотека GDI это набор функций для вывода на внешние устройства. Они предоставляют уровень абстракции, скрывающий различие между разными видео картами или принтерами. Программист просто вызывал нужную функцию Windows API для выполнения требуемой работы и GDI определял, как выполнить ее для конкретной видео карты. Если пользователь имел несколько устройств отображения, например, дисплеи и принтеры, то GDI позволяет показать на экране, как будет выглядеть результат вывода на принтер. Для вывода на принтер вместо дисплея достаточно только указать Операционной Системе, что устройством вывода является принтер и затем использовать те же функции API, которые использовались и для дисплея. Библиотека GDI предоставляет достаточно высоко-уровневый API для разработчиков, но все равно этот API основывается на наборе C – подобных функций.

15 Библиотеки типов рисования GDI+ Библиотека GDI+ входит в состав FCL и является посредником между приложением и библиотекой GDI, предоставляя более интуитивно понятную, основанную на наследовании модель классов, структур, интерфейсов и перечислений. Хотя GDI+ в основном является оберткой вокруг GDI, Microsoft также реализовал в GDI+ новые особенности и улучшения производительности некоторых функций GDI. Библиотека GDI+ является частью библиотеки классов.NET и включает в себя большое количества типов. Все эти типы изучить сложно, но важно понять базовые принципы используемые в рисовании, чтобы можно было найти и использовать нужные классы, когда они потребуются. Описание всех классов и методов, доступных в GDI+ содержится в MSDN документации.

16 Основной класс рисования Graphics Рисование на поверхности формы (ЭУ) можно выполнить только с помощью объекта класса Graphics. Объект класса Graphics позволяет выполнять рисование на заданной поверхности (в окне формы, вывод на принтер или плоттере). Реализует интерфейс IDeviceContext, который включает методы для получения и освобождения существующего указателя на контекст устройства операционной системы (Windows device context, hdc - handle of context device) Использует интерфейс (набор функций) Graphic Device Interface + (GDI+) Пространство имен: System.Drawing (Сборка: System.Drawing.dll). Класс Graphics включает 72 метода и 18 свойств.

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

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

19 Событие Paint OC рисует все элементы окна, кроме клиентской области Когда ОС определяет, что нужно перерисовать поверхность клиентской области, то она посылает приложению, которое владеет данным окном сообщение WM_PAINT. После получения сообщения WM_PAINT класс Control инициирует событие Paint. При обработке этого события программа должна заново нарисовать содержание окна, или отдельную его область. Программа может сама вызвать создание события WM_PAINT используя метод класса Control : Invalidate() или Invalidate(Rectangle rec)

20 Выполнение рисования Рисовать можно в любом методе класса на поверхности любого окна на которое есть ссылка (например frm). Используя ссылку frm нужно получить объект Graphics для данной формы: Graphics gfx = frm.CreateGraphics(); // получение объекта Используя данный объект можно выполнять рисование. Следует помнить, что если пользовательская область окна портится (Invalidated), то для ее восстановления ОС посылает сообщение WM_PAINT (событие Paint). Обработчик события Paint должен заново нарисовать пользовательскую область. Если требуется в окне что-то, что должно сохраняться при порче окна, то оно должно рисоваться в обработчике события Paint.

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

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

23 Система координат и единиц измерения Система координат для задания положения и размеров ЭУ, основывается на координатах устройства и основной единицей измерения при рисовании является пиксель (pixel) – наименьший логический элемент двумерного цифрового изображения в растровой графике. Растровое компьютерное изображение состоит из пикселей, расположенных по строкам и столбцам. Точки экрана описываются парами координат (x, y), где координата x увеличивается слева на право, а координата y увеличивается сверху вниз. Размещение начала координат зависит от того, задаются ли экранные координаты (координаты экрана) или клиентские координаты (координаты клиентской области окна родителя). – Экранные координаты задают позицию окна на экране дисплея и их началом является верхний – левый угол экрана. Полное положение окна задается структурой Rectangle, содержащей экранные координаты двух точек, определяющих верхний – левый и правый – нижний углы окна. – Клиентские координаты задают положение точки в клиентской области окна. Их начальной точкой является верхний – левый угол клиентской области формы или ЭУ.

24 Классы для описания геометрических объектов Для работы с координатами и размерами ЭУ используются определенные в библиотеке 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);

25 Изменение системы координат Перенос центра системы gfx.TranslateTransform(x, y); Поворот системы кооординат gfx.RotateTransform(угол в градусах); Изменение единиц измерения gfx.PageUnit = GraphicsUnit.Millimeter; Задание масштаба – gfx.PageScale = 2F; // увеличить в 2 раза – gfx.PageScale = 0.5F; // уменьшить в 2 раза

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

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

28 Color – цвет пикселя. Pen – перо, описывает шаблон линии. Brush – кисть, описывает шаблон заполнителя замкнутых фигур. Font – шаблон шрифта для вывода символов.

29 Класс Color (цвет) Статический класс имеет 140 различных статических цветов Статический метод создания нового цвета – комбинация (red, green, blue) Color.FromArgb (int red, int green, int blue); Красный цвет: red = ; Зеленый цвет: green = 0 – 255; Синий цвет: blue = 0 – 255; Color.FromArgb (int a, int red, int green, int blue); а - прозрачность

30 Класс 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 - ширина

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

32 Кисть Brush (кисть) Статический класс Brushes – кисти всех стандартных цветов Можно создавать свои кисти Класс SolidBrush – одноцветная кисть Класс HatchBrush – с геометрическим, регулярным рисунком Класс TextureBrush – кисть с произвольным заданным рисунком Класс LinearGradientBrush – с градиентной заливкой

33 Класс HatchBrush public HatchBrush(HatchStyle hStyle, Color forecolor) public HatchBrush(HatchStyle hstyle, Color forecolor, Color backcolor) Перечисление HatchStyle: – HatchStyle.DarkVertical – HatchStyle.DottedDiamond

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

35 Класс Font (шрифт) Шрифт – способ рисования символов. Типы шрифтов – Растровые – Векторные – Контурные – TrueType При выводе текста нужно указывать используемый шрифт. В ОС устанавливаются семейства (шаблоны) шрифтов. На их основе создаются конкретные шрифты.

36 Перечисление всего семейства шрифтов установленных в системе Класс InstalledFontCollection содержит в коллекции Families описание всех установленных в ОС шрифтов: using System.Drawing.Text; using System.Diagnostics;... // создаем экземпляр класса InstalledFontCollection FontFamily[ ] fontFamilies; InstalledFontCollection iFC = new InstalledFontCollection(); // просматриваем коллекцию и выводим в окно Output названия семейств шрифтов foreach(var fam in iFC.Families) Debug.WriteLine(fam.Name);

37 Создание шрифта Конструкторы класса 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;)

38 Методы рисования Рисование текста Рисование линий Рисование фигур

39 Рисование текста Рисование текста относительно верхнего левого угла Рисование текста в заданном прямоугольнике XXXXXXXXXXXXXXXXXXX (x, y) Center - Center Near - NearNear - Far Fart - FarFar - Near

40 Рисование строки текста 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 – координаты вывода строки

41 Класс StringFormat Класс для задания положения строки в прямоугольной области StringFormat sf = new StringFormat(); Основные свойства: – Положение по горизонтали sf.Alignment = StringAlignment.Near (слева), Center (по центру), Far (справа) – Положение вертикали sf.LineAlignment = StringAlignment.Near (сверху), Center (по центру), Far (снизу)

42 Измерение размера текста Для определения размеры выводимого текста используется метод класса Graphics: MeasureString(str, Font) Например: Sizef s = gfx.MeasureString(str, Font);

43 Рисование текста под углом Устанавливаем начало координат в точку (x, y). gfx.TranslateTransform(x, y); Поворот системы кооординат g fx. RotateTransform(угол в градусах)

44 Рисование линий DrawLine(Pen pn, Point pt1, Point pt2); DrawLine(Pen pn, int x, int y, int x1, int y1); DrawLines(Pen pn, Point [] pt);

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

46 Закраска фигур FillRectangle(…) FillEllipse(…) FillPoligon(…) FillPie(…)

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

48 Пространство имен 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).

49 Операции с изображениями Чтение из файла 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);

50 Bitmap содержит данные и атрибуты пикселей составляющих графическое изображение. Существуют разные форматы для хранения bitmap в файлах. GDI+ поддерживает такие форматы, как: BMP, GIF, EXIG, JPG, PNG и TIFF.

51 Класс изображений 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);

52 Класс изображений 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 – объект Graphics gfx.DrawImage(bmp,0,0);