Публикации MSEide + MSEgui

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

05.02.2006 Алексей Ю. Уласевич (STAKANOV)

19.10.2013 Алексей В. Логинов (AlexL): Обновление текста статьи и скриншотов.

Введение.

В статье рассматривается работа с объектом класса 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;

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

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

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

Функция makepoint определена в модуле msegraphutils. Процедура 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). Теперь запустите программу, результат примерно такой:

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

var
 MinX,MaxX,MinY,MaxY,step,X,Y:double;
 SX,SY:integer;
 ...
 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));
  acanvas.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));
• рисование точки: acanvas.drawpoint(makepoint(SX,SY),cl_red);

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

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

Заключение

Спасибо всем, кто дочитал до этого места. Проект MSEide+MSEgui стал доступен для всеобщего использования в декабре 2005 года. Документации по нему немного, но вы можете получить ответы на возникшие у вас вопросы на форуме сайта http://freepascal.ru. Также если вы владеете английским языком, то всегда сможете получить ответы на свои вопросы у автора MSEide+MSEgui Martin Schreiber в соответствующей рассылке (http://www.msegui.org/content/mse-talk).

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