MSEide+MSEgui. Урок рисования.

Введение.

В статье рассматривается работа с объектом класса tpaintbox в MSEide+MSEgui на примере построения графика функции y=sin(x). Статья расчитана на начинающих пользователей, точнее для пользователей которые смогли установить Free Pascal, MSEide+MSEgui и написать свою первую программу. Если вы видите MSEide+MSEgui в первый то рекомендую сначала прочитать статью «Первая программа» (адрес статьи в интернете http://freepascal.ru/article//mse/20060108181639/).

Размещаем tpaintbox.

Запустите MSEide и создайте новый проект. Установленная у меня версия после создания нового проекта открывает файл программы, а нам нужен файл с основной формой – «main.pas». Поэтому откройте его в ручную.

В окне палитры компонентов (Component palette) на странице Widget найдите компонент tpaintbox и поместите его на форму. Растяните его на всю поверхность формы.

Нам необходимо учесть, что размеры основного окна (формы) могут быть изменены в процесс работы приложения. Чтобы привязать размеры и положение объектов на форме к размерам формы используются якоря (anchors). В окне инспектора объекта (Object Inspector) для объекта tpaintbox1 разверните (нажав на «плюсик») список установленных якорей (anchors). Здесь четыре значения, которые можно установить в True или False. Если установить для an_left значение True, то при изменении размеров формы растояние между левой границей формы и левой границей объекта будет всегда оставаться неизменным. Соответственно an_top это якорь для верхней границы, an_right для правой и an_bottom для нижней. Установите все четыре значения (an_left, an_top, an_right, an_bottom) в True.

Процедура рисования

Теперь займемся нашим графиком. Каждый раз для перерисовки объекта вызывается процедура определенная в свойстве onpaint. Такие специфические свойства называются событиями, а процедуры с ними связанные – обработчики событий. Соответственно установим эту процедуру для tpaintbox1 или правильней – установим обработчик события onpaint для tpaintbox1. Замечу, что если у вас в окне (на форме) не планируется никаких других элементов (кнопок, полей ввода и тп.), то вы можете не использовать tpaintbox, а проделать все тоже самое непосредственно с окном (формой). Теперь воспользовавшись окном инспектора объекта (Object Inspector), создайте соответствующую процедуру (обработчик события).

procedure tmainfo.myonpaint (const sender: twidget; const canvas: tcanvas);
begin
end;

В теле этой процедуры(обработчика) мы и будем делать все то, что нам необходимо.

Прим.: на момент написания этой статьи в MSEide есть один небольшой недостаток – после добавления различных элементов к проекту (процедур или компонентов) в список модулей (uses) не всегда в добавляются все необходимые модули. Непосредственно для onpaint вам необходимо в ручную добавить модуль msegraphics. В этом модуле определен класс tcanvas. Автор проекта (Martin Schreiber) планирует в будущем это исправить.

Будем считать что точка с координатами 0,0 находится в центре графика и для начала нарисуем оси координат:

canvas.drawline(makepoint(0,trunc(sender.bounds_cy/2)),
           makepoint(sender.bounds_cx,trunc(sender.bounds_cy/2)),
           cl_ltblue);
canvas.drawline(makepoint(trunc(sender.bounds_cx/2),0),
           makepoint(trunc(sender.bounds_cx/2),sender.bounds_cy),
           cl_ltblue);

Функция makepoint определена в модуле msegraphutils, добавте его в список модулей. Лучше в части implementation. Процедура drawline рисует линию из одной точки в другую указанным цветом. В нашем примере это две светлоголубые линии – горизонтальная из (0,trunc(sender.bounds_cy/2)) в (sender.bounds_cx,trunc(sender.bounds_cy/2)) и вертикальная из (trunc(sender.bounds_cx/2),0) в (trunc(sender.bounds_cx/2),sender.bounds_cy). Теперь запустите программу, результат примерно такой:

Закройте окно запущенной программы. В теле нашей процедуры теперь добавьте следующие строки для рисования функции синус:

 MinX:=-PI;
 MaxX:=PI;
 MinY:=-1;
 MaxY:=1;
 step:=0.01;
 X:=MinX;
 while X < MaxX do
 begin
  Y:=sin(X);
  SX:=trunc(X*(sender.bounds_cx/(MaxX-MinX))+sender.bounds_cx/2);
  SY:=abs(trunc(Y*(sender.bounds_cy/(MaxY-MinY))-sender.bounds_cy/2));
  canvas.drawpoint(makepoint(SX,SY),cl_red);
  X:=X+step;
 end;

В блоке описания переменных (var) определите переменные MinX, MaxX, MinY, MaxY, step, X, Y как вещественные, например double, а переменные SX, SY как целочисленные, например integer. В данном коде три ключевых части:

• расчет значения функции: Y:=sin(X);
• преобразование координат (X,Y) в координаты окна (SX,SY): SX:=trunc(X*(sender.bounds_cx/(MaxX-MinX))+sender.bounds_cx/2); SY:=abs(trunc(Y*(sender.bounds_cy/(MaxY-MinY))-sender.bounds_cy/2));
• рисование точки: canvas.drawpoint(makepoint(SX,SY),cl_red);

Запустите программу, вот ожидаемые результат:

Из набора методов класса tcanvas мы здесь использовали только два – drawline и drawpoint. Если вы загляните в файл ...\msegui\lib\common\kernel\msegraphics.pas, то в определении этого класса вы сможете найти остальные методы, предназначенные для рисования графических примитивов и много другое.

Заключение

Спасибо всем, кто дочитал до этого места. Проект MSEide+MSEgui стал доступен для всеобщего использования только в декабре 2005 года. Документации по нему пока мало, встроенная система помощи планируется после выхода версии 1.0, но уже сейчас вы сможете получить ответы на возникшие у вас вопросы на форуме сайта http://freepascal.ru. Задавайте их в разделе «Строннние стредства». Так же если вы владеете английским языком, то всегда сможете получить ответы на свои вопросы у автора MSEide+MSEgui Martin Schreiber в соответствующей ньюс конференции (news://news.dxmachine.com/public.mseide-msegui.talk).

Скачать пример к статье, 5.29Кб