Рафический редактор

Пример построения собственного простого графического редактора

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

1. Начните новое приложение.

2. Перенесите на форму два компонента типа Tlmage и расположите их в нижней левой части формы, придав квадратную форму, например, размером 20 на 20. Это будут окна основного и вспомогательного цветов. Имена этих компонентов будут Imagel и Image2. (рис. 11)

Рисунок 11. Графический редактор, работа с изображением, загруженным из файла #' Г

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

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

5. Перенесите на форму кнопку типа TSpeedButton и расположите ее в верхнем левом углу формы. Эта кнопка будет соответствовать кисти — типичному ин­струменту графических редакторов. Назовите ее SBBrush. Установите у кноп­ки свойство Grouplndex равным 1 и свойство AllowAHUp в true. Эти свойства обеспечат кнопке возможность фиксироваться в нажатом и не нажатом состоя­нии. Желательно загрузить в свойство Glyph пиктограмму кисти (файл..\lma-ges\Buttons\brush.bmp).

6. Перенесите на форму еще одну кнопку типа TSpeedButton и расположите ее ниже SBBrush. Эта кнопка будет соответствовать указателю цвета пикселя ри­сунка. Назовите ее SBColor. Установите у этой кнопки, как и у предыдущей, свойство Grouplndex равным 1 (это обеспечит, что только одна из кнопок SBBrush или SBColor может быть нажата) и свойство AllowAllUp в true. Же­лательно загрузить в свойство Glyph пиктограмму (например файл..\lmages\ Buttons\one2one.bmp).

7. Перенесите на форму диалог OpenPictureDialog.

8. Перенесите на форму главное меню MainMenu. В меню задайте раздел Файл с подразделом Открыть. Назовите этот подраздел МОреп. Задайте еще один раз­дел — Правка с подразделом Отменить. Назовите этот подраздел Undo.

Теперь размещение компонентов закончено и можно писать обработчики со­бытий. Начнем со второстепенных обработчиков.

9. В раздел implementation включите объявление переменной

var BitMap:TBitMap;

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

10. Для события OnCreate формы напишите обработчик вида:

procedure TForml.FormCreate(Sender: TObject); var HW, i: integer; begin BitMap:=TBitMap.Create;

//задание свойств кисти основного и вспомогательного цветов

Imagel.Canvas.Brush.Color:= clBlack;

Image2.Canvas.Brush.Color:= clwhite; // заполнение окон основного и вспомогательного цветов

with Imagel.Canvas do FillRect(Rect(0,0,Width,Height));

with Image2.Canvas do FillRect(Rect(0,0,Width, Height)); // задание ширины элемента палитры цветов

HW:=Image4.Width div 10; // закраска элементов палитры цветов

with Image4.Canvas do for i:=l to 10 do begin case i of

1: Brush.Color:= clBlack;

2: Brush.Color:= с1Aqua;

3: Brush.Color:= clBlue;

4: Brush.Color:= clFuchsia;

5: Brush.Color:= clGreen;

6: Brush.Color:= clLime;

7: Brush.Color:= clMaroon;

8: Brush.Color:= clRed;

9: Brush.Color:= clYellow;

10: Brush.Color:= clWhite;

end;

Rectangle((i-1)*HW, 0, i*HW, Height); end; -

// рисование креста на холсте - только для тестирования with Image3 do begin Canvas.MoveTo(0,0); Canvas.LineTo(Width,Height);, Canvas.MoveTo(0,Height); Canvas.LineTo(Width,0); end;

BitMap.Assign(Image3.Picture); end;

Обработчик длинный, но смысл его достаточно прост.

Сначала создается объект BitMap, в котором будет храниться первоначальное изображение. Затем задаются свойства кисти окон основного (Imagel) и вспомогательного (Image2) цветов: черный и белый. Окна заливаются соответствующим цветом с помощью функции FillRect. После этого формируется палитра цветов!! для каждого элемента палитры задается свой цвет и элемент заполняется этим! цветом с помощью функции Rectangle.

11. В обработчик события формы OnDestroy запишите оператор

BitMap.Free;

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

12. Для подраздела меню Открыть в обработчик включите операторы:

if OpenPictureDialogl.Execute then begin

ImageS.Picture.LoadFromFile(OpenPictureDialogl.File Name); BitMap.Assign(ImageS.Picture);

end;

Эти операторы загружают в компонент ImageS файл изображения, который пользователь выбирает в диалоге, и запоминают изображение в BitMap.

13. Для подраздела меню Отменить в обработчик включите оператор:

Image3.Picture.Assign(BitMap);

Этот оператор восстанавливает на холсте изображение, сохраненное в BitMap.

14. В обработчик события OnClick кнопок SBBrush и SBColor запишите оператор

if (Sender as TSpeedButton).Down

then BitMap.Assign(Image3.Picture);

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

15. В обработчик события OnMouseDown компонентов Image3 и Image4 вставьте код:

if (Sender = Image4) or SBColor.Down then // режим установки основного и вспомогательного цветов begin if(Button=mbLeft)

then with Imagel.Canvas do begin // установка основного цвета

Brush.Color:=(Sender as TImage).Canvas.Pixels[X,Y]; FillRect(Rect(0,0,Width,Height)); end

else with Image2.Canvas do begin //установка вспомогательного цвета

Brush.Color:= (Sender as TImage).Canvas.Pixels[X,Y]; FillRect(Rect(0,0,Width,Height)); end; end

else if SBBrush.Down then with Image3.Canvas do begin // режим закраски указанной области холста if Button = mbLeft

then Brush.Color:= Imagel.Canvas.Brush.Color else Brush.Color:= Image2.Canvas.-Brush.Color; FloodFill(X, Y, Pixels[X,Y], fsSurface); end;

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

Если кнопка мыши нажата на холсте Image3 и при этом кнопка SBBrush утоплена, то приложение находится в режиме закраски указанной области рисун­ка. В этом случае в зависимости от нажатой кнопки мыши выбирается основной или вспомогательный цвет и функцией FloodFill производится закраска области, координаты внутренней точки которой указаны курсором мыши, а цвет — цветом пикселя, на который указывает мышь.

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

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

Теперь вы можете загрузить командой Файл | Открыть вашего приложения какое-то изображение. Вы можете попробовать перекрашивать те или иные области изображения. Например, можете изменить цвет фона, выделить какую-то сплошную область рисунка одного цвета и т.п.

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

Дата добавления: 2015-03-29