Урок 12. Графические методы и процедуры

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

Работа с графикой в Lasarus предполагает обращение к свойству Canvas компонентов, на которых вы хотите выводить изображение. Для программиста Canvas – это холст, который дает доступ к каждому пикселю.

При работе с графикой у вас в распоряжении находятся холст (свойство Canvas того компонента,  на котором мы собираемся рисовать), кисть (свойство Brush объекта Canvas), перо (свойство Pen объекта Canvas). Кроме того,  в нашем распоряжении будут и графические методы объекта Convas, которые позволяют рисовать не только пикселями, но и с помощью графических примитивов, что существенно упрощает работу с графикой в Lasarus.

Свойства объекта Pen (Перо)

Свойство	Описание
Color	Цвет линии
Width	Толщина линии(задается в пикселах)
Style	Стиль пера. Задается следующими именованными константами:

Свойства объекта Brush (Кисть)

Основные свойства класса TFont

Константы TColor

Свойства  объекта Canvas

Графические методы объекта Canvas

Вычерчивание графических примитивов на графической поверхности, например компонента Image (Вкладка Additional), выполняют соответствующие методы класса TCanvas.

Инструкция, обеспечивающая вычерчивание графического элемента на поверхности компонента , в общем виде выглядит так:

Объект.Canvas.Метод(Параметры);

Объект  — это объект, на поверхности которого нужно нарисовать графический элемент. В качестве объекта можно указать компонент Image.

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

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

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

Image1.Canvas.Rectangle(10,20,60,40);

в поле компонента  Image1 будет нарисован прямоугольник шириной 50 и высотой 20 пикселей, левый верхний угол которого будет находиться в точке(10,20).

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

Image1.Canvas.Brush.Color := clGreen;

Image1.Canvas.Rectangle(20, 20, 46, 70);

Можно написать вот так:

With Image1.Canvas do

Begin

Brush.Color := clGreen;

Rectangle(20, 20, 46, 70);

End;

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

Для создания простейшей программы для рисования нам потребуются

следующие основные компоненты: TImage, TPanel, TColorDialog, TButton.
Ход выполнения проекта

1. Для начала разместите на форме данные компоненты примерно в таком виде:

2. В инспекторе объектов выберите компонент Panel1 и установите значение bnLowered для свойства BevelOuter

Привяжите Image1 к Panel1, переместив его на Panel1 в инспекторе объектов.

При этом Panel1 должна быть немного больше чем Image1

3. Откройте вкладку “события” для Image1 в инспекторе объектов, найдите вкладки OnMouseDown и OnMouseMove, нажмите кнопки “…” напротив них, чтобы получились данные строки:

Проделайте ту же операцию с событием OnCreate для Form1

4. Теперь, в редакторе исходного кода найдите строку

procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);

Вписываем данный код. Он нужен для установки позиции пера

procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton; 
Shift: TShiftState; X, Y: Integer);
begin
   Image1.Canvas.MoveTo(x,y);
end;

5. Далее, найдите строку

procedure TForm1.Image1MouseMove(Sender: TObject; Shift: TShiftState;X,Y: integer);

Впишите в эту процедуру данный код

procedure TForm1.Image1MouseMove(Sender: TObject; Shift: TShiftState;X,Y: integer);
begin
   if ssLeft in shift then image1.Canvas.LineTo(x,y);
end;

Таким образом, будет рисоваться линия, если нажата левая кнопка мыши

6. После этого необходимо реализовать выбор цвета с помощью второй панели.

Для этого щелкните 2 раза по второй панели и в редакторе исходного кода

Пропишите данные строки

procedure TForm1.Panel2Click(Sender: TObject);
begin
   //Устанавливаем цвет в диалоге "Цвет",
   //согласно цвету пера
   ColorDialog1.Color:=Image1.Canvas.Pen.Color;
   //Если цвет в диалоге "Цвет" выбран,
   //то присваиваем его перу и закрашиваем этим цветом панель
   If ColorDialog1.Execute then
      begin
      Panel2.Color:=ColorDialog1.Color;
      Image1.Canvas.Pen.Color:=ColorDialog1.Color;
      end;
end;

7. Далее мы реализуем кнопку “Фон”. 2 раза щелкните по Button1 и впишите код:

procedure TForm1.Button1Click(Sender: TObject);
begin
   //Устанавливаем цвет в диалоге "Цвет",
   //Согласно цвету кисти
   ColorDialog1.Color:=Image1.Canvas.Brush.Color;
   //Если цвет в диалоге "Цвет" выбран,
   //то присваиваем его кисти
   //и закрашиваем канву выбранным в диалоге цветом
   if ColorDialog1.Execute then
      begin
      Image1.Canvas.Brush.Color:=ColorDialog1.Color;
      Image1.Canvas.Fillrect(Image1.Canvas.ClipRect);
     end;
end;

8. Вторую кнопку мы используем для функции очищения изображения

procedure TForm1.Button2Click(Sender: TObject);
begin
   //Закрашиваем канву белым цветом
   Image1.Canvas.FillRect(Image1.Canvas.ClipRect);
end;

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

procedure TForm1.FormCreate(Sender: TObject);
begin
   Image1.Canvas.FillRect(Image1.Canvas.ClipRect);
end;

9. Теперь, переходим к завершающему этапу программы – оформлению.

Установите данные значения в инспекторе объектов:

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

Оруджов Эльвин, ученик 10 «А» класса СОШ №23,  город Экибастуз.