1 / 76

Компьютерная графика. Лекция 2

Компьютерная графика. Лекция 2. Программирование с использованием GDI + и технологии WPF. Компьютерная графика. Лекция 2. Многоуровневая архитектура графической подсистемы. Верхний слой – клиентские API GDI, DirectDraw, Direct3D, OpenGL, GDI+ , WPF

mayten
Download Presentation

Компьютерная графика. Лекция 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Компьютерная графика. Лекция 2 Программирование с использованием GDI+ и технологии WPF

  2. Компьютерная графика. Лекция 2 Многоуровневая архитектура графической подсистемы • Верхний слой – клиентские API • GDI, DirectDraw, Direct3D, OpenGL, GDI+, WPF • используются прикладными программами • находятся в адресном пространстве приложения • Средний слой – т.н. Graphics Engine • часть ядра ОС • содержит сотни функций, используемых верхним слоем • Нижний слой – драйвер устройства • осуществляет непосредственное взаимодействие с графическим устройством • используется средним слоем для доступа к устройству

  3. Компьютерная графика. Лекция 2 Приложение GDI, GDI+ Graphics Engine Драйвер устройства Аппаратное устройство

  4. Компьютерная графика. Лекция 2 GDI • GDI (GraphicsDeviceInterface) – API фирмы Microsoft для аппаратно-независимого программирования различных графических устройств • Видеоадаптеры • Принтеры • Изначально разработана для Windows 3.1 • 16-битное графическое ядро по наследству перешло и в Windows 95/98 • в WindowsNT/2000+ используется 32-битное графическое ядро, предоставляющее больше возможностей • GDI+ - это новоеграфическое API, появившееся в Windows XP/2003 Server • Объектно-ориентированный интерфейс предоставленный в виде набора C++ классов

  5. Компьютерная графика. Лекция 2 Достоинства GDI • Абстрагирование от особенности работы различных графических устройств • Один и тот же код может с легкостью производить вывод на различные графические устройства • Данная особенность сделала GDI основным инструментом программирования пользовательского интерфейса Windows

  6. Компьютерная графика. Лекция 2 Недостатки GDI • Огромное количество функций усложняет изучение данного API • Отсутствие сглаживания векторных примитивов, растровых изображений и шрифтов • Слабые возможности по работе с полупрозрачными изображениями • Отсутствие поддержки изображений в формате, отличном от BMP и WMF/EMF • Управление ресурсами целиком возложено на программиста, а не на библиотеку • За универсальность пришлось заплатить низким быстродействием, что сделало GDI малопригодным для динамических приложений

  7. Компьютерная графика. Лекция 2 Что такое GDI+ • Объектно-ориентированная библиотека для вывода графики • Представлена в виде нескольких десятков классов на С++ • появилась начиная с Windows XP • доступна в виде redistributable packages для Windows 98/ME/NT4/2000 Область применения GDI+ • Двумерная векторная графика • Обработка растровых изображений • Вывод текстов

  8. Компьютерная графика. Лекция 2 Достоинства и недостатки GDI+ • Достоинства • улучшены возможности по работе с текстом, векторной и растровой графикой • вместо сотен функций GDI+ предоставляет несколько десятков хорошо спроектированных C++ классов • большая часть работы по управлению ресурсами возложена на библиотеку и компилятор • разработчикирекомендуют использовать GDI+ вместо GDI в новых программах • Недостаток • низкая производительность • универсальность и в этот раз делает GDI+ малопригодной для создания динамических приложений

  9. Компьютерная графика. Лекция 2 Графические объекты GDI+ • Для отображения графики и текста GDI использует следующие графические объекты: • Bitmap – растровое изображение; • Brush – кисть; • Font – шрифт; • Metafile – метафайл; • Path – путь; • Pen – перо; • Region – регион.

  10. Компьютерная графика. Лекция 2 Bitmap • Растровое изображение, имеющее определенный формат пикселей и, возможно, палитру • Типы растровых изображений: • DDB – device-dependent bitmap • DIB – device-independent bitmap

  11. Компьютерная графика. Лекция 2 Brush • Графический объект, используемый GDI для заполнения внутренностей замкнутых примитивов • эллипс, многоугольник, путь • заполнение внутренней области может быть как сплошным, заштрихованным, использовать шаблон или растровое изображение

  12. Компьютерная графика. Лекция 2 Типы кистей В GDI+ появилась поддержка кистей с градиентной заливкой. Градиент применяется для заполнения внутренностей замкнутых фигур и путей

  13. Компьютерная графика. Лекция 2 Font • Шрифт – графический объект GDI+, используемый для вывода текста • Шрифт определяет начертание символов • Типы шрифтов • Растровые шрифты (определяют набор растровых изображения символов) • Векторные шрифты (отрезки линий, определяющие внешний вид символов) • TrueType- и OpenType-шрифты (содержат команды рисования линий и кривых)

  14. Компьютерная графика. Лекция 2 Metafile • Метафайл – это массив структур переменной длины, называемых записями, хранящий информацию о командах GDI, необходимых для отображения изображения • Обеспечивает лучшую независимость от графических устройств, чем bitmap • Типы метафайлов: • WMF – windows metafile • EMF – enhanced metafile

  15. Компьютерная графика. Лекция 2 Path • Путь – одна или несколько фигур, с заполнением внутренностей и/или обводкой • Приложение может использовать пути для создания сложных векторных фигур из более простых (многоугольников, текстов, кривых и отрезков линий)

  16. Компьютерная графика. Лекция 2 Pen • Перо – графический объект, используемый для рисования линий и кривых • Типы перьев • Cosmetic – задают толщину линии в единицах физического устройства • Geometric – задают толщину линий в логических единицах

  17. Компьютерная графика. Лекция 2 Пример использования перьев для рисования векторных примитивов

  18. Компьютерная графика. Лекция 2 Region Регион – это прямоугольник, многоугольник, эллипс или комбинация нескольких данных фигур. Регион может быть закрашен, инвертирован, обведен, а также может быть использован для проверки попадания точки в область региона и создания областей отсечения

  19. Компьютерная графика. Лекция 2 Фундаментальные сплайны (Cardinal Splines) • Cardinal spline – последовательность отдельных кривых, соединенных в виде одной кривой • Такие сплайны проходят через заданные точки, не образуя острых углов

  20. Компьютерная графика. Лекция 2 Независимые объекты путей(Independent Path Objects) • В GDI+ рисование выполняется при помощи объекта Graphics, в то время как пути хранятся в объектах GraphicsPath • это дает возможность рисования одного и того же объекта GraphicsPathнесколько раз

  21. Компьютерная графика. Лекция 2 Трансформации и матрицы • GDI+ предоставляет класс Matrix, упрощающий повороты, переносы, масштабирование объектов, а также их комбинирование • На рисунке показан результат применения двух трансформаций к пути (масштабирование и поворот)

  22. Компьютерная графика. Лекция 2 Трансформации регионов GDI+ позволяет применять матричные преобразования к регионам, что дает возможность их масштабирования, поворота и переноса

  23. Компьютерная графика. Лекция 2 Смешивание цветов и полупрозрачность GDI+ позволяет задать прозрачность заливки или линий при выводе графики

  24. Компьютерная графика. Лекция 2 Класс Graphics • GDI+ предоставляет пользователю класс Graphics, инкапсулирующий работу с графикой • связан с определенным окном • не связан с кистью, перьями и шрифтами • нужные объекты GDI+ передаются в методы рисования класса Graphics

  25. Компьютерная графика. Лекция 2 Рисование линии при помощи GDI+ HDChdc; PAINTSTRUCTps; hdc = BeginPaint(hWnd, &ps); { PenmyPen(Color(255, 255, 0, 0), 3); GraphicsmyGraphics(hdc); myGraphics.DrawLine(&myPen, 20, 10, 200, 100); } EndPaint(hWnd, &ps);

  26. Компьютерная графика. Лекция 2 Кисти, перья, пути, изображения и шрифты – параметры методов Объекты GDI+ создаются и хранятся отдельно от класса Graphics. Методы класса Graphics, выполняющие рисование,принимают указатель на нужный им объект, что упрощает работу с ресурсами Перегрузка методов Многие методы GDI+ перегружены, т.е. имеют одно имя, но различные списки параметров - программист может использовать более удобный в конкретной ситуации способ вызова метода

  27. Компьютерная графика. Лекция 2 Прочие улучшения • Отказ от текущей позиции рисования линий • методы рисования линий принимают начальную и конечную точки • нет необходимости в MoveTo/LineTo • Отделение методов рисования от методов заливки • DrawRectangleи FillRectangle • Цвет в GDI+ имеет Alpha составляющую, задающую прозрачность • Упрощение создания и комбинирования регионов

  28. Компьютерная графика. Лекция 2 Поддержка различных форматов изображений • GDI+ предоставляет классы Image, Bitmap и Metafile для загрузки, сохранения и обработки изображений различных форматов • BMP • GIF • JPEG • PNG • Exif • TIFF • ICON • WMF • EMF

  29. Компьютерная графика. Лекция 2 Рисование линий • Для рисовании линии необходимо создать объекты Graphicsи Pen • Метод DrawLineобъекта Graphicsвыполняет рисование линии заданным пером: • myGraphics.DrawLine(&myPen, 4, 2, 12, 6); Рисование прямоугольника • Для рисования прямоугольника служит методDrawRectangleобъекта Graphics • myGraphics.DrawRectangle(&myPen, 100, 50, 80, 40); • RectmyRect(100, 50, 80, 50);myGraphics.DrawRectangle(&myPen, myRect);

  30. Компьютерная графика. Лекция 2 Рисование эллипса • Для рисования эллипса служит методDrawEllipse • myGraphics.DrawEllipse(&myPen, 100, 50, 160, 80); • RectmyRect(100, 50, 160, 80); myGraphics.DrawEllipse(&myPen, myRect);

  31. Компьютерная графика. Лекция 2 Рисование многоугольников • Для рисования многоугольников служит метод DrawPolygon • PointmyPointArray[] ={Point(0, 0), Point(50, 30), Point(30, 60)};myGraphics.DrawPolygon(&myPen, myPointArray, 3);

  32. Компьютерная графика. Лекция 2 Антиалиасинг • Антиалиасинг позволяет уменьшить ступенчатость при отображении векторных примитивов на растровом дисплее • myGraphics.SetSmoothingMode(SmoothingModeAntiAlias); • myGraphics.DrawLine(&myPen, 0, 0, 12, 8);

  33. Компьютерная графика. Лекция 2 Загрузка растрового изображения • Загрузка растрового изображения из файла при помощи GDI+ выполняется очень просто – достаточно передать имя файла в конструктор класса Bitmap • BitmapmyBitmap(L"Spiral.png"); • Важное замечание - загрузка изображения из файла занимает некоторое время • для многократного рисования изображения нужно сохранить его после создания в переменной, а не загружать каждый раз заново

  34. Компьютерная графика. Лекция 2 Рисование растрового изображения • Для рисования растрового изображения служит команда DrawImage • Пример: • myGraphics.DrawImage(&myBitmap, 10, 10);

  35. Компьютерная графика. Лекция 2 Работа с текстом • Для создания шрифта необходимо указать семейство шрифта, размер, стиль и единицы измерения • FontFamilyfontFamily(L"Arial");Fontfont(&fontFamily, 16, FontStyleRegular, UnitPixel);

  36. Компьютерная графика. Лекция 2 Работа с текстом • Для вывода текста служит метод DrawString объекта Graphics • FontFamilyfontFamily(L"TimesNewRoman");Fontfont(&fontFamily, 24, FontStyleRegular, UnitPixel);PointFpointF(30.0f, 10.0f);SolidBrushsolidBrush(Color(255, 0, 0, 255));graphics.DrawString(L"Hello", -1, &font, pointF, &solidBrush);

  37. Компьютерная графика. Лекция 2 WindowsPresentationFoundation 4

  38. Компьютерная графика. Лекция 2 Базовые сведения WindowsPresentationFoundation (WPF) — система для построения клиентских приложений Windows с визуально привлекательными возможностями взаимодействия с пользователем, графическая (презентационная) подсистема в составе .NET Framework (начиная с версии 3.0), использующая язык XAML.

  39. Компьютерная графика. Лекция 2 Преимущества WPF Технология WPF существенно упрощает создание любых пользовательских интерфейсов. При этом интерфейс может создаваться относительно независимо от остального приложения, что позволяет дизайнерам гораздо эффективнее участвовать в процессе разработки приложения.

  40. Компьютерная графика. Лекция 2 Особенности WPF • WPF предустановлена в Windows Vista, Windows 7, Windows 8. • WPF предоставляет средства для создания визуального интерфейса, включая язык XAML (ExtensibleApplicationMarkupLanguage), элементы управления, привязку данных, макеты, двухмерную и трёхмерную графику, анимацию, стили, шаблоны, документы, текст, мультимедиа и оформление.

  41. Компьютерная графика. Лекция 2 Особенности WPF • В основе WPF лежит векторная система визуализации, не зависящая от разрешения устройства вывода и созданная с учётом возможностей современного графического оборудования. • Графической технологией, лежащей в основе WPF, является DirectX, в отличие от Windows Forms, где используется GDI/GDI+. • производительность WPF выше, чем у GDI+ за счёт использования аппаратного ускорения графики через DirectX

  42. Компьютерная графика. Лекция 2 Технология Silverlight и WPF Технологию Silverlightявляется подмножеством WPF и дополнительно включает несколько фундаментальных классов из каркаса .NET Framework (встроенные типы данных, классы коллекций и т. д.). Если требуется функциональность, которая существует только в полной версии .NET, то рекомендуется использовать WPF. Если необходима возможность выполнять приложение на компьютерах Мас или устройствах, отличных от стандартного ПК, то используется Silverlight. На любой платформе Silverlight обеспечивает единую технологию построения интерфейса.

  43. Создание WPF-приложения Компьютерная графика. Лекция 2 Создание WPF приложения начинается спроцедуры задания размеров и положений элементов управления (и других элементов) – компоновки или верстки макета. В WPF имеется богатая инфраструктура компоновки. В ее основе лежит механизм взаимодействия между элементами-родителями и их потомками.

  44. Панели WPF Компьютерная графика. Лекция 2 Родительские элементы, поддерживающие компоновку нескольких детей, называются панелями. WPF пять основных встроенных панелей (все в пространстве имен System.Windows.Controls) в порядке возрастания сложности (и полезности): • Canvas; • StackPanel; • WrapPanel; • DockPanel; • Grid.

  45. Виды панелей Компьютерная графика. Лекция 2 1) Canvas (холст) - самая простая панель. Использовать для организации пользовательского интерфейса не рекомендуется. 2) StackPanel последовательно размещает своих потомков в виде стопки. 3) Панель WrapPanel похожа на StackPanel, но при нехватке места для одной стопки создает новые строки или столбцы. 4) Панель DockPanel дает простой способ пристыковки элемента к одной из сторон, растягивая его на всю имеющуюся ширину или высоту. 5) Grid(сетка) - самая гибкая из всех панелей и, пожалуй, наиболее употребительная. В проектах VisualStudio и ExpressionBlend панель Grid используется по умолчанию. Она позволяет расположить дочерние элементы в несколько строк и несколько столбцов, не полагаясь на режим автоматического переноса.

  46. Свойства панелей Компьютерная графика. Лекция 2

  47. Свойства Height и Width Компьютерная графика. Лекция 2 Во всех классах, производных от FrameworkElement, есть свойства Height (высота) и Width (ширина) (типа double), а также MinHeight, MaxHeight, MinWidth и MaxWidth, которыми можно пользоваться для задания допустимых диапазонов значений. Все эти свойства можно задавать в любой комбинации как в процедурном коде, так и в XAML.

  48. Свойства Margin и Padding Компьютерная графика. Лекция 2 Свойства Margin и Padding тоже связаны с размером элемента. Marginзадает внешнее поле вокруг элемента, a Padding - внутренний отступ между содержимым элемента и его границами. Результат установки разных свойств Margin и Padding

  49. Выравнивание Компьютерная графика. Лекция 2 С помощью свойств HorizontalAlignment и VerticalAlignment элемент может управлять распределением избыточного пространства, выделенного ему родителем. Значениями свойств являются одноименные перечисления, которые определены в пространстве имен System.Windows: -HorizontalAlignment - Left, Center, Right, Stretch • VerticalAlignment- Top, Center, Bottom, Stretch Пример:

  50. Применение преобразований Компьютерная графика. Лекция 2 В WPF имеется ряд встроенных классов двумерных геометрических преобразований (производных от System.Windows.Media.Transform), которые позволяют изменять размер и положение элементов независимо от ранее рассмотренных свойств. • Встроенные двумерные преобразования, определенные в пространстве имен System.Windows.Media: • RotateTransform; • ScaleTransform; • SkewTransform; • TranslateTransform; • MatrixTransform.

More Related