Простой растровый редактор

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

Лабораторная работа № 14: Простой растровый редактор



Содержание

1. Вводная часть

2. Создание приложения Windows Forms

3. Модификация приложения Windows Forms: подготовка интерфейса редактора

4. Модификация приложения Windows Forms: функциональность растрового редактора

5. Завершающая часть

6. О приложении к Лабораторной работе № 14



1. Вводная часть

растровый редактор графика paint

В этой работе будет рассмотрена работа с растровой графикой и «простым» рисованием. Фактически мы будем реализовывать функциональность известного приложения Microsoft Paint, входящего в состав любого Windows.

Что же такое GDI+? Официальная документация скромно называет её Class-based API, то есть основанным на классах интерфейсе прикладных программ для ОС Windows поколения «не GDI». Так как она встроена в Windows XP и все последующие ОС вплоть до Windows 7, её называют частью этих операционных систем. Часто встречается также определение «библиотека» или «библиотека классов». В действительности, предоставляемый GDI+ набор классов является тонкой оболочкой над множеством обычных функций, реализованных в одной динамической библиотеке GdiPlus.dll.

Итак, GDI+ -- это библиотека, призванная заменить существующий уже больше 11 (или 18, в зависимости от того, как считать) лет интерфейс GDI, являющийся графическим ядром предыдущих версий Windows. Она сочетает в себе (по крайней мере, по замыслу) все достоинства своего предшественника и предоставляет множество новых мощных возможностей. Кроме того, при её проектировании заранее ставилась цель наименее болезненного переноса приложений на 64-битные платформы.

Основу для реализации функциональности растрового редактора будет составлять стандартная библиотека System.Drawing. Пространство имён System.Drawing обеспечивает доступ к функциональным возможностям графического интерфейса GDI+. Пространства имён System.Drawing.Drawing2D, System.Drawing.Imaging, и System.Drawing.Text обеспечивают дополнительные функциональные возможности.

Класс Graphics предоставляет методы рисования на устройстве отображения. Такие классы, как Rectangle и Point, инкапсулируют элементы GDI+. Класс Pen используется для рисования линий и кривых, а классы, производные от абстрактного класса Brush, используются для заливки фигур.

Основу рисунка составит элемент управления PictureBox пространства имён System.Windows.Forms, и класс Bitmap, который инкапсулирует точечный рисунок GDI+, состоящий из данных пикселей графического изображения и атрибутов рисунка. Объект Bitmap используется для работы с изображениями, определяемыми данными пикселей.

Приложение будет функционировать как растровый редактор изображений. А именно:

· будет доступна функция рисования линий и непрерывных линий с разной толщиной пера и цветом пера при рисовании;

· будет доступна функция рисования фигур, таких как прямоугольник и эллипс;

· будет доступна функция заливки фигур произвольным цветом, а также изменения толщины пера и цвета пера для контуров фигур при рисовании;

· будет доступна возможность очистки поля рисования (полная очистка и ластик), а также сохранения рисунка в разные графические форматы (например: JPEG);

· будет доступна возможность загрузки сохранённого рисунка или любого другого рисунка;

· будет доступна возможность работы с «эффектами», а именно осветление выбранного участка рисунка.

Пространства имён GDI+:

GDI+ -- это уровень, находящийся между GDI и приложением, которые предоставляет более интуитивно понятную, основанную на наследовании объектную модель. Хотя GDI+ -- это в основном оболочка вокруг GDI, тем не менее, Microsoft посредством GDI+ предлагает ряд новых возможностей и увеличенную производительность по сравнению с некоторыми старыми средствами GDI.

Часть базовой библиотеки классов .NET, связанная с GDI+, огромна! Гораздо важнее понять фундаментальные принципы, касающиеся рисования. Полные списки всех классов и методов, доступных в GDI+, конечно же, содержатся в документации SDK и MSDN.

Обзор основных пространств имен, в которых находятся базовые классы GDI+:

System.Drawing:

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

System.Drawing.Drawing2D:

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

System.Drawing.Imaging:

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

System.Drawing.Printing:

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

System.Drawing.Design:

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

System.Drawing.Text:

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

Контексты устройств и объект Graphics:

В GDI способ идентификации устройства, на которое нужно направить вывод, заключается в обращении к объекту, называемому контекстом устройства (device context -- DC). DC сохраняет информацию об определенном устройстве и может транслировать вызовы функций программного интерфейса GDI в конкретные команды, направляемые устройствам. Вы также можете опросить контекст устройства на предмет того, какие возможности он предоставляет (например, может ли принтер печатать в цвете или же только в черно-белом изображении), дабы соответствующим образом откорректировать вывод. Если вы пытаетесь заставить устройство делать что-то такое, что оно не способно сделать, то DC обычно обнаруживает это и предпринимает соответствующие действия (которые, в зависимости от ситуации, могут означать генерацию исключения либо модификацию запроса таким образом, чтобы получить как можно более близкий результат в рамках возможностей данного устройства).

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

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

В GDI+ контекст устройства помещен в оболочку базового класса .NET с именем System.Drawing.Graphics. Большая часть рисования выполняется вызовом методов экземпляра Graphics. Фактически, поскольку класс Graphics отвечает за выполнение большинства операций рисования, очень немного в GDI+ происходит такого, что не касалось бы тем или иным образом экземпляра Graphics, а потому понимание того, как управлять этим объектом, является ключом к пониманию того, как рисовать на устройствах отображения с помощью GDI+.



2. Создание приложения Windows Forms

Запускаем Visual Studio 2010, откроется Начальная страница:

Для начала, надо создать проект, для этого выполним последовательно: Файл -> Создать -> Проект… (также можно просто нажать сочетание клавиш Ctrl+Shift+N или пункт «Создать проект…» на Начальной странице):

Рис. 2.1 Создание нового проекта

Выберем слева в пункте Установленные шаблоны язык Visual C#, далее найдём в списке Приложение Windows Forms. Также здесь можно выбрать какой использовать «фреймворк» (набора компонентов для написания программ). В нашем случае выберем .NET Framework 4.



Рис. 2.2 Окно создания нового проекта

В поле Имя вводим LWP14SimpleRasterEditor -- это название программы (выбрано по названию лабораторного практикума, номеру и названию работы). В поле Расположение указана конечная директория, где будет находиться весь проект. Выберем расположение удобное для быстрого поиска. В поле Имя решения вводится либо название программы «по умолчанию» из поля Имя автоматически, либо можно ввести своё собственное. Под этим именем будет создана конечная папка проекта (если Имя и Имя решения разные).



Рис. 2.3 Вводим данные нового проекта приложения Windows Forms

После нажатия клавиши ОК мы увидим сформированный проект и исходный код приложения Windows Forms (не пустого изначально).

Рис. 2.4 Обозреватель решений: состав проекта приложения Windows Forms сформированного средой разработки

Теперь, можно откомпилировать созданную программу, нажав клавишу F5 (Отладка -> Начать отладку или нажав на иконку . Тем самым мы запускаем приложение в режиме отладки (и производим компиляцию debug-версии программы) (Debug выбрано изначально).

Рис. 2.5 Запуск приложения Windows Forms по конфигурации Debug

3. Модификация приложения Windows Forms: подготовка интерфейса редактора

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

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

ПРИМЕЧАНИЕ № 1: Для перехода на визуальное представление формы, необходимо двойным нажатием в обозревателе решений нажать на значок формы () или выбрать вкладку на панели вкладок с именем <имя формы>.cs [Конструктор].

Задаём следующие параметры формы на панели Свойства:

(Name)	изменим с Form1.cs2 на LWP14Main

^ Поменяем внутреннее имя формы.

Text	изменим с Form1 на Простой растровый редактор (C#)

^ Поменяем заголовок формы (то что отображается в шапке приложения слева).

Icon	изменим изображение (иконку) приложения

^ Необходим файл значка *.ico.

Size	изменим со значений 300; 300 на 800; 600

^ Поменяем размер формы.

ПРИМЕЧАНИЕ № 2: Для того, чтобы поменять имя файла нашей формы, необходимо выполнить следующее: выделить в обозревателе решений значок формы () и нажать правую кнопку мыши, затем выбрать Переименовать. Ввести необходимое новое имя СОХРАНЯЯ расширение *.cs. После смены имени, автоматически поменяются имена проассоциированных непосредственно с формой файлов:

Размести на форме (перетаскиванием в любое место) три панели:

ToolStrip ();

MenuStrip ();

StatusStrip ().

Все эти элементы расположены на панели инструментов в разделе Меню и панели инструментов:

То, что должно получиться в итоге показано на рисунке ниже:

Рис. 3.1 Модифицированная форма приложения и расстановка необходимых элементов управления

Теперь разместим главный элемент управления: PicureBox, растянув его до верхней и нижней панели. Проще всего это сделать не банальным расширением мышкой, а изменим свойство Dock у элемента управления:

Рис. 3.2 Свойства: элемент PictureBox, свойство Dock

Все свойства PictureBox

(Name):	PB_Bitmap
Dock:	Fill
BackColor:	White



Рис. 3.2 Свойства: элемент PictureBox, свойство BackColor

Теперь у нас должно получиться нечто подобное:

Рис. 3.3 Модифицированная форма приложения и расстановка необходимых элементов управления и PictureBox

На следующем рисунке показан окончательный вид на форму:

Рис. 3.4 Модифицированная форма приложения и окончательная расстановка необходимых элементов управления и PictureBox

Теперь расставим все необходимые элементы (как рисунке выше). Начнём с главного меню (верхнего), за которое отвечает панель MenuStrip. Свойство панели не меняем, имя панели оставляем как есть: menuStrip1. Создаём три корневых меню: Файл, Рисование и Параметры. Для создания такого меню нужно выделить MenuStrip, затем нажать на появившуюся надпись «Вводить здесь» (), после чего ввести текст:

После создания трёх корневых элементов меню, создаём вложенные меню аналогичным образом. Для создания разделителя (горизонтальной черты между элементами меню) необходимо сначала создать пустой элемент в качестве вложенного (разделителем не может быть корневой элемент меню). Текст можно вводить любой. Затем, после создания элемента, нажимаем правую кнопку мыши на том элементе меню, которое хотим сделать разделителем, далее Преобразовать в -> Separator.

Для перемещения разделителя, например, наверх списка элементов меню нужно выделить разделитель левой кнопкой мыши и не отпуская клавишу перетащить в нужном направлении:

Меню Файл выглядит так:

Три элемента-кнопки (MenuItem): Выбрать рисунок, Сохранить как... и Выход и два разделителя. Свойства:

MenuItem

(Name):	выбратьРисунокToolStripMenuItem
Text:	Выбрать рисунок
ToolTipText:	Выбрать рисунков для загрузки в рабочее поле

Свойство (Name) оставлено без изменений. Имя было выбрано автоматически самой Visual Studio 2010.

MenuItem

(Name):	сохранитьКакРисунокToolStripMenuItem
Text:	Сохранить как...
ToolTipText:	Сохранить изображение в рабочем поле как...

MenuItem

(Name):	выходКакРисунокToolStripMenuItem
Text:	Выход
ToolTipText:	Выйти из приложения

Меню Рисование выглядит так:

В левом подменю четыре кнопки и один разделитель, в правом всего одна кнопка.



MenuItem

(Name):	очиститьToolStripMenuItem
Text:	Очистить
ToolTipText:	Очистить рабочее поле

Как и раньше, свойство (Name) оставлено без изменений. Имя было выбрано автоматически.

MenuItem

(Name):	линияToolStripMenuItem
Text:	Линия
ToolTipText:	Режим рисования линии

MenuItem

(Name):	прямоугольникToolStripMenuItem
Text:	Прямоугольник
ToolTipText:	Режим рисования прямоугольника

MenuItem

(Name):	непрерывнаяToolStripMenuItem
Text:	Непрерывная
ToolTipText:	Режим непрерывной линии

Меню Параметры выглядит так:

Две кнопки, разделитель и текстовое поле (TextBox):



MenuItem

(Name):	цветПераToolStripMenuItem
Text:	Цвет пера
ToolTipText:	Установить цвет пера для линий и границ фигур

MenuItem

(Name):	цветЗаливкиToolStripMenuItem
Text:	Цвет заливки
ToolTipText:	Установить цвет заливки фигур

MenuItem

(Name):	толщинаПераToolStripMenuItem
Text:	Толщина пера
ToolTipText:	Введите значение толщины пера (по умолчанию: 1)

Перейдём к нижнему меню (ToolStrip). Здесь всё просто. Все кнопки этого меню по функциям будут повторять кнопки верхнего меню. А точнее нажатие на кнопку нижнего меню, будет приводить к нажатию кнопки верхнего меню. Мы добавим нижнее меню просто для наглядности.

Для добавления элемента в меню ToolStrip нужно выделить это меню и далее в специальном выдающем списке выбрать нужны элемент для добавления:

Меню выглядит так:

Шесть кнопок с изображениями (Button), три кнопки без изображений и четыре вертикальных разделителя (Separator).

При создании кнопки в ToolStrip ей автоматически присваивается изображение (). Изображение можно поменять, импортировав его в проект, либо создав собственное изображение при помощи встроенного в Visual Studio 2010 редактора изображений. Так как работа с созданием иконок и изображений во встроенном редакторе уже была рассмотрена в предыдущих лабораторных работах, теперь можно первым путём и импортировать изображения. Пусть это будут изображения для кнопок Сохранить как..., Выход, Очистить, Цвет пера и Цвет заливки:

На панели ToolStrip создаём кнопку Сохранить как... (вторая на панели) со следующими свойствами:

Button

(Name):	сохранитьКакToolStripButton
Text:	Сохранить как...
ToolTipText:	Сохранить как...
DisplayStyle:	Image

Теперь ищем свойство Image и жмём справа от свойства на троеточие (). Откроется окно Выбор ресурса:



Рис. 3.5 Выбор ресурса: окно выбора файла ресурса изображения для кнопки в ToolStrip

На рисунке выше все ресурсы уже импортированы. Для импорта жмём на соответствующую кнопку (если нужно чтобы импортируемое изображение осталось в проекте в качестве отдельного файла, должно быть выбрано Файл ресурсов проекта). Далее выбираем нужный нам файл с изображением и жмём Открыть, изображение будет отображено в окне Выбор ресурса. Жмём ОК. Кнопка теперь с иконкой.

Все добавленные ресурсы можно посмотреть, открыв файл Resources.resx в обозревателе решений:

В нашем случае этот файл выглядит так:

Рис. 3.6 Resources.resx: все ресурсы проекта импортированные извне

В этом же окне можно работать с этими ресурсами (добавлять новые, удалять и редактировать).

Рис. 3.7 Resources.resx: меню Добавить ресурс

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

Свойства всех кнопок этого меню:

Button

(Name):	выбратьРисунокToolStripButton
Text:	Выбрать рисунок
ToolTipText:	Выбрать рисунок
DisplayStyle:	Image



Button

(Name):	выходToolStripButton
Text:	Выход
ToolTipText:	Выход
DisplayStyle:	Image

Button

(Name):	очиститьToolStripButton
Text:	Очистить
ToolTipText:	Очистить
DisplayStyle:	Image

Button

(Name):	линияToolStripButton
Text:	Л
ToolTipText:	Выход
DisplayStyle:	Text

Button

(Name):	прямоугольникToolStripButton
Text:	П
ToolTipText:	Прямоугольник
DisplayStyle:	Text

Button

(Name):	окружностьToolStripButton
Text:	О
ToolTipText:	Окружность
DisplayStyle:	Text

Button

(Name):	цветПераToolStripButton
Text:	Цвет пера
ToolTipText:	Цвет пера
DisplayStyle:	Image



Button

(Name):	цветЗаливкиToolStripButton
Text:	Цвет заливки
ToolTipText:	Цвет заливки
DisplayStyle:	Image

Строка состояния StatusStrip будет содержать всего один элемент из возможных:

Один StatusLabel со следующими свойствами:

StatusLabel

(Name):	StatusLabel
Text:	Приложение готово к работе

4. Модификация приложения Windows Forms: функциональность растрового редактора

Есть два основных способа работы с изображением и последующим его сохранением. Работа с растровым изображением и работа с векторным изображением. Не путать с типами изображений.

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

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

Важными характеристиками изображения являются:

1. Количество пикселей -- количество цветов. Может указываться отдельно количество пикселей по ширине и высоте (1024Ч768, 640Ч480, …) или же, редко, общее количество пикселей (часто измеряется в мегапикселях).

2. Количество используемых цветов или глубина цвета (эти характеристики имеют следующую зависимость: N = 2^k, где N -- количество цветов, а k -- глубина цвета);

3. Цветовое пространство (цветовая модель) RGB, CMYK, XYZ, YCbCr и др.

4. Разрешение -- справочная величина, говорящая о рекомендуемом размере пикселя изображения.

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

Типичный растровый редактор: Paint. Фактически редактор оперирует только точками. Нарисованную линию нельзя передвинуть или растянуть. А всё рисование состоит только из заполнения массива координат и пикселей. Именно так и будет работать наше приложение. Второй же способ, это на этапе рисования (до сохранения в обычные графические форматы типа *.bmp) представлять каждый объект рисунка как самостоятельный объект. Для линии это координаты положения, толщина, цвет и что самое главное -- аналоги имени. Таким образом, такую линию можно переместить, растянуть, удалить как объект (ближайший аналог: символ в Word'е). Для приложения такой рисунок предстаёт как векторное изображение, которое можно экспортировать в растровое (данные о примитивах удаляются, остаётся лишь слитое воедино изображение).

Теперь о нашем приложении:

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

Событие Click для элемента меню (Выбрать рисунок) можно создать просто дважды кликнув на элементе меню. Также можно выбрать этот элемент меню, далее на панели Свойства справа перейти на вкладку События и далее ввести имя метода для события Click, либо просто дважды клинуть по Click (Действия):

Рис. 3.5 Свойства: Событие Click элемента меню Выбрать рисунок

Код события Click для кнопки Выбрать рисунок:

private void выбратьРисунокToolStripMenuItem_Click(object sender, EventArgs e)

{

// Если рисунок был выбран

if (OFD_Picture.ShowDialog() == DialogResult.OK)

{

// Получаем изображения по указанному в диалоге OpenFileDialog пути (OFD_Picture.FileName)

image = Image.FromFile(OFD_Picture.FileName);

int width = image.Width; // Получаем ширину изображения

int height = image.Height; // Получаем высоту изображения

// Устанавливаем размеры изображения в PictureBox

PB_Bitmap.Width = width;

PB_Bitmap.Height = height;

// Создаём Bitmap на основе изображения

bitmap = new Bitmap(Image.FromFile(OFD_Picture.FileName), width, height);

PB_Bitmap.Image = bitmap; // Отправляем Bitmap в PictureBox

StatusLabel.Text = "Изображение " + Path.GetFileName(OFD_Picture.FileName) + " успешно загружено! Полный путь: " + OFD_Picture.FileName;

}

}

Кнопка Сохранить как... сохраняет всё изображение в рабочей области в выбранном формате (BMP-, JPEG-, GIF, TIF- или PGN-файл) и выводит результат в качестве текста в строке состояния.

Событие Click кнопки Сохранить как...:

private void сохранитьКакToolStripMenuItem_Click(object sender, EventArgs e)

{

// Если выбрали, сохраняем

if (SFD_Picture.ShowDialog() == DialogResult.OK)

{

// Получаем имя файла из диалога

string fileName = SFD_Picture.FileName;

// Получаем расширения файла из диалога

string strFilExtn = fileName.Remove(0, fileName.Length - 3);

// Сохраняем файл в выбранном расширении

switch (strFilExtn)

{

case "bmp":

bitmap.Save(fileName, System.Drawing.Imaging.ImageFormat.Bmp);

break;

case "jpg":

bitmap.Save(fileName, System.Drawing.Imaging.ImageFormat.Jpeg);

break;

case "gif":

bitmap.Save(fileName, System.Drawing.Imaging.ImageFormat.Gif);

break;

case "tif":

bitmap.Save(fileName, System.Drawing.Imaging.ImageFormat.Tiff);

break;

case "png":

bitmap.Save(fileName, System.Drawing.Imaging.ImageFormat.Png);

break;

default:

break;

}

StatusLabel.Text = "Изображение " + Path.GetFileName(SFD_Picture.FileName) + " успешно сохранено! Полный путь: " + SFD_Picture.FileName;

}

}

Событие Click кнопки Выход:

private void выходToolStripMenuItem_Click(object sender, EventArgs e)

{

Close();

}

Кнопка Очистить, полностью очищает рабочую область и Bitmap в которой сохраняются изменения.

Событие Click кнопки Очистить:

private void очиститьToolStripMenuItem_Click(object sender, EventArgs e)

{

// Очищаем рабочее поле

// Создаём пустой Bitmap на основе размеров PictureBox

bitmap = new Bitmap(PB_Bitmap.Size.Width, PB_Bitmap.Size.Height);

// Инициализируем фон для поля рисования

graphics = Graphics.FromImage(bitmap);

graphics.Clear(Color.White); // Задаём белый цвет фона, иначе фон будет прозрачным

//graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.None; // Выключаем сглаживание

PB_Bitmap.Image = bitmap; // Отправляем Bitmap в PictureBox

StatusLabel.Text = "Рабочее поле очищено";

}

Кнопка Линия активирует режим в котором в PictureBox можно рисовать линии. Код события содержит лишь действия по управлению элементами меню и выводом текстового сообщения в строку состояния. При нажатии, снимается выделение (галочка слева от надписи) с кнопок меню «Рисование»: «Прямоугольник» или «Окружность», если до этого они были активированы. Событие Click:

private void линияToolStripMenuItem_Click(object sender, EventArgs e)

{

if (!DrawLine)

{

DrawLine = true;

линияToolStripMenuItem.Checked = true;

DrawRect = false;

прямоугольникToolStripMenuItem.Checked = false;

DrawCirc = false;

окружностьToolStripMenuItem.Checked = false;

StatusLabel.Text = "Включен режим рисования линии";

}

}

Событие Click кнопки Прямоугольник:

private void прямоугольникToolStripMenuItem_Click(object sender, EventArgs e)

{

if (!DrawRect)

{

DrawLine = false;

линияToolStripMenuItem.Checked = false;

DrawRect = true;

прямоугольникToolStripMenuItem.Checked = true;

DrawCirc = false;

окружностьToolStripMenuItem.Checked = false;

StatusLabel.Text = "Включен режим рисования прямоугольника";

}

}

Событие Click кнопки Окружность:

private void окружностьToolStripMenuItem_Click(object sender, EventArgs e)

{

if (!DrawCirc)

{

DrawLine = false;

линияToolStripMenuItem.Checked = false;

DrawRect = false;

прямоугольникToolStripMenuItem.Checked = false;

DrawCirc = true;

окружностьToolStripMenuItem.Checked = true;

StatusLabel.Text = "Включен режим рисования окружности";

}

}

Кнопка «Непрерывная» включает режим рисования линий при котором предыдущая линия становится началом следующей. Получается ломаная линия. Событие Click этой кнопки выглядит так:

private void непрерывнаяToolStripMenuItem_Click(object sender, EventArgs e)

{

if (!CurveLine)

{

CurveLine = true;

непрерывнаяToolStripMenuItem.Checked = true;

StatusLabel.Text = "Включен режим непрерывной линии";

}

else

{

CurveLine = false;

непрерывнаяToolStripMenuItem.Checked = false;

StatusLabel.Text = "Выключен режим непрерывной линии";

}

}

Кнопка Цвет пера вызывает стандартный диалог Windows по выбору цвета и задаёт цвет главного пера, которым рисуется линия или контуры фигур. Если цвет не выбран, значение устанавливается по умолчанию как чёрный. Событие Click кнопки:

private void цветПераToolStripMenuItem_Click(object sender, EventArgs e)

{

if (CD_Pen.ShowDialog() == DialogResult.OK)

{

Color_Pen = CD_Pen.Color;

Main_Pen = new Pen(Color_Pen, Convert.ToInt16(X));

Main_Pen.EndCap = System.Drawing.Drawing2D.LineCap.NoAnchor;

}

else

{

Main_Pen = new Pen(Color.Black, Convert.ToInt16(X));

Main_Pen.EndCap = System.Drawing.Drawing2D.LineCap.NoAnchor;

}

}

Кнопка Цвет заливки устанавливает цвет заполнения SolidBrush-объекта для прямоугольника или окружности. Если цвет не выбран, значение сбрасывается на цвет с именем Color.Violet, который выбран в качестве цвета для сбора заливки (заливка не осуществляется и фигура не заполняется цветом.

private void цветЗаливкиToolStripMenuItem_Click(object sender, EventArgs e)

{

if (CD_Fill.ShowDialog() == DialogResult.OK)

{

Color_Fill = CD_Fill.Color;

Fill = new SolidBrush(Color_Fill);

}

else

{

Color_Fill = Color.Violet; // Цвет сбора заливки

Fill = new SolidBrush(Color_Fill);

}

}

Для элемента TextBox (толщинаПераToolStripMenuItem) определены четыре события. Основное событие TextChanged вызывается всякий раз когда будет меняться текст внутри поля. Само поле предназначено для ввода числа отвечающего за толщину пера (положительное значение от 0 и до примерно 1000 пикселей0; после 1000 значение не нельзя будет заменить разницы):

private void толщинаПераToolStripMenuItem_TextChanged(object sender, EventArgs e)

{

try

{

X = Convert.ToDouble(толщинаПераToolStripMenuItem.Text);

Main_Pen = new Pen(Color_Pen, Convert.ToInt16(X));

}

catch { }

}

Событие KeyDown выполняющее операцию сохранения числа в текстовом поле (аналогично предыдущему событию), но после нажатия клавиши Enter:

private void толщинаПераToolStripMenuItem_KeyDown(object sender, KeyEventArgs e)

{

if (e.KeyCode == Keys.Enter) // Если нажат Enter

{

X = Convert.ToDouble(толщинаПераToolStripMenuItem.Text);

Main_Pen = new Pen(Color_Pen, Convert.ToInt16(X));

}

}

События MouseEnter и MouseLeave реализуют визуальное «оформление» элемента. Наводим курсор и получаем значение 1. «1» остаётся, если ничего не вводить в поле или оставить поле пустым:

private void толщинаПераtoolStripMenuItem_MouseEnter(object sender, EventArgs e)

{

if (толщинаПераToolStripMenuItem.Text == "Толщина пера")

{

толщинаПераToolStripMenuItem.Text = "1";

}

}

private void толщинаПераtoolStripMenuItem_MouseLeave(object sender, EventArgs e)

{

if (толщинаПераToolStripMenuItem.Text == "")

{

толщинаПераToolStripMenuItem.Text = "1";

}

}

События кнопок ToolStrip-меню похожи и выполняют роль переопределения вызовов некоторых событий нажатия кнопок верхнего меню. Все события Click по порядку следования кнопок на рисунке 3. 4.:

private void выбратьРисунокToolStripButton_Click(object sender, EventArgs e)

{

выбратьРисунокToolStripMenuItem.PerformClick(); // Вызываем нажатие аналогичной кнопки в MenuStrip

}

private void сохранитьКакToolStripButton_Click(object sender, EventArgs e)

{

сохранитьКакToolStripMenuItem.PerformClick();

}

private void выходToolStripButton_Click(object sender, EventArgs e)

{

выходToolStripMenuItem.PerformClick();

}

private void очиститьToolStripButton_Click(object sender, EventArgs e)

{

очиститьToolStripMenuItem.PerformClick();

}

private void линияToolStripButton_Click(object sender, EventArgs e)

{

линияToolStripMenuItem.PerformClick();

линияToolStripButton.Checked = true;

прямоугольникToolStripButton.Checked = false;

окружностьToolStripButton.Checked = false;

}

private void прямоугольникToolStripButton_Click(object sender, EventArgs e)

{

прямоугольникToolStripMenuItem.PerformClick();

линияToolStripButton.Checked = false;

прямоугольникToolStripButton.Checked = true;

окружностьToolStripButton.Checked = false;

}

private void окружностьToolStripButton_Click(object sender, EventArgs e)

{

окружностьToolStripMenuItem.PerformClick();

линияToolStripButton.Checked = false;

прямоугольникToolStripButton.Checked = false;

окружностьToolStripButton.Checked = true;

}

private void цветПераToolStripButton_Click(object sender, EventArgs e)

{

цветПераToolStripMenuItem.PerformClick();

}

private void цветЗаливкиToolStripButton_Click(object sender, EventArgs e)

{

цветЗаливкиToolStripMenuItem.PerformClick();

}

Теперь перейдём к редактированию непосредственно кода и основным события формы. Для начала откроем код файла LWP14Main.cs (правая кнопка мыши на значке формы, далее Перейти к коду или нажмём на клавишу F7). В самом начале файла добавим ссылку:

using System.IO; // Для работы класса Path

Найдём:

public partial class LWP14Main : Form

{

Добавим после:

// Диалоги

OpenFileDialog OFD_Picture;

SaveFileDialog SFD_Picture;

ColorDialog CD_Pen;

ColorDialog CD_Fill;

// Рабочее поле

Image image;

Graphics graphics;

Bitmap bitmap;

// Инструменты рисования

Pen Main_Pen;

Color Color_Pen;

Color Color_Fill;

// Объекты рисования

Point FirstPoint = new Point();

Point ToPoint = new Point();

Point LastPoint = new Point();

Rectangle SelectRect = new Rectangle();

Rectangle CircleRect = new Rectangle();

Rectangle LightRect = new Rectangle();

SolidBrush Fill;

// Вспомогательные переменные

Boolean DrawLine;

Boolean CurveLine;

Boolean DrawRect;

Boolean DrawCirc;

Double X;

Код метода LWP14Main() изменим следующим образом:

public LWP14Main()

{

InitializeComponent();

// Инициализируем диалоги

OFD_Picture = new OpenFileDialog();

OFD_Picture.Filter = "Файлы изображений (*.bmp, *.jpg, *.gif, *.tif, *.png, *.ico, *.emf, *.wmf)|*.bmp;*.jpg;*.gif; *.tif; *.png; *.ico; *.emf; *.wmf";

SFD_Picture = new SaveFileDialog();

SFD_Picture.Title = "Сохранить как";

SFD_Picture.OverwritePrompt = true;

SFD_Picture.CheckPathExists = true;

SFD_Picture.Filter = "Изображение в формате PNG|*.png|" + "Изображение в формате JPEG|*.jpg|" + "Изображение в формате BMP|*.bmp|" + "Изображение в формате GIF|*.gif|" + "Изображение в формате TIF|*.tif";

CD_Pen = new ColorDialog();

CD_Fill = new ColorDialog();

// Инициализируем рабочее поле

// Создаём пустой Bitmap на основе размеров PictureBox

bitmap = new Bitmap(PB_Bitmap.Size.Width, PB_Bitmap.Size.Height);

// Инициализируем фон для поля рисования

graphics = Graphics.FromImage(bitmap);

graphics.Clear(Color.White); // Задаём белый цвет фона, иначе фон будет прозрачным

//graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.None; // Выключаем сглаживание

PB_Bitmap.Image = bitmap; // Отправляем Bitmap в PictureBox

// Инициализируем инструменты рисования по умолчанию

Main_Pen = new Pen(Color.Black, 1);

Main_Pen.EndCap = System.Drawing.Drawing2D.LineCap.NoAnchor; // Не задаём маркер на конце пера

//graphics.DrawLine(Main_Pen, 10, 10, 11, 10); // Рисует точку в один пиксель, при отсутствии маркера на Pen и толщине в 1

Color_Pen = Color.Black;

Color_Fill = Color.Violet;

Fill = new SolidBrush(Color_Fill);

// Инициализируем объекты рисования...

// ...нету их :)

// Инициализируем вспомогательные переменные по умолчанию

DrawLine = true;

линияToolStripMenuItem.Checked = true;

линияToolStripButton.Checked = true;

CurveLine = false;

DrawRect = false;

прямоугольникToolStripButton.Checked = false;

DrawCirc = false;

окружностьToolStripButton.Checked = false;

X = 1;

// Инициализируем прочее

StatusLabel.Text = "Приложение готово к работе";

}

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

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

Первый этап реализован в методе PictureBox: MouseDown. Нажатие ЛКМ в любом месте рабочей зоны приводит к сохранению координат (так устроено само событие и его аргументы). В зависимости от выбранного режима эти координаты используются по разному. Для отрисовки линии координаты нажатия отправляются в значения X и Y для объекта Point,а для фигур формируется начальная точка объекта Rectangle. Событие MouseDown для элемента PictureBox (PB_Bitmap) выглядит так:

private void PB_Bitmap_MouseDown(object sender, MouseEventArgs e)

{

if (e.Button == MouseButtons.Right) // Если нажата правая кнопка мыши

{

LightRect.Width = 0;

LightRect.Height = 0;

LightRect.X = e.X;

LightRect.Y = e.Y;

}

if (e.Button == MouseButtons.Left) // Если нажата левая кнопка мыши

{

// Если рисуем линию

if (DrawLine)

{

// Получаем координаты нажатия левой кнопки мыши в PictureBox

FirstPoint.X = e.X;

FirstPoint.Y = e.Y;

ToPoint = FirstPoint;

if (CurveLine)

{

FirstPoint = LastPoint;

}

}

// Если рисуем прямоугольник

if (DrawRect)

{

SelectRect.Width = 0;

SelectRect.Height = 0;

SelectRect.X = e.X;

SelectRect.Y = e.Y;

}

// Если рисуем окружность

if (DrawCirc)

{

CircleRect.Height = 0;

CircleRect.Width = 0;

CircleRect.X = e.X;

CircleRect.Y = e.Y;

}

}

}

Промежуточный этап для наглядности «усовершенствован». Если зажать ЛКМ во время рисования линии, то за курсором от начальной точки будет тянуться чёрная тонкая линия. В случае если будет включен режим рисования прямоугольника или окружности, то вместо линии будет пунктирный прямоугольник. Эти действия реализованы в событии MouseMove для PictureBox:

private void PB_Bitmap_MouseMove(object sender, MouseEventArgs e)

{

if (e.Button == MouseButtons.Right)

{

LightRect.Width = e.X - LightRect.X;

LightRect.Height = e.Y - LightRect.Y;

}

if (e.Button == MouseButtons.Left)

{

// Если рисуем линию, отображаем заготовку линии

if (DrawLine)

{

// Отображаем заготовку линии до тех пор пока не отпустим левую кнопку мыши

ControlPaint.DrawReversibleLine(PB_Bitmap.PointToScreen(FirstPoint), PB_Bitmap.PointToScreen(ToPoint), Color.Black);

ToPoint = new Point(e.X, e.Y);

ControlPaint.DrawReversibleLine(PB_Bitmap.PointToScreen(FirstPoint), PB_Bitmap.PointToScreen(ToPoint), Color.Black);

if (CurveLine) // Убираем возможные "артефакты", возникающие при отрисовки непрерывной линии

PB_Bitmap.Refresh();

}

// Если рисуем прямоугольник, отображаем заготовку прямоугольника пунктирными линиями

if (DrawRect)

{

ControlPaint.DrawReversibleFrame(PB_Bitmap.RectangleToScreen(SelectRect), Color.Black, FrameStyle.Dashed);

SelectRect.Width = e.X - SelectRect.X; // Получаем значение ширины прямоугольника

SelectRect.Height = e.Y - SelectRect.Y; // Получаем значение высоты прямоугольника

ControlPaint.DrawReversibleFrame(PB_Bitmap.RectangleToScreen(SelectRect), Color.Black, FrameStyle.Dashed);

//PB_Bitmap.Refresh();

}

// Если рисуем окружность, отображаем заготовку окружности пунктирными линиями

if (DrawCirc)

{

ControlPaint.DrawReversibleFrame(PB_Bitmap.RectangleToScreen(CircleRect), Color.Black, FrameStyle.Dashed);

CircleRect.Width = e.X - CircleRect.X;

CircleRect.Height = e.Y - CircleRect.Y;

ControlPaint.DrawReversibleFrame(PB_Bitmap.RectangleToScreen(CircleRect), Color.Black, FrameStyle.Dashed);

//PB_Bitmap.Refresh();

}

}

}

Третий этап собственно реализует рисование объекта. После «отжатия» левой кнопки мыши будут получены координаты конечной точки и отрисован объект. Это реализует событий MouseUp для PictureBox:

private void PB_Bitmap_MouseUp(object sender, MouseEventArgs e)

{

if (e.Button == MouseButtons.Right)

{

graphics = Graphics.FromImage(PB_Bitmap.Image);

graphics.DrawRectangle(Main_Pen, LightRect); // Нарисуем прямоугольник-контур для осветлённой области

graphics.Dispose();

PB_Bitmap.Invalidate();

}

if (e.Button == MouseButtons.Left) // Если нажата левая кнопка мыши

{

// Рисуем в PictureBox (только в загруженном в элементе изображении)

graphics = Graphics.FromImage(PB_Bitmap.Image);

if (DrawLine)

{

LastPoint.X = e.X;

LastPoint.Y = e.Y;

graphics.DrawLine(Main_Pen, FirstPoint, LastPoint);

}

if (DrawRect)

{

if (Color_Fill != Color.Violet) { graphics.FillRectangle(Fill, SelectRect); } // Заполнение цветом прямоугольной области ограниченной SelectRect

graphics.DrawRectangle(Main_Pen, SelectRect);

}

if (DrawCirc)

{

if (Color_Fill != Color.Violet) { graphics.FillEllipse(Fill, CircleRect); } // Заполнение цветом эллептической области ограниченной CircleRect

graphics.DrawEllipse(Main_Pen, CircleRect);

}

graphics.Dispose();

PB_Bitmap.Invalidate(); // Обновляем PictureBox

}

}

Реализуем ещё одну интересную функцию, которую «повесим» на событие нажатия правой кнопки мыши в области PictureBox. Код события MouseClick:

private void PB_Bitmap_MouseClick(object sender, MouseEventArgs e)

{

if (e.Button == MouseButtons.Right)

{

StatusLabel.Text = "Произведено осветление зоны";

int newRed, newGreen, newBlue;

Color pixel;

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

if ((LightRect.Width > 500) || (LightRect.Height > 500))

{

DialogResult result = MessageBox.Show("Выделенная область велика! " + "Изменение яркости может требовать значительного времени!", "Простой растровый редактор (C#) :: Изменения яркости", MessageBoxButtons.OKCancel);

// При нажатии кнопки "Отмена" выходим из метода

// и возвращаемся к месту его вызова

if (result == DialogResult.Cancel) return;

}

/* Перебираем последовательно все пиксели данного участка и удваиваем значение яркости компонент RGB пикселей */

// Перебор по горизонтали слева направо...

for (int x = LightRect.X; x < LightRect.X + LightRect.Width; x++)

{

// и по вертикали сверху вниз...

for (int y = LightRect.Y; y < (LightRect.Y + LightRect.Height); y++)

{

// Считываем текущий пиксель

pixel = bitmap.GetPixel(x, y);

// Увеличиваем яркость цветовых компонент пикселя

newRed = (int)Math.Round(pixel.R * 2.0, 0);

if (newRed > 255) newRed = 255;

newGreen = (int)Math.Round(pixel.G * 2.0, 0);

if (newGreen > 255) newGreen = 255;

newBlue = (int)Math.Round(pixel.B * 2.0, 0);

if (newBlue > 255) newBlue = 255;

// Присваиваем пикселю новые цветовые значения

bitmap.SetPixel(x, y, Color.FromArgb((byte)newRed, (byte)newGreen, (byte)newBlue));

}

}

}

}

Код выше «осветляет» прямоугольную область при зажатой правой кнопке мыши. Вокруг осветлённой области также рисуется прямоугольник толщина пера и цвет общий для остальных фигур.

Наконец, сделаем ластик. Работать он будет при зажатой клавиши Shift (+ нажатие ПКМ в области, которую нужно стереть). Сделаем ластик также ещё и карандашом. Его цвет будет завесить от цвета заливки, а толщина поля «стирания» от толщины пера.

Найдём:

Boolean DrawCirc;

Double X;

Добавим после:

// Ластик

Pen Pen_Erase;

Boolean DrawErase;

SolidBrush Erase;

Rectangle EraseRect = new Rectangle();

Найдём:

// Инициализируем прочее

StatusLabel.Text = "Приложение готово к работе";

Добавим после:

// Ластик

Pen_Erase = new Pen(Color.White, 1);

DrawErase = false;

Erase = new SolidBrush(Color.White);

Найдём:

private void PB_Bitmap_MouseMove(object sender, MouseEventArgs e)

{

Добавим после:

// Ластик

if (e.Button == MouseButtons.Right && DrawErase == true)

{

EraseRect.X = e.X - Convert.ToInt32(X);

EraseRect.Y = e.Y - Convert.ToInt32(X);

EraseRect.Width = Convert.ToInt32(X) * 2;

EraseRect.Height = Convert.ToInt32(X) * 2;

graphics = Graphics.FromImage(PB_Bitmap.Image);

graphics.FillEllipse(Erase, EraseRect);

graphics.Dispose();

PB_Bitmap.Invalidate();

StatusLabel.Text = "Режим ластика/карандаша";

}

Перепишем код события нажатия на кнопку «Цвет заливки»:

private void цветЗаливкиToolStripMenuItem_Click(object sender, EventArgs e)

{

if (CD_Fill.ShowDialog() == DialogResult.OK)

{

Color_Fill = CD_Fill.Color;

Fill = new SolidBrush(Color_Fill);

Erase = new SolidBrush(Color_Fill);

}

else

{

Color_Fill = Color.Violet; // Цвет сбора заливки

Fill = new SolidBrush(Color_Fill);

Erase = new SolidBrush(Color.White);

}

}

А также инициализируем два события главной формы (отлов нажатия и отжатия клавиш левый и правый Shift): KeyDown и KeyUp:

private void LWP14Main_KeyDown(object sender, KeyEventArgs e)

{

if (e.KeyCode == Keys.ShiftKey) // Если нажат Shift

{

DrawErase = true;

}

}

private void LWP14Main_KeyUp(object sender, KeyEventArgs e)

{

if (e.KeyCode == Keys.ShiftKey) // Если нажат Shift

{

DrawErase = false;

}

}

Готово. Можно компилировать и проверять работоспособность.

5. Завершающая часть

Компилируем приложение (Release) и запускаем. Рисуем что хотим, при помощи всех доступных инструментов, осветляем области и жмём Сохранить как..., после чего сохраняем творение на диск и проверяем что и как сохранилось:

Рис. 5.1 Модифицированное приложение Windows Forms: рисуем

Сохранённый документ в формате *.gif (Рис. 5. 2):

Рис. 5.2 Результат работы приложения: изображение Рисунок.gif, открытое в стандартном редакторе изображений Windows 7

Теперь жмём Очистить и далее откроем при помощи нашего приложения сторонний рисунок:

Рис. 5.3 Модифицированное приложение Windows Forms: загружаем сторонний рисунок

И осветляем его:



Рис. 5.4 Модифицированное приложение Windows Forms: осветляем сторонний рисунок

Сохраняем полученный рисунок и проверяем, всё ли сохранилось.

Рис. 5.5 Модифицированное приложение Windows Forms: применяем «ластик/карандаш» с толщиной пера в 25 пикселей (Shift+ПКМ) на заново открытом рисунке

6. О приложении к Лабораторной работе № 14

Получившуюся программу (LWP14SimpleRasterEditor.exe), собранную из кусков кода приведённых в данной лабораторной работе, а также архив с изображениями иконок для меню (Icons.zip), использованный в данной работе, можно загрузить по ссылке в конце этого материала.

Размещено на Allbest.ru

...