Классы TPen и TBrush, или Красиво жить не запретишь!

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

Задачи урока

  • Работа с компонентом Image.
  • Работа со свойствами Pen и Brush.
  • Способ очистки канвы.
  • Сохранение содержимого канвы в формате BMP.
  • Выбор формы курсора для компонентов.

Выполнение упражнения

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

Рисунок 1. Окно приложения

1. Дизайн приложения

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

 а)  б)

Рисунок 2

Для чего нам эти компоненты?

  • Image — компонент, в котором мы будем рисовать.
  • Panel — будет отображать цвет пера.
  • Кнопка «Очистка» — кнопка очистки изображения.
  • Кнопка «Сохранить» — кнопка сохранения изображения.

2. Измените имена компонентов следующим образом:

Имя, которое было

Имя, на которое

необходимо изменить

Почему мы так сделали?

Button1 (Очистка)

ButtonClear Кнопка очистки канвы. Clear — означает очистка
Button2 (Сохранить) ButtonSave Кнопка сохранения содержимого канвы. Save — означает сохранить
ColorDialog1 ColorDialog Просто убрали цифру «1»
Image1 ImageOut Out — означает вывод чего-либо. В нашем случае изображения
Label1 LabelPen Pen — это перо
Panel1 PanelPen Панель для отображения цвета пера

 

2. Рисование на компоненте Image

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

1. Создайте обработчик события OnMouseDown для компонента Image и запишите в нём следующий код:

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

  if Button = mbLeft then imageOut.Canvas.MoveTo( x,y );

end;
Листинг 1

2. Создайте обработчик события OnMouseMove для компонента Image и запишите в нём следующий код:

procedure TForm1.ImageOutMouseMove(Sender: TObject; Shift: TShiftState; X,  Y: Integer);
begin

  if ssLeft in Shift Then ImageOut.Canvas.LineTo( x,y );

end;
Листинг 2

Код листингов 1 и 2 полностью аналогичен тому, что мы писали для формы в предыдущем уроке. Только здесь в качестве холста для рисования выступает компонент Image.

3. Запустите проект. Вы увидите, что полученная программа во многом напоминает ту, что была сделана в предыдущем упражнении, за тем исключением, что рисовать можно не на всей форме, а только на ограниченном участке (компоненте Image). Проблема состоит в том, что изначально не видно, где можно рисовать, а где — нет.

3. Очистка рисунка

1. Создайте обработчик события OnCreate для формы и запишите в нём следующий код:

procedure TForm1.FormCreate(Sender: TObject);
begin

  ImageOut.Canvas.FillRect( ImageOut.Canvas.ClipRect );

end;
Листинг 3

Этот код означает, что при создании формы канва компонента Image будет закрашиваться белым цветом.

FillRect — это метод канвы для рисования закрашенного прямоугольника.

ClipRect — это свойство канвы, содержащее размеры её клиентской области.

2. Создайте обработчик события OnClick для кнопки ButtonClear и запишите в нём следующий код:

procedure TForm1.ButtonClearClick(Sender: TObject);
begin

  // Устанавливаем цвет в диалоге "Цвет" согласно цвету кисти
  ColorDialog.Color := ImageOut.Canvas.Brush.Color;

  // Если цвет в диалоге "Цвет" выбран, то присваиваем его кисти
  // и закрашиваем им канву
  If ColorDialog.Execute then begin
    ImageOut.Canvas.Brush.Color := ColorDialog.Color;
    ImageOut.Canvas.FillRect( ImageOut.Canvas.ClipRect );
  end;

end;
Листинг 4

Этот код означает, что при нажатии на кнопку ButtonClear канва компонента Image будет закрашиваться тем цветом, который выбран пользователем в диалоге «Цвет».

3. Запустите программу и протестируйте очистку.

4. Выбор цвета пера

1. Теперь сделаем возможность выбора цвета пера для рисования. Для этого нужно, чтобы на форме присутствовала область, отображающая текущий цвет рисования, а при нажатии на неё появлялся диалог выбора цвета. Такую область мы уже поместили — это панель (PanelPen). Создайте обработчик события OnClick для панели PanelPen и запишите в нём следующий код:

procedure TForm1.PanelPenClick(Sender: TObject);
begin

  // Устанавливаем цвет в диалоге "Цвет" согласно цвету пера
  ColorDialog.Color := ImageOut.Canvas.Pen.Color;

  // Если цвет в диалоге "Цвет" выбран, то присваиваем его перу
  // и закрашиваем этим цветом панель
  If ColorDialog.Execute then begin
    PanelPen.Color            := ColorDialog.Color;
    ImageOut.Canvas.Pen.Color := ColorDialog.Color;
  end;

end;
Листинг 5

Что делают строки кода, понятно из комментариев.

2. Запустите программу и протестируйте новые возможности по выбору цвета пера. Теперь вы можете создавать цветные рисунки!

5. Сохранение на диск содержимого компонента Image

1. Для сохранения содержимого канвы компонента Image необходимо обратиться к свойству Picture класса TPicture, который предназначен для работы с картинками некоторых форматов, в том числе и BMP.

Создайте обработчик события OnClick для кнопки ButtonSave и запишите в нём следующий код:

procedure TForm1.ButtonSaveClick(Sender: TObject);
begin

  // Сохраняем рисунок в каталог, где находится проект
  ImageOut.Picture.SaveToFile('Рисунок.bmp');

end;
Листинг 6

2. Запустите программу, нарисуйте в ней что-либо и нажмите на кнопку «Сохранить». В результате в папке с проектом должен появиться файл рисунка «Рисунок.bmp».

6. Изменение формы курсора

Не очень удобно рисовать стандартным курсором мыши. В среде Delphi визуальному компоненту можно назначить любой курсор, установленный в Windows. За вид курсора отвечает свойство Cursor (рисунок 3а).

1. Выберите для компонента ImageOut курсор crCross (перекрестие), а для компонента Panel — crHandPoint (показывать пальцем).

 а)  б) в)

Рисунок 3

Результат работы приложения с использованием новых курсоров показан на рисунке 3б и 3в.

2. Запустите программу. Теперь она полностью готова к использованию.

7. Коротко о главном

Компонент Image специально предназначен для вывода графики.

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

Свойство Pen (класса TPen) служит для задания типа пера, а Brush (класса TBrush) — для задания типа кисти (для закраски замкнутых областей).

Содержимое канвы, компонента Image, можно сохранять на диск в формате BMP.

В среде Delphi визуальному компоненту можно назначить любой курсор, установленный в Windows. За вид курсора отвечает свойство Cursor.

8. Выполнение заданий

Задания I уровня сложности

1. Добавьте к приложению урока функцию задания толщины линий. Толщина задаётся в компоненте Edit UpDown.


2. Создайте приложение, в котором можно рисовать эллипсы. Рисование эллипсов должно осуществляться следующим образом:

  • пользователь нажимает кнопку мыши на форме;
  • удерживая кнопку, перемещает мышь в конечную точку;
  • отпускает кнопку мыши, и эллипс рисуется.

Добавьте в созданное приложение функцию выбора цвета контура эллипса и цвета его заливки. Результат задания показан на рисунке:

Примечание: Рисование эллипсов происходит на компоненте Image. Выбор цвета пера и кисти осуществляется с помощью стандартного диалога выбора цвета.


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


4. Создайте приложение, отображающее цвет в компоненте Image, согласно различным порциям (от 0 до 255) красного, зелёного и синего цветов. Регулировка каждой составляющей цвета осуществляется с помощью компонентов TrackBar. Результат задания показан на рисунке:

Примечание: Для задания цвета используйте функцию rgb.


5. Создайте приложение, рисующее на компоненте Image вертикальные линии со случайным цветом, заполняющие всю его область. Результат задания показан на рисунке:

Примечание: Для задания цвета используйте функцию rgb.


6. Создайте приложение, рисующее на форме отрезки со случайными координатами, после нажатия на кнопку «Ok». Добавьте в созданное приложение функцию задания количества линий через поле ввода EditLines. Линии должны иметь случайный цвет, исходя из следующих критериев:

• в случайном выборе используется цвет всех оттенков;

• в случайном выборе используются только оттенки красного цвета;

• в случайном выборе используются только оттенки зелёного цвета;

• в случайном выборе используются только оттенки синего цвета.
Результат задания показан на рисунке:

Примечание: Рисование линий происходит на компоненте Image. Для задания цвета используйте функцию rgb.


7. Создайте приложение, рисующее концентрические окружности от центра формы. Окружности имеют случайный цвет. Радиус каждой последующей окружности больше предыдущей на 1 пиксель. Радиус первой окружности равен 1 пикселю. Количество окружностей задаётся в коде программы. Результат задания показан на рисунке:

Примечание: Для задания цвета используйте функцию rgb.


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

Примечание: Для задания цвета используйте функцию rgb.


9. Создайте приложение, реализующее плавный переход от чёрного цвета к цвету, выбранному зависимыми переключателями. Картинка чертится в компоненте Image. Переход должен выглядеть одинаково при различных размерах компонента Image. Результат задания показан на рисунке:

Задания II уровня сложности

1. Создайте простой графический редактор, по типу PaintBrush, со следующими функциями:

• очистка канвы;

• сохранение содержимого канвы;

• задания цвета пера и цвета кисти (заливки фигур);

• задания толщины пера;

• выбор режима (через компонент CheckBox), без заливки замкнутых фигур;

• рисование в четырёх режимах: карандаш (как в приложении урока), линия, прямоугольник и эллипс.

Результат задания показан на рисунке:

Пояснения:

• Пиктограммы лежат в папке «Обеспечение» с именем Gr.BMP.

• Для задания радиокнопок выбора режима рисования в панели инструментов необходимо их свойство Grouped поставить в True.

Рисование фигур должно осуществляться следующим образом:

• пользователь выбирает инструмент;

• нажимает кнопку мыши в начальной точке фигуры;

• перемещает мышь, чтобы задать размер фигуры;

• отпускает кнопку мыши, и фигура рисуется.


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

Примечание: Выбор цвета пера и кисти осуществляется с помощью стандартного диалога выбора цвета.