Основы графики, или В каждом программисте живёт художник

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

Задачи урока

  • Работа со свойством Canvas.
  • Рисование линий.
  • Отслеживание движения мыши.
  • Отслеживание состояния кнопок мыши.

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

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

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

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

На форме нет ни одного компонента. Листом бумаги (канвой) будет сама форма.

2. Задание начальной позиции линии

1. В окне Инспектор объектов перейдите на закладку событий (Events). Найдите событие OnMouseDown и дважды щёлкните напротив него. Среда Delphi создаст пустой обработчик:

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

end;
Листинг 1

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

Чем отличается это событие от события OnClick? Тем, что событие OnClick просто уведомляло о том, что произошёл щелчок мышью, а OnMouseDown ещё и сообщает дополнительную информацию о состоянии мыши. Обратите внимание на дополнительные параметры обработчика:

  • Button — нажатие какой кнопки мыши вызвало событие: mbLeft (левой), mbRight (правой), mbCenter (средней);
  • Shift — состояние всех кнопок мыши и управляющих клавиш в момент вызова события;
  • XY— координаты указателя мыши внутри компонента.

Таким образом, отрабатывая это событие, можно узнать:

  • какая кнопка мыши была нажата и в каком состоянии (нажаты или отжаты) находились остальные кнопки мыши и управляющие клавиши (ShiftCtrlAlt);
  • в точке с какими координатами произошло нажатие.

2. Запрограммируем следующее действие: если была нажата левая кнопка мыши, то — установить графический указатель на форме в позицию курсора мыши. Код обработчика OnMouseDown должен выглядеть следующим образом:

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

   if Button = mbLeft then Form1.Canvas.MoveTo(X,Y);

end;
Листинг 2

Теперь нажатие на левую кнопку мыши задаёт начальную позицию линии.

3. Рисование линии

1. Запрограммируем рисование линии при перемещении мыши. Создайте обработчик для события OnMouseMove.

Это событие вызывается каждый раз, когда курсор мыши перемещается над объектом. Cобытие имеет те же параметры, что и OnMouseDown, за исключением параметра Button.

Здесь для определения состояния кнопок мыши можно использовать параметр Shift. Этот параметр содержит множество нажатых кнопок мыши и служебных клавиш. Кнопки и клавиши обозначаются следующими константами:

  • ssShift — клавиша Shift,
  • ssAlt — клавиша Alt,
  • ssCtrl — клавиша Ctrl,
  • ssLeft — левая кнопка мыши,
  • ssRight — правая кнопка мыши,
  • ssMiddle — средняя кнопка мыши.

Если одно из этих значений принадлежит множеству Shift, значит соответствующая кнопка или клавиша нажаты.

2. Напишите в обработчике следующие сроки:

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

   if ssLeft in Shift then Form1.Canvas.LineTo(X,Y);

end;
Листинг 3

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

3. Запустите программу. Попробуйте провести по форме мышью, удерживая нажатой левую кнопку. Вы увидите, что при этом на форме остаётся след. Можете попробовать сделать какой-нибудь рисунок.

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

Метод канвы MoveTo ставит позицию пера в требуемое место этой канвы.

Метод канвы LineTo чертит линию от текущей позиции пера до указанной в его параметрах. После этого указанная позиция становится текущей.

Событие OnMouseDown происходит в тот момент, когда нажимается одна из кнопок мыши.

Событие OnMouseMove вызывается каждый раз, когда курсор мыши перемещается над объектом.

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

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

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

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

Подсказка: Чтобы отследить моменты нажатия/отпускания кнопки мыши, необходимо обработать события OnMouseDown и OnMouseUp.


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


3. Создайте приложение со следующими возможностями:

  • При щелчке левой кнопкой мыши появляется окружность радиусом 10 пикселей.
  • При щелчке правой кнопкой мыши появляется квадрат со стороной 10 пикселей.

Центром фигур являются координаты щелчка. Результат задания показан на рисунке:


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


5. Создайте приложение, рисующее на форме вложенные эллипсы после нажатия на кнопку «Ellipse». Центр эллипсов совпадает с центром формы, а пропорции — с размерами формы. Число эллипсов и шаг изменения радиуса задаётся в программном коде. Результат задания показан на рисунке:


6. Создайте приложение, рисующее на форме сетку после нажатия на кнопку «Grid». Шаг сетки задаётся в програмном коде. Результат задания показан на рисунке:


7. Создайте приложение, рисующее на форме отрезки со случайными координатами начала и конца после нажатия на кнопку «Lines». Результат задания показан на рисунке:


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

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

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

Подсказка: Координаты нажатия и отпускания кнопки мыши будут задавать координаты прямоугольной области, в которую будет вписан эллипс. Чтобы отследить моменты нажатия/отпускания кнопки мыши, необходимо обработать события OnMouseDown и OnMouseUp


9. Создайте приложение, рисующее звёздное небо. На синем фоне формы случайным образом должны быть «разбросаны» звёзды (точки) белого цвета. Число точек задаётся в программном коде приложения. Результат задания показан на рисунке:

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

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

Подсказка: Заполнять форму точками следует вертикальными отрезками шириной в 1 пиксель, слева направо. Например, сначала случайным образом расставить 1000 точек с координатой х = 0 по оси ОY, затем для следующей координаты х = 1 число точек умножить на 0.97 и снова расставить их случайным образом и т. д.


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

Подсказка: Точки рисуются с помощью метода Pixels. Есть два варианта рисования точек:

• с помощью цикла в процедуре рисуется вся картина, после чего она отображается на экране. В этом случае число точек должно быть фиксированным (например, 10000);

• картина рисуется динамически во времени с помощью компонента Timer.


3. Создайте приложение, которое будет рисовать график функции y(x) = sin(x) в декартовой системе координат. Приложение содержит четыре однострочных редактора для задания границ отображения графика по оси OX и OY. Перерисовка графика согласно этим границам происходит по нажатию кнопки мыши в области рисования. Результат задания показан на рисунке:


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

Центр квадрата находится в позиции курсора мыши. Размер стороны квадрата, заполненного случайными точками (каплями краски), равен 10 пикселям. Число случайных точек = 25. Результат задания показан на рисунке: