Автоматизированная система "Графический редактор"

Размещено на http://www.allbest.ru/

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования

"Самарский государственный аэрокосмический университет имени академика С.П. Королева" (национальный исследовательский университет) (СГАУ)

Факультет информатики

Кафедра программных систем

Пояснительная записка к курсовому проекту

Автоматизированная система "Графический редактор"

Выполнил:

студент гр. 6403 C 245

Долгих Ю.А.

Руководитель проекта:

доцент каф. ПС Зеленко Л.С.

Самара 2014

Реферат

графический редактор декомпозиция отладка

Пояснительная записка 49 с., 27 рисунка, 9 источников, 2 приложения. Презентация: 15 слайдов PowerPoint.

Графический редактор, изображение, фигура, редактирование, шрифт, форматирование, панель инструментов.

В рамках курсового проекта был разработан графический редактор, позволяющий создавать, редактировать, сохранять в файл, графические файлы форматах *.bmp, *.png, *.jpg.

Программа написана на языке С# в среде Microsoft Visual Studio 2013 и может функционировать под управлением операционной системы Windows XP и выше. Проектирование велось по методологии UML с использованием средства StarUML 5.0.



Содержание

• Введение
• 1. Системотехническая часть
• 1.1 Описание и анализ предметной области
• 1.1.1 Основные понятия предметной области
• 1.1.2 Классификация графических редакторов
• 1.1.3 Описание систем-аналогов
• 1.1.4 Анализ предметной области
• 1.2 Постановка задачи
• 1.3 Структурная схема системы
• 1.4 Разработка UML-проекта
• 1.4.1 Диаграмма вариантов использования
• 1.4.2 Диаграмма состояний
• 1.4.3 Диаграмма классов
• 1.4.4 Диаграмма деятельности
• 1.4.5 Диаграмма последовательности
• 1.5 Разработка прототипа интерфейса пользователя
• 1.6 Выбор и обоснование комплекса программных средств
• 1.6.1 Выбор языка программирования и среды разработки
• 1.6.2 Выбор операционной системы
• 1.6.3 Выбор языка программирования
• 1.6.4 Выбор среды разработки
• 2. Конструкторско-технологическая часть
• 2.1 Разработка и описание интерфейса пользователя
• 2.1.1 Разработка и описание пользовательского меню
• 2.2 Диаграммы реализации
• 2.2.1 Диаграмма компонентов
• 2.2.2 Диаграмма развертывания
• 2.3 Выбор и обоснование комплекса технических средств
• 2.3.1 Расчет объема занимаемой памяти
• 2.3.2 Минимальные требования, предъявляемые к системе
• Заключение
• Список использованных источников
• Приложения


Введение

Представление данных на мониторе компьютера в графическом виде впервые было реализовано в середине 50-х годов для больших ЭВМ, применявшихся в научных и военных исследованиях. С тех пор графический способ отображения данных стал неотъемлемой частью подавляющего числа компьютерных систем, в особенности персональных [1].

Существует специальная область информатики, изучающая методы и средства создания и обработки изображений с помощью программно-аппаратных вычислительных комплексов - компьютерная графика. Она охватывает все виды и формы представления изображений, доступных для восприятия человеком либо на экране монитора, либо в виде копии на внешнем носителе (бумага, киноплёнка, ткань и прочее). Без компьютерной графики невозможно представить себе не только компьютерный, но и обычный, вполне материальный мир. На сегодняшний день компьютеры и компьютерная графика неотъемлемая часть жизни современного общества. Для примера назовём медицину (компьютерная томография), научные исследования (визуализация строения вещества, векторных полей и других данных), моделирование тканей и одежды, опытно-конструкторские разработки, рекламные щиты, цветные журналы, спецэффекты в фильмах - всё это в той или иной мере имеет отношение к компьютерной графике. Поэтому созданы программы для создания и редактирования изображений, то есть графические редакторы.

Графический редактор - это программа, предназначенная для автоматизации процессов построения на экране дисплея графических изображений [2]. Предоставляет возможности рисования линий, кривых, раскраски областей экрана, создания надписей различными шрифтами и т.д.

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

Некоторые редакторы позволяют получать изображения трёхмерных объектов, их сечений, разворотов, каркасных моделей и т.п.

Цель курсового проекта - разработать графический редактор "MyGraphicsEditor", который по функциям будет аналогичен редактору MS Paint.

Разработка данной системы будет вестись по технологии RAD (Rapid Application Development - технология быстрой разработки приложений), которая поддерживается методологией структурного проектирования и включает элементы объектно-ориентированного проектирования и анализа предметной области.

Проектирование будет вестись по методологии UML (англ. Unified Modeling Language - унифицированный язык моделирования). UML язык графического описания для объектного моделирования в области разработки программного обеспечения. UML является языком широкого профиля, это открытый стандарт, использующий графические обозначения для создания абстрактной модели системы, называемой UML-моделью. UML был создан для определения, визуализации, проектирования и документирования, в основном, программных систем [3].



1. Системотехническая часть

1.1 Описание и анализ предметной области

1.1.1 Основные понятия предметной области

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

Предметная область - совокупность основных объектов, участвующих в функционировании системы. Целью данного проекта является создание графического редактора растровых изображений.

Компьютерная графика - специальная область информатики, изучающая методы и средства создания и обработки изображений с помощью программно-аппаратных вычислительных комплексов [2]. К вычислительным комплексам относятся графические редакторы.

Графический редактор - это программа, позволяющая создавать, редактировать и просматривать изображения на экране компьютера.

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

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

Растровое изображение - изображение, представляющее собой сетку пикселей или цветных точек (обычно прямоугольную) на мониторе, бумаге и других отображающих устройствах и материалах [2]. К основным характеристикам растрового изображения относятся: количество пикселей, глубина цвета, цветовая модель и разрешение изображения. Пример растрового изображения приведен на рисунке 1.

Векторные рисунки формируются из базовых графических объектов, для каждого из которых задаются координаты опорных точек, а также цвет, толщина и стиль линии его контура. Векторное изображение может свободно масштабироваться, не теряя при этом качества. Пример растрового изображения приведен на рисунке 1.

Рисунок 1 - Пример растрового и векторного изображения

1.1.2 Классификация графических редакторов

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

Растровый графический редактор представляет изображение в виде набора точек - пикселей. Из растровых графических редакторов популярностью пользуются Adobe Photoshop, GIMP.

Векторные редакторы сохраняют информацию об элементах изображении в виде координат в некоей системе отсчета. Наиболее популярные векторные графические редакторы: CorelDraw, AdobeIllustratore, Inkscape.

В настоящее время наиболее распространенным и простым растровым графическим редактором является MS Paint. В рамках курсового проекта необходимо создать программу - аналог MS Paint.

1.1.3 Описание систем-аналогов

На данный момент существует огромное множество растровых графических редакторов. Рассмотрим самые популярные из них.

Adobe Photoshop - многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems. Продукт выступает лидером современного рынка коммерческих инструментов, позволяющих проводить процессы редактирования растрового изображения. Сегодня работать посредством программы можно базируясь на операционных системах Windows, Mac.

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

Программное обеспечение обладает огромным количеством уникальных функций. Имеется широкий диапазон цветовых характеристик, обрабатываемых приложением. Есть возможность сохранять посредством единого файла одновременно несколько элементов - направляющие, каналы прозрачности, пути отправки, содержание текстовых, векторных объектов, слоев. Рабочее окно Adobe Photoshop показано на рисунке 2.

Рисунок 2 - Рабочее окно графического растрового редактора Adobe Photoshop

GIMP (англ. General Image Manipulation Program - главная программа растровых изображений), в отличие от Adobe Photoshop, является бесплатной многофункциональная программа для работы с изображениями, которую можно дополнить с помощью значительного количества бесплатных плагинов, существенно расширяющих её возможности. GIMP поддерживает большинство существующих форматов. Программа включает в себя полный комплект необходимых инструментов для обработки изображений, каждый из которых имеет множество тонких настроек. Неограниченное количество одновременно открываемых фотографий, поддержка слоев, пакетная обработка, наличие русского языка и много чего другого делают GIMP очень удобным и мощным инструментом. Рабочее окно редактора GIMP изображено на рисунке 3.

Рисунок3 - Рабочее окно графического растрового редактора GIMP

Paint - является простым и графическим редактором, входящий в состав стандартных программ Windows. Он также часто упоминается как MS Paint или Microsoft Paint. Позволяет создавать рисунки, картинки и т.д. или редактировать изображения. Кроме того, его можно использовать для сохранения графических файлов в различных форматах.

Программа может работать в цветном режиме или двухцветном черно-белом. Из-за своей простоты он быстро стал одним из самых используемых приложений в ранних версиях. Экранная форма MS Paint ОС Windows 7 и пример рисунка, созданного с его помощью, представлен на рисунке 4.



Рисунок 4 - Экранная форма MS Paint

Для создания изображения пользователь может воспользоваться следующими инструментами:

? выделение прямоугольной области;

? ластик;

? заливка;

? карандаш;

? кисть (возможность выбора толщины и формы линий );

? распылитель;

? надпись;

? пипетка;

? линия и кривая различной толщины;

? двумерные фигуры (прямоугольник, многоугольник, эллипс и скругленный прямоугольник).

Кроме того, пользователь может применять следующие действия к изображениям:

? отразить/повернуть изображение;

? растянуть/наклонить изображение;

? обратить цвета изображения;

? очистить;

? палитра (черно-белая и цветная);

Необходимые инструменты для создания изображения представлены на рисунке 5.



Рисунок 5 - Панель инструментов MS Paint.

На рисунке 6 приведен пример изображения, полученного при создании в графическом редакторе MS Paint с использованием выше перечисленных инструментов.

Рисунок 6 - Пример изображения

1.1.4 Анализ предметной области

Для выделения или идентификации компонентов предметной области был использован принцип концептуализации предметной области.

В результате анализа были выделены следующие основные объекты:

? Графическое изображение - создается пользователем и состоит из различных графических элементов;

? Графические элементы (инструменты) - предназначены для создания изображения и включают в себя двумерные фигуры, текст и линии;

? Двумерные фигуры включают в себя многоугольник, прямоугольник, эллипс и закругленный прямоугольник;

? Линия - может быть прямой или кривой.



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

- создание нового изображения;

- сохраннее текущего изображения;

- открытие ранее созданного изображения;

- редактирование изображения;

- форматирование изображения:

1.2 Постановка задачи

В рамках курсового проекта необходимо разработать программу "Графический редактор", позволяющую производить создание и обработку растровых изображений, т.е. данная система должна обеспечивать пользователю не только возможность создавать новые изображения, но и редактировать уже имеющиеся файлы.

Графическое изображение может изначально создаваться пользователем с помощью имеющихся в наборе инструментов или загружать уже готовое изображение из файла. В таблице 1 описаны инструменты данной панели.



Таблица 1 - Перечень инструментов, используемых в системе

Инструмент	Описание
	Инструмент "Выделение" позволяет выделять любую квадратную или прямоугольную часть изображения.
	Инструмент "Ластик" позволяет стирать области изображения.
	Инструмент "Заливка" позволяет заполнить цветом все изображение или замкнутую фигуру.
	Инструмент "Выбор" цветов позволяет задать основной цвет или цвет фона.
	Инструмент "Масштаб" позволяет увеличить область изображения.
	Инструмент "Карандаш" позволяет проводить тонкие произвольные линии
	Инструмент "Распылитель" позволяет создать эффект распыления краски на изображении.
	Инструмент "Текст" позволяет вводить текст в изображение
	Инструмент "Линия" позволяет проводить прямую линию
	Инструмент "Эллипс" позволяет рисовать эллипсы и круги.
	Инструмент "Прямоугольник" позволяет рисовать прямоугольники.
	Окно "Палитра" отображает текущий основной цвет и цвет фона.
	Инструмент "Стиль линий" позволяет выбрать требуемую толщину линий.

Таким образом, разрабатываемая система будет реализовывать следующие функции:

создание графического изображения;

сохранение графического изображения;

загрузка графического изображения;

редактирование графического изображения:

- выделение фрагмента изображения;

- вырезка изображения;

- копирование изображения;

- вставка изображения;

предоставление справочной информации о системе.

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

форматирование изображения:

- изменение размера изображения;

- обращение цвет;

- отражение по вертикали;

- отражение по горизонтали;

- поворот изображения;

отмена предыдущего действия.

1.3 Структурная схема системы

Система - это совокупность объектов, компонентов или элементов произвольной природы, образующих некоторую целостность. Более мелкая система - это подсистема.

Структурная схема отображает принцип работы системы или устройства в самом общем виде [4]. На схемах изображаются все основные функциональные элементы, а также основные взаимосвязи между ними, указывающие на последовательность взаимодействия функциональных элементов в схеме.

Структурная схема системы приведена на рисунке 5, она позволяет определить основные подсистемы, а также связи между ними.

Данный проект можно разделить на подсистемы, представленные в таблице 2.



Таблица 2_ Перечень подсистем

1	2
1. П/c управления	Необходима для организации взаимодействия подсистем.
2.	П/с создания и редактирования изображения	Необходима для создания и редактирования изображения, в которую входит:
1.	2.1.П/с обработки выделенной области	Необходима для работы с выделенными фрагментами изображения.
1.	2.2.П/с управления действиями	Предназначена для реализации различных действий над изображением.
3. Файловая п/с	Предназначена для работы с файлами: загрузки уже существующего изображения, сохранения нового или измененного изображения.
4. П/с справки	Предназначена для выдачи справочной информации о системе, разработчиках.

1.4 Разработка UML-проекта

Язык UML (Unified Modeling Language) представляет собой унифицированный язык визуального моделирования, который разработан для специфицирования (создания спецификации), конструирования, визуализации и документирования компонентов программного обеспечения и бизнес-процессов.

UML позволяет также разработчикам программного обеспечения достигнуть соглашения в графических обозначениях для представления общих понятий (таких как класс, компонент, обобщение (generalization), объединение (aggregation) и поведение), и больше сконцентрироваться на проектировании и архитектуре [5].

1.4.1 Диаграмма вариантов использования

Диаграмма вариантов использования описывает функциональное назначение системы. Проектируемая система представляется в виде множества сущностей или актеров, взаимодействие которых с системой отображается в виде взаимосвязанных вариантов использования [6].

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

Диаграмма вариантов использования разрабатываемой системы представлена на рисунке 9. Разрабатываемая система содержит одного актера - пользователь. Пользователь будет иметь возможность создавать изображение, сохранять его, загружать раннее созданный, настраивать внешний вид системы, редактировать изображение в рабочем поле, поворачивать изображение, изменять цвет изображения. Также пользователь может добавлять текст, изменять размер, начертание, цвет и получить справочную информацию о программе и руководство пользования.

1.4.2 Диаграмма состояний

Диаграмма состояний описывает процесс изменения состояний только одного класса, а точнее - одного экземпляра определенного класса, т. е. моделирует все возможные изменения в состоянии конкретного объекта. При этом изменение состояния объекта может быть вызвано внешними воздействиями со стороны других объектов или извне. Именно для описания реакции объекта на подобные внешние воздействия и используются диаграммы состояний.

Рисунок 9- Диаграмма вариантов использования



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

Диаграмма состояний представляет динамическое поведение сущностей, на основе спецификации их реакции на восприятие некоторых конкретных событий. Системы, которые реагируют на внешние действия от других систем или от пользователей, иногда называют реактивными. Если такие действия инициируются в произвольные случайные моменты времени, то говорят об асинхронном поведении модели [6].

На рисунке 10 представлена диаграмма состояний графическом редактора при работе с текстом. Пользователь вводит текст в текстовое поле, расположенное на главной форме. Он может форматировать текст (изменять стиль, начертание, размер шрифта и цвет). Далее необходимо выбрать на форме место вставки изображения, затем кликнуть левой кнопкой мыши, в результате чего введенный текст отобразится на форме.

Рисунок 10 - Диаграмма состояний при работе с текстом

1.4.3 Диаграмма классов

Для представления абстракций объектов используется специальный определяемый программистом тип данных - класс. Существует несколько определений класса.

На рисунке 11 изображена диаграмма классов разрабатываемой автоматизированной системы. Все классы являются стандартными классами, входящими в состав Microsoft Visual Studio 2013.



Рисунок 11 - Диаграмма классов

Класс "Главная форма" облает расширенной функциональностью для форматирования и рисования изображения, а также изменения параметров текста, сохранения и открытия файла.

Класс "Новая форма" представляет собой форму, в которой пользователь задает параметры высоту и ширину создаваемого изображения.

В состав класса "Палитра" входят такие компоненты как ссылка на главную форум, цвет который пользователь самостоятельно задать любой оттенок цвета.

Класс "Лупа" содержит такие компоненты как коэффициент масштабирования, изображение которые мы передам из первой формы.

Класс "Выделение области" реализует такие методы как копировать выделенную область, удалить, вставить, и вырезать заданную область.

1.4.4 Диаграмма деятельности

Диаграмма деятельности - диаграмма, на которой показано разложение некоторой деятельности на её составные части. Под деятельностью понимается спецификация исполняемого поведения в виде координированного последовательного и параллельного выполнения подчинённых элементов - вложенных видов деятельности и отдельных действий, соединённых между собой потоками, которые идут от выходов одного узла к входам другого [6].

На рисунке 12 показана диаграмма деятельности для варианта использования "Редактирование выделенной области". Для выделения области необходимо выбрать на панели инструментов соответствующий инструмент и произвести выделение части изображения, после чего выбрать соответствующий пункт контекстного меню. Пользователю предоставляется возможность вырезать, удалить, копировать, использовать многократно вставку изображения и поворот изображения.

Рисунок 12 - Диаграмма деятельности для варианта использования "Редактирование выделенной области"

1.4.5 Диаграмма последовательности

Диаграмма последовательности отображает взаимодействие объектов - экземпляров классов во времени, выраженное в обмене сообщениями. При этом возможные статические ассоциации между объектами не показываются. Для диаграммы последовательности ключевым моментом является именно динамика взаимодействия объектов во времени (вертикальная временная ось направлена сверху вниз) [6].

Линия жизни объекта, изображаемая в виде вертикальной линии, служит для обозначения периода времени, в течение которого объект активен, то есть участвует во взаимодействии.

Взаимодействия объектов реализуются посредством сообщений, которые образуют порядок по времени своего возникновения. Сообщение - законченный фрагмент информации, который отправляется одним объектом другому. При этом прием сообщения инициирует выполнение определенных действий, направленных на решение отдельной задачи тем объектом, которому это сообщение отправлено.

На рисунке 13 показана диаграмма последовательности для варианта использования "Вырезка и вставка выделенной области". В начале пользователь выделяет некий фрагмент изображения. Поле нажатия правой кнопкой мыши, появляется контекстное меню, после чего пользователь выбирает пункт "Вырезать" из контекстного меню, система заносит в буфер вырезанную часть изображения. Из пункта "Вставить" контекстного меню пользователь выбирает место вставки и содержимое буфера отрисовывается на форме.

Рисунок 13 - Диаграмма последовательности для варианта использования "Вырезка и вставка выделенной области"



1.5 Разработка прототипа интерфейса пользователя

Разработка интерфейса пользователя является одним из важнейших этапов проектирования системы. Она начинается с ранних набросков диалоговых окон на этапе анализа требований. Эти наброски используются в процессе сбора требований, при разборе возможных сценариев работы системы с заказчиками, для создания прототипов и для включения документов описания прецедентов. В процессе проектирования осуществляется дальнейшая разработка окон пользовательского интерфейса в соответствии с основными возможностями презентационного ПО, а также особенностями и ограничениями выбранной программной среды [7].

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

На рисунке 14 представлен прототип интерфейса графического редактора.

Рисунок 14 - Прототип интерфейса графического редактора



В верхней части окна редактора располагаются вкладки "Файл", "Правка", "Вид", "Рисунок", "Палитра" и "Справка". Под ними находится панель быстрого доступа к основным функциям системы - создание, открытие, сохранение нового изображение и очищение рабочего фона.

Далее располагается панель инструментов, на которой будут располагаться инструмента, используемые в программе. Под ней будет располагаться область для настройки параметров. В этой области пользователь сможет изменять такие параметры как толщину линий, стиль линий и прозрачность. Ниже будет располагаться основная палитра, в которой пользователь сможет выбрать и задать основной цвет, и вспомогательный, отвечающий за цвет фона. В области изменении масштаба пользователь сможет как увеличить, так и уменьшить изображение. Изменение масштаба будет пропорциональным при каждом нажатии.

При нажатии кнопки "Создать" откроется окно, представленное на рисунке 15.

Рисунок 15 - Окно создания нового изображения

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

На рисунке 16 представлен прототип окна экранной формы "Лупа".



Рисунок 16 - Прототип экранной формы "Лупа"

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

1.6 Выбор и обоснование комплекса программных средств

1.6.1 Выбор языка программирования и среды разработки

Пакет Microsoft Visual Studio.NET является интегрированной средой разработки (IDE - Integrated Development Environment), потому что с помощью одного только этого средства, не прибегая к помощи других, можно выполнить многое, а именно:

- генерировать "скелет" приложения без написания кода вручную;

- открывать проект в нескольких различных режимах представления;

- редактировать все составляющие кода как вручную, так и с помощью мастеров;

- разрабатывать визуальный интерфейс (меню и диалоговые окна);

- подключаться к внешним ресурсам - например, к базам данных;

- компилировать и линковать исходный код;

- отлаживать приложение в процессе его работы.

Среда разработки Visual Studio.NET имеет единый интерфейс для всех включенных в нее языков программирования: C#, VB.NET, C++ и J++. Язык программирования C# является полнофункциональным объектно-ориентированным языком, который поддерживает все три "столпа" объектно-ориентированного программирования: инкапсуляцию, наследование и полиморфизм. Он имеет прекрасную поддержку компонентов, надежен и устойчив благодаря использованию "сборки мусора", обработки исключений, безопасности типов. Язык программирования С++ является типизированным языком программирования общего назначения. Поддерживая разные парадигмы программирования, сочетает в себе свойства как высокоуровневых, так и низкоуровневых языков. В сравнении с его предшественником - языком C, наибольшее внимание уделено поддержке объектно-ориентированного и обобщённого программирования. Исходя из характера поставленной задачи, технических требований и наработанного инструментария нами была выбрана среда разработки Visual Studio.NET и язык программирования C# [8].

1.6.2 Выбор операционной системы

Программа предназначена для работы в операционных системах (OC) Microsoft Windows XP/7. Данные ОС являются наиболее распространёнными в мире. Удобный и наглядный оконный интерфейс ОС семейства Windows предоставляет широкие возможности по реализации визуального оформления программы, а встроенные службы позволяют организовать легкий доступ к руководству пользователя.

OC Windows предоставляет программистам все необходимые средства для создания пользовательского интерфейса. Поэтому пользовательский интерфейс программ в значительной степени унифицирован, и пользователям не требуется изучать для каждой программы новые принципы организации взаимодействия с этой программой. К достоинству OC Windows можно отнести доступность всей оперативной памяти, что облегчает создание больших программ. Очередным преимуществом OC Windows является динамическое подключение библиотек - OC Windows автоматически подключает библиотеки подпрограмм во время выполнения программы. Формат библиотек и порядок вызова библиотечных подпрограмм стандартизированы, поэтому эти библиотеки могут быть созданы с помощью различных программных средств.

1.6.3 Выбор языка программирования

Среда разработки Visual Studio.NET представляет мощные и удобные средства написания, корректировки, компиляции, отладки и запуска приложений, использующих .NET - совместимые языки. Корпорация Microsoft включила в платформу средства разработки для четырех языков: C#, VB.NET, C++ и J++. Язык программирования C# является полнофункциональным объектно-ориентированным языком, который поддерживает все три "столпа" объектно-ориентированного программирования: инкапсуляцию, наследование и полиморфизм. Он имеет прекрасную поддержку компонентов, надежен и устойчив благодаря использованию "сборки мусора", обработки исключений, безопасности типов. Исходя из характера поставленной задачи, технических требований и наработанного инструментария нами была выбрана среда разработки Visual Studio.NET и язык программирования C#.

1.6.4 Выбор среды разработки

В качестве среды программирования была выбрана Visual Studio 2013, так как она включает в себя новые возможности, такие как наглядные средства разработки для более быстрой работы с .NET Framework 4.0 и улучшения языков, ускоряющие работу со всеми типами данных. Что самое важное, так это то, что Visual Studio 2013 предлагает усовершенствованные средства, помогающие наладить совместную деятельность в группах.

Microsoft Visual Studio 2013 также помогает индивидуальным программистам и небольшим группам, создающим любые виды ПО, ускорить разработку приложений и создание пользовательских интерфейсов с принципиально новым уровнем удобства, повысить эффективность коллективной работы. Используя большое количество новых функций в Visual Studio 2013, российские разработчики могут решать сложные бизнес-задачи при одновременном сокращении совокупной стоимости процесса разработки. А вместе с долгожданным нововведением - выпуском полностью локализованного на русский язык продукта - производительность труда профессиональных разработчиков возрастет в разы, ведь теперь весь интерфейс продукта вместе со всей документацией будут представлены на родном языке.



2. Конструкторско-технологическая часть

2.1 Разработка и описание интерфейса пользователя

Большинство программных продуктов, особенно прикладного характера, ориентированных на конечного пользователя, работают в диалоговом режиме взаимодействия с пользователем таким образом, что ведется обмен сообщениями, влияющими на обработку данных. В диалоговом режиме под воздействием пользователя осуществляются запуск функций (методов) обработки, изменение свойств объектов, производится настройка параметров выдачи информации на печать и т.п.

Графический интерфейс пользователя является обязательным компонентом большинства современных программных продуктов, ориентированных на работу конечного пользователя. К графическому интерфейсу пользователя предъявляются высокие требования как с чисто инженерной, так и с художественной стороны разработки, при его разработке ориентируются на возможности человека. Наиболее часто графический интерфейс реализуется в интерактивном режиме работы пользователя для программных продуктов, функционирующих в OC Windows, и строится в виде системы выпадающих меню с использованием в качестве средства манипуляции мыши и клавиатуры [9].

Основная экранная форма графического редактора приведена на рисунке 17.

На главной форме программы располагаются элементы и панели, необходимые для работы с программой. Многие инструменты имеют свойства, изменять которые можно с помощью панель настроек. Пользователь может самостоятельно выбрать основной и дополнительный цвет как на главной форме, так и на дополнительной форме, которая предоставляет наиболее широкий спектр цветов.



Рисунок 17 - Основная экранная форма

Экранная форма дополнительной палитры цветов представлена на рисунке 18.

Рисунок 18 - Экранная форма палитры выбора цвета

2.1.1 Разработка и описание пользовательского меню

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

В разработанной системе меню состоит из шести пунктов: файл, правка, рисунок, палитра, вид, справка. Структура меню представлена на рисунке 19.



Рисунок 19 - Структура меню программы

При выборе пункта меню "Файл" открывается выпадающее меню, состоящее из нескольких подпунктов:

? "Создать…" - создание нового изображения;

? "Сохранить" - сохранение изображения в файл;

? "Открыть…" - открытие файла ранее созданного документа;

? "Выход" - выход из программы.

? При выборе пункта меню "Правка" открывается выпадающее меню, состоящее из нескольких подпунктов:

? "Отменить действие" - отмена последнего действия;

? "Вырезать" - вырезать фрагмент изображения;

? "Копировать" - копировать фрагмент изображения в буфер обмена;

? "Вставить" - вставить изображение из буфера обмена;

? "Очистить" - очистить весь документ;

При выборе пункта меню "Вид" открывается выпадающее меню, позволяющее пользователю настроить внешний вид главного окна программы. Выпадающее меню состоит из нескольких подпунктов:

? "Панель инструментов" - вывод и скрытие панели инструментов;

? "Палитра" - вывод и скрытие дополнительной палитры;

? "Просмотр" - полноэкранный просмотр изображения.

При выборе пункта меню "Рисунок" открывается выпадающее окно, которое состоит из следующих подпунктов:.

? "Повернуть" - поворот изображения на 90 градусов как по часовой так и против часовой стрелки;

? "Изменить цвет" - позволяет добавлять эффекты такие как негатив, сепия и черно-белое изображение;

При выборе пункта "Палитра" можно выбирать цвет заливки фона и цвет палитры.

При выборе пункта меню "Справка" открывается выпадающее окно, которое состоит из следующих подпунктов:

? "Об авторе" - содержит информацию о разработчиках программы;

? "О программе" - содержит краткие сведения о программе;

? "Руководство пользователя" - содержит наглядное описание функционала программы.

2.1.2 Описание тестового примера

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

Для создания нового изображения необходимо выбрать подпункт "Создать" пункта меню "Файл", либо нажать на соответствующую кнопку на панели инструментов.

В появившемся окне зададим размер изображения 700 и 300 пикселей соответственно.

Экранная форма для создания нового изображения представлена на рисунке 20.

Рисунок 20 - Экранная форма создания нового изображения



Для открытия ранее созданного изображения необходимо выбрать подпункт "Открыть" пункта меню "Файл", либо нажать на соответствующую кнопку на панели инструментов. При этом откроется диалоговое окно, позволяющее выбрать необходимый файл документа. Затем, после нажатия на кнопку "Открыть" в текстовом поле главной формы программы отобразится выбранной изображение. Экранная форма данного состояния программы отображена на рисунке 21.

Рисунок 21 - Экранная форма открытия документа

Для того чтобы сохранить нарисованное изображение необходимо выбрать подпункт "Сохранить" пункта меню "Файл", либо нажать на соответствующую кнопку на панели инструментов. При этом откроется диалоговое окно, позволяющее сохранить изображение.

Для редактирования изображение необходимо выбрать нужный инструмент в панели инструментов. В некоторых случаях инструмент требует задание или изменение дополнительных параметров. Нарисуем в рабочей области непрозрачный прямоугольник, задав дополнительные параметры такие как тип линий и толщина линий. Экранная форма данного состояния программы отображена на рисунке 22.



Рисунок 22 - Экранная форма рисования изображения

Для добавления текста необходимо на панели инструментов нажать соответствующую кнопку, после чего в нижней части главного окна нужно набрать требующий текст. Добавление текста осуществляется нажатием левой кнопки мыши, где необходимо вставить текст. Для изменения настроек шрифта необходимо задать параметры текста непосредственно на главной форме, указав начертание, шрифт и размер шрифта или нажать кнопку "Шрифт". При этом откроется диалоговое окно, представленное на рисунке 23.

Рисунок 23 - Диалоговое окно настроек параметров шрифта

В данном окне пользователь может задать тип шрифта, размер, начертание, видоизменение, набор символов. Для применения выбранных настроек необходимо нажать кнопку "ОК", для отмены - кнопку "Отмена".

Для изменения основного и дополнительно цвета необходимо нажать либо на дополнительную палитру(см. рисунок 18), расположенную снизу главного окна программы, либо по цветовой панели, расположенной так же в главном окне программы(см. рисунок 24). Желаемой цвет задается щелчком мыши по цветовой панели, представленной двумя прямоугольниками. С помощью верхнего задается цвет текста и линий, а с помощью нижнего можно выбрать цвет заливки. При нажатии на нижний цвет открывается диалоговое окно "Цвет", представленное на рисунке 25.

Рисунок 24 - Палитра

Рисунок 25 - Диалоговое окно "Цвет"

Для сохранения настроек цвета необходимо нажать кнопку "ОК", для отмены - кнопку "Отмена".

2.2 Диаграммы реализации

2.2.1 Диаграмма компонентов

Диаграмма компонентов (Component diagram) - статическая структурная диаграмма, показывает разбиение программной системы на структурные компоненты и связи (зависимости) между компонентами. В качестве физических компонент могут выступать файлы, библиотеки, модули, исполняемые файлы, пакеты и т. п.[6].

Правильное разделение программы на модули является почти такой же сложной задачей, как выбор правильного набора абстракций. Модули исполняют роль физических контейнеров, в которые помещаются определения классов и объектов при логическом проектировании системы.

На рисунке 26 представлена диаграмма компонентов графического редактора. Компонент "Главная форма" занимает центральное место в приложении, поскольку из него вызываются остальные компоненты. Разработанная система состоит из следующих компонентов:

- "Форма задания параметров" - содержит параметры при создании нового изображения;

- "Форма лупы" включает в себя режим просмотра увеличенного изображения;

- "Форма палитры" - содержит параметры цвета;

- "Форма выделения области" - содержит режим работы выделения области;

- "Форма справки" - содержит в себе файл справки

- "Форма с информацией о программе" - содержит информацию о программе и разработчике";

- "Файл справки" - содержит в себе руководство пользователя.

- "Файл рисунка" - содержит изображение.

Рисунок 26 - Диаграмма компонентов



2.2.2 Диаграмма развертывания

Диаграмма развертывания (размещения) применяется для представления общей конфигурации и топологии распределенной автоматизированной системы и содержит распределение компонентов по отдельным узлам системы.

Кроме того, диаграмма развертывания показывает наличие физических соединений - маршрутов передачи информации между аппаратными устройствами, задействованными в реализации системы. Диаграмма развертывания содержит графические изображения процессоров, устройств, процессов и связей между ними [6].

На рисунке 27 показана диаграмма развертывания разрабатываемой системы. Для обеспечения функционирования системы на компьютере должны быть установлены операционная система и графический редактор. Операционная система обеспечивает работу графического редактора, исполняет его запросы и управляет оперативной памятью. К основным функциям графического редактора относится ввод, форматирование и редактирование текста.

Рисунок 27 - Диаграмма развертывания

2.3 Выбор и обоснование комплекса технических средств

Выбор комплекса технических средств (КТС) заключается в определении минимальных параметров КТС, при которых программа будет работать.



2.3.1 Расчет объема занимаемой памяти

Одной из важных характеристик технических средств является объем памяти. Рассчитаем объем жесткого диска и ОЗУ, необходимый для нормального функционирования системы.

Для расчета необходимого объема жесткого диска воспользуемся следующей формулой:

VЖД = VОС + VПС + VСПР,

где VОС - объем памяти, занимаемый операционной системой Microsoft Windows 7 занимает 10,4 Гб (для 32-разрядной системы);

VПС - объем памяти, занимаемый программной системой (VПС=156 Кб);

VСПР - объем памяти, занимаемый справочной системой (VСПР 1 Мб).

Таким образом, необходимый объем жесткого диска составит:

VЖД = 10,4 Гб +156 Кб +1 Мб 10,4 Гб.

Для расчета необходимого объема ОЗУ воспользуемся следующей формулой:

VОЗУ = VOC + VПС,

где VОС - ОЗУ, занимаемое операционной системой (2 Гб);

VПС - ОЗУ, которое займет приложение при максимальной загрузке.

В итоге требуемый объем ОЗУ составит:

VОЗУ = 2 Гб +1,5M б 2 Гб.



2.3.2 Минимальные требования, предъявляемые к системе

Для нормального функционирования проектируемой программной системы необходимы следующие аппаратные средства, обоснованные, в первую очередь, системными требованиями MS WindowsXP и выше:

- IBM - совместимый компьютер с тактовой частотой процессора 1 ГГц и более;

- объем оперативной памяти не менее 2 Гб;

- жесткий диск объемом не менее 10 Гб;

- манипулятор - мышь;

- тип операционной системы - Windows 98 и выше, Windows 7, Windows Vista;

- видеокарта объемом не менее 128Мб;

- монитор с разрешением 800х600.



Заключение

В ходе выполнения курсового проекта был произведён анализ предметной области по методологии объектной декомпозиции, разработан UML-проект.

Было реализовано информационное программное обеспечение системы в соответствии с проектом. Подготовлены контрольные примеры, и проведено автономное и комплексное тестирование и отладка.

Систему отличает дружественный дизайн интерфейса, интуитивно понятное управление, быстрый отклик, возможность работы на различных версиях ОС Windows, подробное справка по программе и руководство пользователя.

Список использованных источников

1 Учебник по информатике. Графический редактор [Электронный ресурс] - http://solidbase.karelia.ru/edu/zonna/3_ychebnik_8.htm (дата обращения 13.03.2014 г.).

2 Симонович С.В. Информатика. Базовый курс [Текст] / C.В. Симонович. 2-е изд. БХВ-Петербург, 2003. - 496 с.: ил.

3 Зеленко Л.С. Технологии программирования и программная инженерия (часть 1) [Текст]: учебное пособие / Л.С. Зеленко. - Самара: Изд-во Самарского государственного аэрокосмического университета, 2006. - 96 с.

4 Описание растрового изображение [Электронный ресурс] - http://ru.wikipedia.org/wiki/Расровая_графика (дата обращения 27.03.2014 г.).

5 Диаграммы UML проекта [Электронный ресурс]. - http://ru.wikipedia.org/wiki/UML (дата обращения 28.04.2014 г.).

6 Иващенко А.В. Основы методологии проектирования автоматизированных систем обработки информации и управления [Текст]: учебное пособие / А.В. Иващенко. - Самара: СНЦ РАН, 2009. - 40 с., ил.

7 Проектирование пользовательского интерфейса [Электронный ресурс]. - http://www.williamspublishing.com/PDF/5-8459-0276-2/part7.pdf (дата обращения 10.05.2014 г.).

8 Языки программирования [Электронный ресурс]. - http://www.gpntb.ru/win/book/4/Doc4.HTML (дата обращения 28.04.2014 г.).

9 Хохлов А.Е. Основы информатики [Электронный ресурс]. - http://window.edu.ru/resource/967/53967/files/stup321.pdf (дата обращения 28.04.2014 г.).



Приложения

Приложение А

Руководство пользователя

А.1 Назначение системы

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

А.2 Установка системы

Данная система не содержит установочных модулей. Для начала ее использования необходимо запустить исполняемый файл "MyGraphicsEditor2.exe".

А.3 Работа с программой

Опишем основные принципы работы с данной системой.

А.3.1 Запуск программы

Запуск программы осуществляется путем запуска исполняемого файла "MyGraphicsEditor2.exe".

А.3.2 Работа с программой

При запуске программы перед пользователем появляется окно, показанное на рисунке A.1.

Для создания нового документа необходимо выбрать подпункт "Создать" пункта меню "Файл", либо нажать на соответствующую кнопку на панели инструментов.

Для открытия ранее созданного документа необходимо выбрать подпункт "Открыть" пункта меню "Файл", либо нажать на соответствующую кнопку на панели инструментов. При этом откроется диалоговое окно, позволяющее выбрать необходимый файл документа. Затем, после нажатия на кнопку "Открыть" в рабочем поле главной формы программы отобразится открытый документ. Экранная форма данного состояния программы отображена на рисунке А.2.

Рисунок A.1 - Экранная форма главного окна приложения

Рисунок А.2 - Открытие документа

Для сохранения документа в открытом файле необходимо выбрать подпункт "Сохранить" пункта меню "Файл", либо нажать на соответствующую кнопку на панели инструментов.

Пользователь может редактировать изображение с помощью панели инструментов (см. рисунок А.3), которая содержит следующие кнопки

Карандаш - рисование точки или произвольных кривых;

Эллипс - рисование эллипса;

Прямоугольник - рисование прямоугольника;

Текст - вставка текста;

Линия - рисование прямой линии;

Ластик - стирание части изображения;

Выделение области - выделение прямоугольной области.

Такие параметры как тип линий, толщина, прозрачность внутренней области фигуры пользователь может изменить самостоятельно. С помощью зажатия кнопки Ctrl и клик левой или правой кнопкой мыши реализована функция аналогичной функции в MS Paint "Пипетка".

Рисунок А.3 - Панель инструментов

Выбор основного цвета и дополнительного осуществляется с помощью палитры расположенной на главной форме (см. рисунок А.4). Смена цвета осуществляется посредством клика мышью по цветовой панели и дальнейшего выбора желаемого цвета в появившемся окне (см. рисунок А.5).

Рисунок А.5 - Панель палитры главной формы.

Для быстрого выбора нужного цвета или оттенка цвета пользователь может сам выбрать или задать с помощью цветовой модели RGB необходимый цвет. Как известно, цвет в модели RGB задается тремя числовыми составляющими, лежащие в диапазоне от до 255. Так, например, черный цвет задается набором цифр (0;0;0), белый (255;255;255),фиолетовый (139;0;255). Изменяя составляющие R, G, B и А можно получить любое цветовое решение (см рисунок А.6).



Рисунок А.5 - Экранная форма окна палитры цветов.

Рисунок А.6 - Экранная форма окна дополнительной палитры цветов.

Для рисования линий в программе можно использовать инструменты "Карандаш" и "Линия". Вид линий на рисунке определяется параметрами, цвет, толщина и тип линий задаются на форме.

Программа "MyGraphicsEditor v2.0" позволяет добавлять на изображение различные фигуры. К готовым фигурам относятся прямоугольники, эллипсы. Чтобы добавить фигуру правильной формы, т.е. круг и квадрат, необходимо выбрать на панели инструментов нужную фигуру, и зажать клавишу на клавиатуре Ctrl,после чего с помощью клика по левой кнопки мыши и отведения курсора в сторону, можно задать нужные размеры для данной фигуры. Если требуется отрисовка фигуры с непрозрачной областью, установить флажок и выберете необходимый цвет.

Результат различных вариантов выбора инструментов представлен на рисунке А.7.



Рисунок А.6 - Экранная форма рисования.

Для добавления текста пользователю необходимо на панели инструментов нажать соответствующую кнопку, после чего в нижней части главного окна в поле для текста нужно набрать требующий текст. Добавление текста осуществляется нажатием левой кнопки мыши, где необходимо вставить текст. Для изменения настроек шрифта необходимо задать параметры текста непосредственно на главной форме, указав начертание, шрифт и размер шрифта Панель инструментов для работы с текстом представлена на рисунке А.7.

Рисунок А.7- Панель инструментов для работы с текстом

Для задания параметров пользователь может нажать кнопку "Шрифт". При этом откроется диалоговое окно (см. рисунок А.8). В данном окне пользователь может задать тип шрифта, размер, начертание, видоизменение, набор символов. Для применения выбранных настроек необходимо нажать кнопку "ОК", для отмены - кнопку "Отмена".



Рисунок А.8 - Диалоговое окно настроек параметров шрифта

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

Программа предоставляет пользователю возможность работать отдельно с прямоугольной областью изображения. Для этого необходимо выбрать инструмент "Выделение прямоугольной области" и отметить часть изображения на главной форме, с которой пользователь будет работать. После того как пользователем определена граница области и часть изображения выделена, над ней можно осуществить ряд действий:

"Копировать" - копирование изображения в буфер;

"Удалить" - удаление выделенной области изображения;

"Вырезать" - вырезание области с изображения для последующий вставки;

"Повернуть" - поворот изображения как влево на 90 градусов, так и вправо на 90 градусов;

"Обратить цвета" - обратить цвета выделенной области;

При выборе подпункта "Изменить цвет" пункта меню "Рисунок" открывается выпадающее меню, состоящее из нескольких подпунктов:

"Черно-белое" - представление изображения в черно-белых тонах;

"Сепия" - добавления эффекта сепия;

"Обратить цвета" - обратить цвета выделенной области;

Результат применения различных комбинаций действий представлен на рисунке А.9.

Рисунок А.9 - Экранная форма работы с выделенной областью.