Свойство Canvas и класс TCanvas. Алгоритм простейшей анимации

---

Многие объекты имеют свойство Canvas (холст, канва), которое используется для рисования различных линий: эллипсов, прямоугольников и т.п. - на поверхности соответствующего объекта, для задания свойств фона и для вывода текста. Свойство Canvas относится к классу TCanvas, поэтому нужно в справочной системе Делфи рассмотреть (кратко) этот класс.

Основые методы класса TCanvas:

• procedure MoveTo(X, Y: Integer); - перо ставится на точку с коорд. X, Y (необходимо перед началом рисования некоторых линий, например, отрезка прямой - см LineTo)
• procedure LineTo(X, Y: Integer); - проводится отрезок прямой в точку с коорд. X, Y (см MoveTo)
• procedure Ellipse(X1, Y1, X2, Y2: Integer); overload; Эллипс. X1, Y1, X2, Y2 - координаты левого верхнего и правого нижнего углов описанного прямоугольника. или:
  procedure Ellipse(const Rect: TRect); overload; Rect - прямоугольник (описанный). overload - перегрузка метода, т е метод может использоваться с любым из этих 2-х вариантов параметров.
• procedure FillRect(const Rect: TRect); - заполняет (заливает фоном) прямоугольник Rect. Свойства фона нужно задать, используя Canvas.Brush (см свойства, Brush)
• procedure Arc(X1, Y1, X2, Y2, X3, Y3, X4, Y4: Integer); - дуга эллипса.
• procedure FloodFill(X, Y: Integer; Color: TColor; FillStyle: TFillStyle); - заливка замкнутой фигуры type TFillStyle = (fsSurface, fsBorder); - если FillStyle= fsSurface, то Color - цвет заливаемой фигуры, если FillStyle= fsBorder, то Color - цвет границы.
• procedure PolyBezier(const Points: array of TPoint); - нарисовать сплайн-аппроксимацию, проходящую через точки, заданные массивом Points.
• procedure Rectangle(X1, Y1, X2, Y2: Integer); overload; - параметры определяют прямоугольник (см Ellipse)
  procedure Rectangle(const Rect: TRect); overload;
• procedure RoundRect(X1, Y1, X2, Y2, X3, Y3: Integer); - прямоугольник, углы скруглены.
• procedure TextOut(X, Y: Integer; const Text: string); - выводит текст. X, Y - коорд верхнего левого угла прямоугольника, охватывающего текст.

Для настройки параметров линии, используемой для рисования этих фигур требуется св-во Canvas.Pen. Рассмотрим основные св-ва класса TPen:

• property Color: TColor;
• property Style: TPenStyle;
  type TPenStyle = (psSolid, psDash, psDot, psDashDot, psDashDotDot, psClear); - сплошная, пунктир и т д.
• property Width: Integer; - толщина линии.

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

• property Brush: TBrush; - (кисть). - Определяет цвет и тип заполнения для заполнения замкнутых фигур . Далее - см свойства класса TBrush.
• property Font: TFont; - задает свойства шрифта, используемого методом TextOut (см выше).
• property Pen: TPen; - "перо", которым пользуются методы класса TCanvas для рисования линий. Позволяет задать свойства линий. Класс TPen описан выше.
• property Pixels[X, Y: Integer]: TColor; - Используя это св-во, Вы можете задать цвет каждого пиксела (пиксел задается координатами X, Y, начало отсчета - верхний левый угол владельца).

Вы можете увидеть примеры использования Canvas в программах:

• Игра ТИР (заполнение фона формы картинкой из файла),
• Наш первый Делфи-проект ( график функции ) ,
• Анимированная схема технологического процесса

А также скачать файлы учебных проектов, использующих Canvas (все файлы проекта в архиве .RAR, каждый архив по 200Кб):

• Демонстрация применения Canvas - 2 формы, TStringGrid, TMainMenu, TFontDialog, Canvas.Ellipse, Canvas.TextOut, Canvas.Font.Assign
• Демонстрация применения Canvas-2 (опыты всякие) - TMainMenu, FormMouseDown, TTimer, FormPaint
• Анимация: Колесо катится по наклонной прямой - TMainMenu, TBitMap, TTimer, Canvas.FillRect , Canvas.Draw
• Простая игра-стрелялка: торпедируем корабли

Однако для серьезной анимации лучше использовать технологию Flash. (Для просмотра должен быть установлен плагин для Вашего броузера)

Алгоритм простейшей анимации

Простейшая анимация - это просто движение неизменной фигуры (рисунка) относительно некоторого фона. При помощи свойств и методов класса TCanvas простейшую анимацию можно сделать так:

1. Нарисовать где-либо эту фигуру. Пусть координаты верхнего-левого угла охватывающего (описанного) прямоугольника: X,Y и фигура эта - прямоугольник высотой H, шириной B. Нарисовать его можно так: canvas.rectangle(X,Y,X+B,Y+H);
2. Выдержать некоторую паузу чтобы глаз успел воспринять фигуру (например, 50 мсек ) . Для этого удобно использовать компоент Timer, т е настроить Timer1.Interval = 50.
3. Стереть фигуру (для этого можно ее повторно нарисовать в том же месте цветом фона или использовать метод FillRect - наверное, это быстрее)
4. Изменить координаты для рисования на небольшую величину (например, шаг dx=dy=2)
5. Нарисовать фигуру в новом месте. Т е для нашего прямоугольника:
   X:= X+dx; Y:= Y+dy; canvas.rectangle(X,Y,X+B,Y+H);
6. Повторять пункты 1 - 5, пока фигура не приедет в конечную позицию.

Все эти действия нужно поместить в тело метода Timer1Timer. Полный текст модуля unit1.pas, создающего эту анимацию:

unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes,
  Graphics, Controls, Forms, Dialogs, StdCtrls, ExtCtrls;

type
  TForm1 = class(TForm)
    Timer1: TTimer;
    Button1: TButton;
    procedure Button1Click(Sender: TObject);
    procedure Timer1Timer(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}
const H = 50; B = 100; dx=2; dy=2;
var X,Y: integer;

procedure TForm1.Button1Click(Sender: TObject);
begin
  X:= 10; Y:= 10;
  canvas.Rectangle(x,y,x+b,y+h);
  timer1.Enabled:= true;
end;

procedure TForm1.Timer1Timer(Sender: TObject);
var rr: trect;
{type
  TRect = packed record
  case Integer of
    0: (Left, Top, Right, Bottom: Integer);
    1: (TopLeft, BottomRight: TPoint);
end; }
begin
 rr.Left:= x;  rr.top:= y;
 rr.right:= x+b; rr.bottom:= y+h;
 canvas.FillRect(rr);
 x:= x+dx; y:=y+dy;
 canvas.Rectangle(x,y,x+b,y+h);
 if ((x + b) > clientwidth) or
  ((y+h) > clientheight )
  then
  timer1.enabled:= false;
end;
end.

а все файлы этого проекта можно скачать здесь

Можно сделать анимацию проще, если двигать (менять координаты) объекта Image, который содержит картинку. В этом случае не нужно заботиться о стирании и рисовании. Нужно просто изменить координату, сделать паузу и т д. Например, можно переделать проект ТИР (заменить присвоение случайных чисел в качестве координат - числами, которые меняются плавно, описывая траекторию движения).