ПОСТАНОВКА ЗАДАЧИ, Средства разработки, ПРОЭКТИРОВАНИЕ, Разработка алгоритма - Основные типы графических редакторов

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

пример работы

Рисунок 1.1. - Пример работы

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

Средства разработки

Задача решена с помощью алгоритма, реализованного в среде Borland Developer Studio 2006 и на языке программирования С++.

ПРОЭКТИРОВАНИЕ
Разработка алгоритма

Разработка алгоритма происходила в два этапа. Это создание "каркаса" программы и расширение возможностей.

На первом этапе необходимо определить, как будет рисоваться линия. Для этого в автоматически созданной форме Form1 создаем два объекта: Image и PaintBox. В свойствах Image1 указываем растягивание на всю форму. Расположение PaintBox1 не принципиально, оно будет меняться в процессе работы программы соответственно расположению курсора мыши. В Image1 указываем три события:

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

PaintBox1->Left=X;

PaintBox1->Top=Y;

PaintBox1->Width=0;

PaintBox1->Height=0;

При движении мыши (OnMouseMove) меняем ширину и высоту PaintBox1 соответственно указателю мыши, рисуем линию по координатам верхнего левого и нижнего правого угла PaintBox1, одновременно с этим выводим рисуемую линию на экран:

PaintBox1->Width=X-PaintBox1->Left;

PaintBox1->Height=Y-PaintBox1->Top;

Application->ProcessMessages();

PaintBox1->Canvas->MoveTo(0,0);

PaintBox1->Canvas->LineTo(X-PaintBox1->Left, Y-PaintBox1->Top);

При отпускании кнопки мыши (OnMouseUp) записываем линию в Image1 по координатам верхнего левого и нижнего правого угла PaintBox1 с учетом разницы координат между PaintBox1 и Image1:

Image1->Canvas->MoveTo(PaintBox1->Left, PaintBox1->Top);

Image1->Canvas->LineTo(PaintBox1->Left+PaintBox1->Width,

PaintBox1->Top+PaintBox1->Height);

В данном виде программа имеет недостаток, линия выводится на экран не только, когда пользователь держит кнопку мыши нажатой, но и в остальное время (из последней использовавшейся координаты при событии Image1MouseDown). Для избавления от данного недостатка добавим логическую переменную bool F, которая будет изменяться в соответствии с действием пользователя. Таким образом, что при нажатии кнопки мыши F=true, а при отпускании F=falce и используем оператор if-else включения отображения рисуемой линии при нажатой кнопки мыши и исключения рисования лини после отпускания.

"Каркас" Программы закончен, программа запускается, в ней можно рисовать линии. Окно программы показано на рисунке 2.1.1.:

основа программы

Рисунок 2.1.1 - Основа программы

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

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

На Panel1 выведем Image1 и PaintBox1. После расположения Image1 и PaintBox1 на Panel1 случился сдвиг координат PaintBox1 на 1 вниз и вправо. Внесем поправки в отображение линии:

PaintBox1->Canvas->MoveTo(1,1);

PaintBox1->Canvas->LineTo(X+1-PaintBox1->Left, Y+1-PaintBox1->Top);

Так же необходимо задать команду, выполняющуюся при открытии программы - заливка полотна белым цветом. Иначе цвет полотна будет таким же, как и у Form1 - серым:

Image1->Canvas->FloodFill(0,0,RGB(255,255,255), fsSurface);

На Panel2 расположим элементы управления, такие как: кнопки изменения цветов (Shape), селектор выбора толщины линии (TCSpinEdit), , кнопку очистки полона (Button1) и меню (MainMenu) с сохранением и открытием файла. И настроим их внешний вид.

На рисунке 2.1.2. видно, как стала выглядеть программа:

будущий внешний вид

Рисунок 2.1.2 - Будущий внешний вид

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

За Shape1-Shape8 закрепим изменение цвета линии по нажатию в соответствии с цветом самих компонентов:

Image1->Canvas->Pen->Color=RGB(255,255,255);

PaintBox1->Canvas->Pen->Color=RGB(255,255,255);

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

Дальше закрепим за TCSpinEdit1 выбор толщины линии:

Image1->Canvas->Pen->Width=StrToInt(CSpinEdit1->Text);

PaintBox1->Canvas->Pen->Width=StrToInt(CSpinEdit1->Text);

Так же этот код надо выполнить при старте программы, для синхронизации значений толщины линии выбранным по умолчанию (5) в CSpinEdit1 и толщиной линии, выставляемой по умолчанию (1) в Image1 и PainpBox1.

Кнопке "Очистить" задаем такой код:

TRect r;

R. left=Image1->Left-1;

R. right=Image1->Width;

R. bottom=Image1->Height;

R. top=Image1->Top-1;

Image1->Canvas->Brush->Color=RGB(255,255,255);

Image1->Canvas->FillRect(r);

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

Дальше программируем диалоговые окна сохранения и загрузки изображения:

If (SaveDialog1->Execute())

{

Image1->Picture->SaveToFile(SaveDialog1->FileName );

}

If (OpenPictureDialog1->Execute())

{

Image1->Picture->LoadFromFile(OpenPictureDialog1->FileName );

}

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

StatusBar1->SimpleText=

"Положение мыши: X [ "+IntToStr(X)+" ] Y [ "+IntToStr(Y)+" ] "+

"Цвет: R"+IntToStr(GetRValue(ColorToRGB(Image1->Canvas->Pen->Color)))+

"G"+IntToStr(GetGValue(ColorToRGB(Image1->Canvas->Pen->Color)))+

"B"+IntToStr(GetBValue(ColorToRGB(Image1->Canvas->Pen->Color)));

Программа готова

Похожие статьи




ПОСТАНОВКА ЗАДАЧИ, Средства разработки, ПРОЭКТИРОВАНИЕ, Разработка алгоритма - Основные типы графических редакторов

Предыдущая | Следующая