Аналог графического редактора Paint

МИНИСТЕРСТВО  ОБРАЗОВАНИЯ  И  НАУКИ РОССИЙСКОЙ  ФЕДЕРАЦИИ

ФЕДЕРАЛЬНОЕ  ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ

В  Ы  С  Ш  Е  Г  О    П  Р  О  Ф  Е  С  С  И  О  Н  А  Л  Ь  Н  О  Г  О   ОБ  Р  А  З  О  В  А  Н  И  Я

ТЕХНОЛОГИЧЕСКИЙ  ИНСТИТУТ «ЮЖНЫЙ  ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»

ФАКУЛЬТЕТ   АВТОМАТИКИ   И   ВЫЧИСЛИТЕЛЬНОЙ   ТЕХНИКИ

 

ПРОВЕРИЛ Ассистент кафедры САиТ __________________ ВИШНЯКОВ Р.Ю. "_____"_______________________ 2010 г.

ВЫПОЛНИЛ Студент группы А-58 __________________ Парахин А.В.   "_____"_____________________2010 г.

КУРСОВАЯ РАБОТА

по дисциплине

«КОМПЬЮТЕРНАЯ ГРАФИКА»

на тему

«Редактор растровой графики»

 

 

 

Аннотация

Данная работа предназначена для демонстрации методов реализации простейших графических  примитивов, примеров работы с графическими файлами и буфером обмена, а  также, возможно, для использования  начинающими пользователями компьютера. В созданном приложении присутствуют инструменты, характерные для всех программных пакетов своего класса: карандаш, линия, прямоугольник, закрашенный прямоугольник, ластик, заливка, определитель цвета, выделение. Также реализована полноценная работа с буфером обмена (вырезание, копирование, вставка). Поддерживаются графические файлы с расширением *.bmp. Приложение представлено в стандартном для Windows-систем виде. Главной особенностью программы является использование простых и понятных методов визуализации всех геометрических фигур.

 

 

 

 

 

 

 

 

 

Оглавление

 

1. Аннотация 1
2. Техническое задание 3
3. Постановка задачи 4
4. Введение 5
5. Создание простого редактора растровой графики 7
6. Описание программного продукта 12
7. Заключение 17
8. Библиографический список 18

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Техническое задание

Разработать редактор растровой графики, позволяющий  создавать, редактировать, сохранять  и открывать графические файлы  формата *.bmp. Редактор должен иметь  набор простейших графических примитивов, таких как: линия, кривая, прямоугольник, заливка, а также инструменты  для частичного удаления (ластик) и  выделения части изображения. Должна быть организована работа с буфером  обмена (вырезание, копирование, вставка). Также рекомендуется наличие  справочных материалов по работе инструментов внутри интерфейса программы.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

Для решения поставленной задачи используется объектно-ориентированный язык программирования C++ Builder 6.0. Для реализации инструментов будут использоваться некоторые встроенные функции языка. В качестве входных данных выступает: вид инструмента, цвет, положение на холсте, что стандартно для всех графических редакторов. Для работы с файлами определен формат *.bmp, как наиболее простой с точки зрения реализации. При создании приложения нет ограничений на использование оперативной памяти, размера программы, дизайна и набора цветов палитры. Для упрощения работы с программой, в нее будет встроена «Справка».

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Введение

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

Компьютерную графику можно  разделить на три категории:

1. растровая графика,
2. векторная графика,
3. трёхмерная графика.

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

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

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

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

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

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

Кнопки для  рисования графических примитивов находятся на панели инструментов, которая обычно размещается вертикально, вдоль левого края окна графического редактора . Для рисования выбранного объекта необходимо щелкнуть на кнопке с его изображением на панели инструментов и переместить указатель мыши в поле рисования, где он примет форму крестика. Затем щелчками в поле рисования требуется зафиксировать положения опорных точек рисуемого объекта.

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Создание простого редактора  растровой графики

 

Принципы построения интерфейса

В связи с  выбранной средой разработки принципы работы интерфейса обладают следующими особенностями:

1. Палитра цветов представляет собой единый объект типа Image, закрашенный различными цветами.
2. Выбор цветов организован с помощью обработчика событий MouseDown, то есть изменения цвета происходят при нажатии кнопки мыши на палитре. Реализована возможность выбора как основного (левая кнопка мыши), так и фонового цвета (правая кнопка мыши).
3. Все инструментальные кнопки – объекты типа SpeedButton. При нажатии происходит только запоминание этого факта, никаких специальных действий не производится. С помощью свойств этих объектов была организована возможность нажатия только одной кнопки в один момент времени, при этом изображение кнопки как бы «вдавливается».
4. При наведении мыши на любую из кнопок, появляется всплывающая подсказка, являющаяся стандартным свойством Hint.
5. Холст для рисования также является объектом типа Image. Весь процесс рисования реализован внутри трех обработчиков событий: MouseDown (нажатие кнопки мыши), MouseMove (движение мыши по области холста), MouseUp (отпускание кнопки мыши).
6. Главное меню программы является стандартным объектом MainMenu, настроенным под нужды моего приложения.
7. Команды «Открыть» и «Сохранить» используют объекты типа OpenPictureDialog и SavePictureDialog соответственно.
8. Работа с буфером обмена основана на использовании объекта ClipBoard, что позволяет реализовать такие операции, как вырезание, копирование и вставка.
9. При выборе команд «Справка», либо «О программе» открываются соответственно вторая и третья дополнительные формы (они просто становятся видимыми).
10. При рисовании некоторых примитивов заметно мерцание рабочей области. Это связано с использованием особого метода рисования pmNotXor.
11. Для всех команд главного меню назначены горячие клавиши.

 

Принципы построения графических  примитивов

1. «Карандаш» – построение линии, повторяющей движение мыши по холсту. Для реализации данного инструмента необходимо знать координаты положения курсора, цвет рисования и какая из кнопок мыши нажата в данный момент. Если линию рисовать попиксельно, то она будет прерывистой, и чем быстрей пользователь будет двигать мышью, тем разреженность точек прямой будет больше. Чтобы этого избежать, линию будем рисовать с помощью оператора Line, то есть будем соединять передаваемые в обработчик события MouseMove координаты точек прямой линией. Теперь чем быстрей будем двигать мышь, тем больше будет погрешность в изображении линии, но зато она будет сплошной. Реализация этого инструмента изображена в листинге 1:

 

// Обработчик MouseDown

    Image3->Canvas->MoveTo(X,Y);

    if (Button==mbLeft)

    Image3->Canvas->Pen->Color = Image1->Canvas->Brush->Color;

    else Image3->Canvas->Pen->Color = Image2->Canvas->Brush->Color;

//Обработчик MouseMove

Image3->Canvas->LineTo(X,Y);

 

Листинг 1. Инструмент «Карандаш»

 

2. «Линия» – построение линии схоже с предыдущим инструментом, но здесь передаются координаты только начала и конца линии, причем «начало» запоминается в обработчике MouseDown, а конец – в MouseUp. Но помимо этого необходимо реализовать динамическое изменение размеров и направления линии, стирая все «отрисованные» ранее в процессе движения мыши линии. Для этого «временные линии» рисуются в функции MouseMove методом pmNotXor – исключающее ИЛИ. При использовании такого метода цвет пикселя образуется после применения операции NotXor к битовым значениям цвета холста и цвета инструмента. То есть сначала линия рисуется выбранным цветом, если затем нарисовать ее снова по тем же координатам, то она станет цветом фона, то есть сотрется. Рисовать линию можно основным цветом, либо цветом фона в зависимости от нажатой кнопки мыши, также как и в инструменте «Карандаш». Реализация этого инструмента изображена в листинге 2:

 

// Обработчик MouseDown

  {

   X1 = X;

   Y1 = Y;

   Image3->Canvas->Pen->Mode = pmNotXor;

   if (Button==mbLeft)

    Image3->Canvas->Pen->Color = Image1->Canvas->Brush->Color;

    else Image3->Canvas->Pen->Color = Image2->Canvas->Brush->Color;

  }

/ /Обработчик MouseMove

{

// стирание старой линии

  Image3->Canvas->MoveTo(X0,Y0);

  Image3->Canvas->LineTo(X1,Y1);

// рисование новой линии

  Image3->Canvas->MoveTo(X0,Y0);

  Image3->Canvas->LineTo(X,Y);

// запоминание новых координат  конца линии

  X1 = X;

  Y1 = Y;

}

//Обработчик MouseUp

{

Image3->Canvas->MoveTo(X0,Y0);

Image3->Canvas->LineTo(X1,Y1);

Image3->Canvas->Pen->Mode = pmCopy;

Image3->Canvas->MoveTo(X0,Y0);

Image3->Canvas->LineTo(X,Y);}

 

Листинг 2. Инструмент «Линия»

 

3. «Прямоугольное выделение» - рисование прямоугольной рамки, обозначающей границы выделяемого фрагмента изображения. После выделения становятся доступными пункты меню «Правка»: «Вырезать» и «Копировать». Для реализации данного инструмента сначала необходимо изобразить саму прямоугольную рамку, динамически изменяющую размеры вслед за движением мыши. Для этого используется стандартный объект типа Rect. В него можно передавать координаты левой, правой, верхней и нижней границы прямоугольника. При нажатии на холсте, старое изображение рамки стирается путем рисования ее же, по тем же координатам методом DrawFocusRect, свойства которого аналогичны методу pmNotXor. Далее рисуется прямоугольник длиной и шириной в один пиксель, а также значение логических переменных «начало выделения» и «начало перетаскивания» устанавливается в true. Это необходимо для дальнейшей работы. Затем все изображение сохраняется в переменную типа BitMap для восстановления изображения после перетаскивания фрагмента. В обработчике событий MouseMove сначало проверяется, не нажата ли клавиша Ctrl. Если да, то выделенный фрагмент копируется методом CopyRect, если нет, то на его месте рисуется белый прямоугольник методом FillRect. В событии MouseDown восстанавливаются первоначальные значения логических переменных. Реализация этого инструмента изображена в листинге 3:

 

// Обработчик MouseDown

    if (REnd)

// стирание прежней рамки

    {

    Image3->Canvas->DrawFocusRect(R);

    if ((X < R.Right) && (X > R.Left) && (Y > R.Top) && (Y < R.Bottom))

// начало перетаскивания  фрагмента

    {

// установка флагов

      RDrag = true;

      REnd = false;

// запоминание начального  положения фрагмента

      R0 = R;

// запоминание изображения

      BitMap->Assign(Image3->Picture);

// цвет кисти

      Image3->Canvas->Brush->Color = clWhite;

// недоступность пунктов  меню

      ImCopy->Enabled = false;

      ImCut->Enabled = false;

    }

    }

    else

// начало рисования рамки  фрагмента

    {

      RBegin = true;

      REnd = false;

      R.Top = X;

      R.Bottom = X;

      R.Left = Y;

      R.Right = Y;

      Image3->Canvas->DrawFocusRect(R);

     }

//Обработчик MouseMove

if (RBegin)

   {

// Рисование рамки фрагмента

    Image3->Canvas->DrawFocusRect(R);

    if (X0 < X) { R.Left = X0; R.Right = X; }

    else { R.Left = X; R.Right = X0; }

    if (Y0 < Y) { R.Top = Y0; R.Bottom = Y; }

    else { R.Top = Y; R.Bottom = Y0; }

    Image3->Canvas->DrawFocusRect(R);

   }

// Перетаскивание фрагмента

else if (PSelect->Down)

  {   

// восстановление изображения  под перетаскиваемым фрагментом

   Image3->Canvas->CopyRect(R,BitMap->Canvas,R);

// если не нажата клавиша  Ctrl - стирание изображения в R0

   if (! Shift.Contains(ssCtrl))

    Image3->Canvas->FillRect(R0);

// формирование нового  положения фрагмента

   R.Left = R.Left + X - X0;

   R.Right = R.Right + X - X0;

   R.Top = R.Top + Y - Y0;

   R.Bottom = R.Bottom + Y - Y0;

// запоминание положения  курсора мыши

   X0 = X;

   Y0 = Y;

// рисование фрагмента  в новом положении

   Image3->Canvas->CopyRect(R,BitMap->Canvas,R0);

// рисование рамки

   Image3->Canvas->DrawFocusRect(R);  }

 

Листинг 3. Инструмент «Прямоугольное выделение»

 

4. «Прямоугольник» - реализация этого инструмента практически не отличается от предыдущего, за исключением того, что не производится перерисовки фрагмента изображения в новом месте, а происходит только рисование прямоугольника методом DrawFocusRect для обеспечения стирания, рисуемых в процессе движения мыши, изображений прямоугольника (см. инструмент «Линия»).
5. «Закрашенный прямоугольник» - рисование происходит также как и пункте 4, но используется другой метод – Rectangle. Он заполняет область прямоугольника цветом фона.
6. «Ластик» - этот инструмент реализован также как «Закрашенный прямоугольник», но закрашивается он всегда белым цветом, вне зависимости от установок фона. Размер «ластика» 6х6 пикселей.
7. «Определитель цвета» - действует также как и стандартный выбор цвета на палитре. То есть определяется цвет пикселя под указателем мыши и затем закрашивается образец основного или фонового цвета в зависимости от нажатой кнопки мыши. Реализация этого инструмента изображена в листинге 4:

 

// Обработчик MouseDown

{

  if(Button == mbLeft)

  {

// основной цвет

    Image1->Canvas->Brush->Color = ((TImage *)Sender)->Canvas->Pixels[X][Y];

    Image1->Canvas->FillRect(Rect(0,0,Image1->Width,Image1->Height));

  }

  else

  {

// вспомогательный цвет

    Image2->Canvas->Brush->Color = ((TImage *)Sender)->Canvas->Pixels[X][Y];

    Image2->Canvas->FillRect(Rect(0,0,Image2->Width,Image2->Height));

  }

 

Листинг 4. Инструмент «Определитель цвета»

 

8. «Заливка» - для реализации этого инструмента используется метод FloodFill, который закрашивает все пиксели вокруг заданного до тех пор, пока не встретит пиксель, цвет которого отличается от цвета первоначально указанного пикселя, то есть до какой-либо границы во все стороны. Реализация этого инструмента изображена в листинге 5:

 

// Обработчик MouseDown

  { 

   if (Button==mbLeft)

    Image3->Canvas->Brush->Color = Image1->Canvas->Brush->Color;

   else Image3->Canvas->Brush->Color = Image2->Canvas->Brush->Color;

   Image3->Canvas->FloodFill(X,Y,Image3->Canvas->Pixels[X][Y],fsSurface);}

 

Листинг 5. Инструмент «Заливка».

Описание программного продукта

 

Программно-аппаратные требования

Для работы данного приложения подойдет любая современная конфигурация компьютера с операционной системой Windows XP и выше. Также для запуска программы необходима библиотека vcl60.bpl, которая поставляется вместе с программным пакетом C++ Builder 6.0 либо скачивается отдельно. Эту библиотеку необходимо поместить в директорию C://Windows//system32.

Язык программирования

Для создания приложения была выбрана  среда C++ Builder 6.0, так как использование объектно-ориентированного подхода облегчило создание графического интерфейса программы.

Входные и выходные данные

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

Структура программы

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

Инструкция пользователю

Данная программа  представляет собой средство для  рисования простых или сложных  рисунков. Эти рисунки можно делать черно-белыми или цветными и сохранять  их в виде файлов. Для того чтобы  запустить программу нужно открыть  файл Kyrsovik.exe в результате на экране появится следующее окно (рис. 1):

Рисунок 1. Окно графического редактора

Состоящее из:

-рабочей области

-ниспадающего меню 

-панели инструментов

Рабочая область 

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

Ниспадающее меню

Состоит из трёх вкладок («Файл», «Правка», «Помощь»).

Во вкладке  «Файл» расположены следующие пункты:

• «Открыть» (при выборе этого пункта на экране пользователя появляется диалоговое окно позволяющее открыть графический файл (рис. 2.))

Рисунок 2. Диалоговое окно «Открыть»

• «Сохранить» (при выборе этого пункта на экране пользователя появляется диалоговое окно, которое позволяет выбрать пользователю имя и место сохранения графического файла (рис.3)).

Рисунок 3. Диалоговое окно «Сохранить»

 

• «Выход» (при выборе этого пункта программа завершает свою работу).

Вкладка «Правка» содержит пункты:

• «Отменить изменения» (отменяет все действия совершенные каким-либо инструментом)
• «Очистить» (очищает весь холст)
• «Вырезать» (занесение выделенного фрагмента изображения в буфер обмена, на его месте рисуется белый прямоугольник).
• «Копировать» (копирование выделенного фрагмента изображения в буфер обмена)
• «Вставить» (вставка из буфера обмена предварительно сохраненного там изображения в левый верхний угол холста)

Команды «Вырезать» и «Копировать» недоступны до момента выделения  какого либо фрагмента инструментом «Прямоугольное выделение».

Вкладка «Помощь» содержит два пункта:

• «Помощь» (здесь содержится основная информация об инструментах)
• «О программе» (здесь содержится информация об авторе программы и целях ее разработки)

Панель инструментов

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

Панель инструментов содержит следующие кнопки (каждая содержит всплывающую подсказку):

• Карандаш – рисует линию, повторяющую движения мыши. Для рисования следует нажать и удерживать нажатой левую или правую кнопку мыши в зависимости от того каким цветом вы хотите рисовать – основным или цветом фона.
• Линия – рисует прямую линию. Для этого следует в какой-либо части рабочей области нажать на левую или правую кнопку мыши и не отпуская протянуть мышь. По мере изменения положения курсора вы будете наблюдать изменение линии. После того как кнопка мыши будет отпущена вы увидите окончательный вариант линии.
• Ластик – стирает изображение белым цветом. Для стирания перетащите указатель по области, которую требуется очистить. При необходимости стереть весь рисунок нажмите на команду «Очистить» из меню «Правка».
• Прямоугольное выделение – выделяет часть изображения прямоугольной рамкой для дальнейших действий. Для выделения нажмите кнопку мыши в любом месте холста, перетащите указатель по диагонали в нужном направлении до точки, где должен располагаться один из углов прямоугольника (левый верхний либо правый нижний).
• Прямоугольник – рисует прямоугольник. Принцип рисования такой же, как и в предыдущем пункте.
• Закрашенный прямоугольник – рисует прямоугольник, границы которого изображены основным цветом, а закрашен он цветом фона. Принцип рисования такой же, как и в предыдущем пункте, но предварительно необходимо выбрать нужные вам цвета в палитре.
• Определитель цвета – используется для назначения основного или фонового цвета. Для этого необходимо нажать левой кнопкой (основной цвет), либо правой кнопкой (цвет фона) на том месте изображения, цвет которого необходимо определить.
• Заливка – закрашивает часть изображения выбранным цветом до ближайших границ. Если текущий основной цвет или цвет фона требуется сменить, щелкните нужный цвет на палитре правой или левой кнопкой мыши. Затем щелкните левой или правой кнопкой мыши область или объект, который требуется залить. Если граница фигуры не является непрерывной, выбранным цветом будут залиты другие области рисунка.

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

 

Заключение

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

 

Библиографический список

 

1. http://www.eruditus.name/teorija/graf_redaktori.html
2. http://priklad290660.narod.ru/graf.htm
3. http://www.5byte.ru/8/0019.php
4. Архангельский А.Я. «Программирование в C++ Builder 6.0», Москва, Бином, 2010г.

ТАГАНРОГ

2010