Рисование многоугольника на координатной плоскости (TCanvas, TImage, Polygon)
Исходники к уроку можно скачать здесь.
Сначала мы изучим несколько графических возможностей типовой версии Delphi, такие как TImage, TCanvs и другие, методы графических преобразований объектов, такие как масштабирование, поступательное движение, вращение, затем перейдем к изучению DirectX, а потом будем писать собственную компьютерную игру.
Первый урок мы начнем с того, что научимся рисовать многоугольник в заданной системе координат и масштабировать его. В процессе создания графических компьютерных игр нам обязательно потребуется переводить объекты из одной системы координат в другую, причем с разным масштабом. вот этому то и мы научимся сейчас. И так, давайте создадим класс TAxesSystem, который будет переводить из произвольной системы координат в графическую систему координат компьютера:
| TAxesSystem=class(TObject) public X, Y:integer; RatioX, RatioY:double; function GetX(AX:double):integer; function GetY(AY:double):integer; function GetPoint(AX, AY:Double):TPoint; end; |
Пока не будем заморачиваться насчет того, в какие секции Public, Private или Protected поставить поля и методы класса. Это мы сделаем в следующих уроках, когда будем расширять и совершенствовать нашу библиотеку.
Теперь реализуем методы объявленного класса:
| function TAxesSystem.GetX(AX:double):integer; begin result:=X+round(AX/RatioX); end; function TAxesSystem.GetY(AY:double):integer; begin result:=Y+round(AY/RatioY); end; function TAxesSystem.GetPoint(AX, AY:Double):TPoint; begin Result.X:=GetX(AX); Result.Y:=GetY(AY); end; |
Теперь немножко комментариев к коду. В методах GetX и GetY мы просто пересчитываем координаты в другую систему координат. X и Y - это координаты центра нашей системы координат в системе координат компьютера. Для наглядности это изображено на рисунке:
Графическая координатная система компьютера начинается в левом верхнем углу экрана, окна или объекта внутри окна. Ось Y направлена вниз. Кроме того, в этой системе координат не может быть дробных чисел. Именно поэтому в формуле пересчета имеется функция round - округление. может отличатся и масштаб. Например, единичный отрезок нашей системы координат может быть равен 10 пикселам. В этом случае масштаб равен 1:10 (RatioX или RatioY равно 0,1). Нам может потребоваться сжать или вытянуть графический объект по вертикали или горизонтали. Для этого можно задать разный масштаб для оси X и оси Y.
А теперь перейдем, собственно, к рисованию. Для этого положим на форму компонент TImage, который находиться на закладке Additional*:
Затем положим на форму кнопочку для запуска процесса рисования, два поля ввода для задания масштаба по горизонтали и вертикали, а так же два компонента TSpinEdit для задания координат центра нашей системы координат*.
У нас получиться примерно такая форма*:
Поля ввода назовем edX и edY, компоненты TSpinEdit соответсвенно seX и seY.
Теперь для кнопочки напишем обработчик события OnClick
| procedure
TfrmGameSample.btnShowClick(Sender: TObject); var Points:array[1..5] of TPoint; i:integer; Axes:TAxesSystem; Trian:array[1..5,1..2] of double; Rect:TRect; begin Trian[1,1]:=1; Trian[1,2]:=2; Trian[2,1]:=5; Trian[2,2]:=4; Trian[3,1]:=4; Trian[3,2]:=2; Trian[4,1]:=4; Trian[4,2]:=-1; Trian[5,1]:=3; Trian[5,2]:=-1; Axes:=TAxesSystem.Create; //заполним параметры координатной системы Axes.X:=seX.Value; Axes.Y:=seY.Value; Axes.RatioX:=StrToFloat(edRatioX.Text); Axes.RatioY:=StrToFloat(edRatioY.Text); for i:=1 to 5 do Points[i]:=Axes.GetPoint(Trian[i,1],Trian[i,2]); //очистим поле для рисования, вызвав метод FillRect класса TCanvas, который является свойство TImage Rect.Left:=0; Rect.Top:=0; Rect.Right:=imImage.Width; Rect.Bottom:=imImage.Height; imImage.Canvas.FillRect(Rect); //нарисуем imImage.Canvas.Polygon(Points); end; |
Теперь немножечко комментариев. Сперва мы задаем координаты точек, используя для этого массив из структур TPoint. Для пересчета координат создаем объект класса TAxesSystem, после чего в цикле перебираем все элементы массива и пересчитываем координаты. Очищаем поле картинки (TImage), для чего используем метод FillRect класса TCanvas, который является свойством TImage, который просто рисует заполненный прямоугольник. по умолчанию он имеет белый цвет, поэтому картинка (TImage) у нас очистится. и, наконец, вызываем метод Polygon класса TCanvas, который является свойством TImage.
Теперь запустим программу и нажмем кнопочку
Обратите внимание, что так как ось Y графической системы координат компьютера направлена вниз, а нашей вверх, то масштаб по оси Y взять со знаком минус.
Попробуем изменить координаты нашей системы координат и нажать кнопочку "Показать фигуру":
Изменим масштаб:
Теперь давайте попробуем нарисовать другую фигуру. Перепишите обработчик OnClick кнопочки, например, так:
| procedure
TfrmGameSample.btnShowClick(Sender: TObject); var Points:array[1..7] of TPoint; i:integer; Axes:TAxesSystem; Rect:TRect; Trian:array[1..7,1..2] of double; begin Trian[1,1]:=-1; Trian[1,2]:=2; Trian[2,1]:=0; Trian[2,2]:=4; Trian[3,1]:=1; Trian[3,2]:=1; Trian[4,1]:=6; Trian[4,2]:=1; Trian[5,1]:=4; Trian[5,2]:=-1; Trian[6,1]:=2; Trian[6,2]:=0.5; Trian[7,1]:=0; Trian[7,2]:=-3; Axes:=TAxesSystem.Create; //заполним параметры координатной системы Axes.X:=seX.Value; Axes.Y:=seY.Value; Axes.RatioX:=StrToFloat(edRatioX.Text); Axes.RatioY:=StrToFloat(edRatioY.Text); for i:=1 to 7 do Points[i]:=Axes.GetPoint(Trian[i,1],Trian[i,2]); //очистим поле для рисования Rect.Left:=0; Rect.Top:=0; Rect.Right:=imImage.Width; Rect.Bottom:=imImage.Height; imImage.Canvas.FillRect(Rect); //нарисуем imImage.Canvas.Polygon(Points); end; |
Теперь фигура будет выглядеть вот так:
На этом урок закончен, двигать, вращать и проводить прочие манипуляции с объектами мы будем на следующих уроках.
Исходники к уроку можно скачать здесь.
Скриншоты, помеченные знаком *, являются цитатами и иллюстрациями в соответствии со ст. 1274 ГК РФ программного продукта "Delphi", авторское право на который принадлежит Borland Delphi..