Как сделать часы в лазарусе

Добавил пользователь Алексей Ф.
Обновлено: 05.10.2024

Данная глава посвящена графическим средствам языка. Рассмотрены основные процедуры и функции работы с графикой. Приведён пример построения графика функции.

10.1 Средства рисования в Lazarus

При разработке проекта, в котором можно рисовать, в распоряжении программиста находится полотно (холст) — свойство Canvas , карандаш — свойство Pen , и кисть — свойство Brush .

Свойством Canvas обладают следующие компоненты:

форма (класс Tform );
таблица (класс TSringGrid );
растровая картинка (класс Timage );
принтер (класс TPrinter ).

При рисовании компонента, обладающего свойством Canvas , сам компонент рассматривается как прямоугольная сетка, состоящая из отдельных точек, называемых пикселями. Положение пикселя характеризуется его вертикальной (X) и горизонтальной (Y) координатами. Левый верхний пиксель имеет координаты (0,0) . Вертикальная координата возрастает сверху вниз, горизонтальная — слева направо. Общее количество пикселей по вертикали определяется свойством Height , а по горизонтали — свойством Weight . Каждый пиксель может иметь свой цвет. Для доступа к любой точке полотна используется свойство Pixels[X,Y]:TColor . Это свойство определяет цвет пикселя с координатами X(integer), Y(integer) .

Изменить цвета любого пикселя полотна можно с помощью следующего оператора присваивания:

Компонент . Canvas . Pixels [X,Y] : = Color ;

где Color — переменная или константа типа Tcolor .

Определены следующие константы цветов (табл. 10.1).

Цвет любого пикселя можно получить с помощью следующего оператора присваивания:

Color := Компонент . Canvas . Pixels [X,Y ];

где Color — переменная типа Tcolor .

Класс цвета точки Tcolor определяется как длинное целое longint . Переменные этого типа занимают в памяти четыре байта. Четыре байта переменных этого типа содержат информацию о долях синего (B), зелёного (G) и красного (R) цветов и устроены следующим образом: $00BBGGRR .

Для рисования используются методы класса TСanvas , позволяющие изобразить фигуру (линию, прямоугольник и т. д.) или вывести текст в графическом режиме, и три класса, определяющие инструменты вывода фигур и текстов:

TFont (шрифты);
TPen (карандаш, перо);
TBrush (кисть).

Класс TFONT. Можно выделить следующие свойства соответствующего объекта Canvas.TFont :

Name (тип string ) — имя используемого шрифта.
Size (тип integer ) — размер шрифта в пунктах ( points ). Пункт — это единица измерения шрифта, равная 0,353 мм или 1/72 дюйма.
Style — стиль начертания символов, который может быть обычным, полужирным ( fsBold ), курсивным ( fsItalic ), подчёркнутым ( fsUnderline ) и перечёркнутым ( fsStrikeOut ). В программе можно комбинировать необходимые стили, например, чтобы установить стиль "полужирный курсив" необходимо написать следующий оператор: Объект. Canvas. Font. Style : = [ fsItalic, fsBold ]
Color (тип Tcolor ) — цвет символов.
Charset (тип 0..255 ) — набор символов шрифта. Каждый вид шрифта, определяемый его именем, поддерживает один или более наборов символов. В табл. 10.2 приведены некоторые значения Charset .

Класс TPEN. Карандаш (перо) используется как инструмент для рисования точек, линий, контуров геометрических фигур. Основные свойства объекта Canvas.TPen :

Color (тип Tcolor ) — определяет тип линии;
Width (тип Integer ) — задаёт толщину линии в пикселях;
Style — даёт возможность выбрать вид линии. Это свойство может принимать значение, указанное в таблице 10.3.

Класс TBRUSH. Кисть ( Canvas.Brush ) используется методами, обеспечивающими вычерчивание замкнутых фигур для заливки. Кисть обладает двумя основными свойствами:

Color (тип Tcolor ) — цвет закрашивания замкнутой области;
Style (тип TBrushStyle ) — определяет стиль заполнения области ( bsSolid — сплошное заполнение, bsClear — прозрачное, bsHorizontal — горизонтальные линии, bsVertical — вертикальные линии, bsFDiagonal, bsBDiagonal — диагональные линии, bsCross — решётка, bsDiagCross — диагональная решетка).

Класс TCANVAS. Этот класс является основным инструментом для рисования графики. Рассмотрим его наиболее часто используемые методы.

procedure MoveTo(X, Y : integer );

Метод MoveTo изменяет текущую позицию пера на позицию, заданную точкой (X,Y) . Текущая позиция хранится в переменной PenPos типа Tpoint . Определение типа TPoint следующее:

Текущую позицию пера можно считывать с помощью свойства PenPos следующим образом:

procedure LineTo (X, Y : integer);

Метод LineTo соединяет прямой линией текущую позицию пера и точку с координатами (X,Y) . При этом текущая позиция пера перемещается в точку с координатами (X,Y) .

Рассмотрим работу процедуры на примере. Расположим на форме кнопку и рассмотрим процедуру обработки события TForm1.Button1Click , которая рисует прямые линии:

В результате щелчка по кнопке на форме будет нарисована прямая линия, соединяющая точку с координатами (0,0) и точку с координатами (30,50). При повторном щелчке по кнопке процедура продолжит рисовать эту же линию.

Теперь перепишем процедуру обработки события следующим образом:

При первом щелчке по кнопке на экране прорисуется аналогичная линия. Но при повторном щелчке процедура рисует линию, которая соединяет текущую точку с точкой, получившейся из текущей добавлением к координате X числа 30, а к координате Y — числа 50. Т. е. при повторном щелчке по кнопке процедура соединяет прямой линией точки (30,50) и (60,100) . При третьем щелчке по кнопке будут соединяться прямой линией точки (60,100) и (90,150) и т. д.

procedure PolyLine ( const Points array of TPoint );

Метод PolyLine рисует ломаную линию, координаты вершин которой определяются массивом Points .

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

После запуска программы и щелчка по кнопке Рисовать окно формы будет выглядеть, как на рисунке 10.1.

procedure Ellipse (X1, Y1, X2, Y2 : integer );

Метод Ellipse вычерчивает на холсте эллипс или окружность . X1, Y1, X2, Y2 — это координаты прямоугольника, внутри которого вычерчивается эллипс . Если прямоугольник является квадратом, то вычерчивается окружность .

procedure Arc (X1, Y1, X2, Y2, X3, Y3, X4, Y4 : integer );

Метод Arc вычерчивает дугу эллипса. X1, Y1, X2, Y2 — это координаты , определяющие эллипс , частью которого является дуга ; X3, Y3 — координаты , определяющие начальную точку дуги; X4, Y4 — координаты , определяющие конечную точку дуги. Дуга рисуется против часовой стрелки.

procedure Rectangle (X1, Y1, X2, Y2 : integer );

Метод Rectangle рисует прямоугольник . X1, Y1, X2, Y2 — координаты верхнего левого и нижнего правого углов прямоугольника.

procedure RoundRect (X1, Y1, X2, Y2, X3, Y3 : integer );

Это метод вычерчивания прямоугольника со скруглёнными углами. X1, Y1, X2, Y2 — координаты верхнего левого и нижнего правого углов прямоугольника, а X3, Y3 — размер эллипса, одна четверть которого используется для вычерчивания скругленного угла.

procedure PolyGon ( const Points array of TPoint );

Метод PolyGon рисует замкнутую фигуру (многоугольник) по множеству угловых точек, заданному массивом Points . При этом первая точка соединяется прямой линией с последней. Этим метод PolyGon отличается от метода Poliline , который не замыкает конечные точки. Рисование осуществляется текущим пером Pen , а внутренняя область фигуры закрашивается текущей кистью Brush .

procedure Pie (X1, Y1, X2, Y2, X3, Y3, X4, Y4 : integer );

Метод Pie рисует замкнутую фигуру — сектор окружности или эллипса — с помощью текущих параметров пера Pen , внутренняя область закрашивается текущей кистью Brush . Точки (X1,Y1) и (X2,Y2) задают прямоугольник , описывающий эллипс . Начальная точка дуги определяется пересечением эллипса с прямой , проходящей через его его центр и точку (X3,Y3) . Конечная точка дуги определяется пересечением эллипса с прямой , проходящей через его центр и точку (X4,Y4) . Дуга рисуется против часовой стрелки от начальной до конечной точки. Рисуются прямые, ограничивающие сегмент и проходящие через центр эллипса и точки (X3,Y3) и (X4,Y4) .

Создадим форму, установим ей размеры Heigth — 500, Weight — 500. Внизу разместим кнопку, зададим ей свойство Caption — "Рисовать". При запуске программы и щелчке по этой кнопке на форме прорисуются различные фигуры (см. рис. 10.2). Ниже приведён листинг программы , демонстрирующий работу перечисленных методов. Результат работы программы приведен на рис. 10.2.

procedure TextOut (X, Y : integer; const Text : String );

Эта функция пишет строку текста Text , начиная с позиции с координатами (X,Y) . Текущая позиция PenPos пера Pen перемещается в конец выведенного текста. Надпись выводится в соответствии с текущими установками шрифта Font , фон надписи определяется установками текущей кисти. Для выравнивания позиции текста на канве можно использовать методы, позволяющие определить высоту и длину текста в пикселях — TextExtent, TextHeight и TextWidth . Рассмотрим эти функции.

function TextExtent ( const Text : String ) : Tsize;

Эта функция возвращает структуру типа Tsize , содержащую длину и высоту в пикселях текста Text , который предполагается написать на канве текущим шрифтом.

function TextHeight ( const Text : String ) : integer;

Функция возвращает высоту в пикселях текста Text , который предполагается написать на канве текущим шрифтом.

function TextWidth ( const Text : String ) : integer;

Функция возвращает длину в пикселях текста Text , который предполагается написать на канве текущим шрифтом. Это позволяет перед выводом текста на канву определить размер надписи и расположить её и другие элементы изображения наилучшим образом.

Если цвет кисти в момент вывода текста отличается от того, которым закрашена канва, то текст будет выведен в цветной прямоугольной рамке, но её размеры будут точно равны размерам надписи.

Мы рассмотрели основные функции рисования. Теперь можно перейти непосредственно к рисованию. Но перед этим следует заметить, что если вы свернёте окно с графикой, а затем его восстановите, то картинка на форме исчезнет. Изменение размеров окна также может испортить графическое изображение в нём. Для решения этой проблемы существуют процедуры обработки событий Объект.FormPaint и Объект.FormResize . Процедура Объект.FormPaint выполняется после появления формы на экране, а процедура Объект.FormResize — после изменения размера формы. Следовательно, все операторы рисования нужно помещать внутрь Объект.FormPaint и дублировать в процедуре Объект.FormResize .

Я буду использовать Debian 6.0.2.1 и Lazarus 0.9.28.2-12 beta. По поводу установки. В debiane все сделалось одной командой:

В других linux’ах по разному. Например в Ubuntu — так же, потому что она построена на основе Debian. В Arch Linux не намного сложнее:

Теперь приступим к программированию. Наша задача:

Создать форму с кнопкой и лейбой;
Создать свой класс Timer’a. Добавить ему необходимые методы;
Создать автоматическую работу нашего таймера, на основе системного таймера.

И так, поехали. Создадим форму. Добавим на нее кнопку и лейбу. Переименуем их в понятные имена:

Создание класса в Lazarus такое же простое, как и в Delphi. Для начала создадим новый модуль (Файл — Создать модуль). В нем будет реализован наш класс. Напишем простой интерфейс класса, в разделе type:

После этого можно реализовать методы класса:

Подключили в uses наш юнит. Теперь:

Этим мы объявили саму переменную таймера. Далее необходимо ее инициализировать с помощью конструктора. Заодно и опишем событие кнопки.

Теперь реализуем событие таймера. Кликните два раза на событии OnTimer в свойствах вашего таймера, пишем код:

Создадим кнопку BtnStartStop. Запишем в ее событие Onclick следующий код:

Мы проверяем, работает ли таймер. Если нет — включаем, если да — выключаем. Не забудем добавить в событие создание формы строчку:

Что бы наш таймер не запускался сам при запуске приложения. Запускаем. Если все работает, идем дальше. Расширим наш класс TMTimer методом SetTime:

Для этого на панели элементов Standart в верхней части экрана найдите элемент TButton (Кнопка) и дважды щелкните по ней, чтобы добавить элемент на форму. На рабочей форме появилось изображение кнопки. Перейдите на панель Свойства и в поле Name задайте имя кнопки – btnExit. Аналогичным образом добавьте Надпись, на панели Панели элементов Standart нажав дважды на TLabel. Задайте свойству Name надписи – lblHello. Разместите метку на форме выше кнопки. Затем добавьте еще одну кнопку и задайте ее свойству Name значение btnHello. Расположите ее на форме.

Когда Вы создаете приложение, Lazarus автоматически генерирует для него определенный код. Например, для целого приложения генерируется следующий код:

unit Unit1; Код основной программы End.

Главный элемент в этом фрагменте это Unit: организующая единица, модуль, которая группирует и связывает родственный код.

Запрограммируйте событие Click для Кнопки btnExit оператором End. Для этого сделайте двойной щелчок на Кнопке btnExit и в открывшемся окне редактирования кода наберите на клавиатуре оператор Close; . В итоге должно получиться:

procedure TfrmHello.BtnExitClick(Sender: TObject); begin close; end;

Запустите приложение. Используйте для этого кнопку Запустить на панели инструментов (можно использовать горячую клавишу F5).
Нажмите на кнопку Сказать Привет! — ничего не происходит. Затем нажмите на кнопку Выход и убедитесь, что при нажатии приложение закончит свою работу.
Запрограммируйте событие Click(по щелчку) для Кнопки btnHello следующим образом (см. пункт 5) (предварительно перейдите на дизайн формы, затем дважды щелкните на кнопке Сказать Привет!):

procedure TfrmHello.BtnHelloClick(Sender: TObject); begin lblHello.Caption:='Привет!'; end;

Повторите действия из пунктов 6 и 7.
Сохраните приложение.

Дополнительное задание. Измените приложение Hello так, чтобы в метке при нажатии кнопки btnHello надпись Привет! добавлялась в конец надписи (Привет!Привет!Привет!…).

В этом уроке Вы познакомитесь с назначением и основными свойствами компонента Lazarus Image, создадите два проекта с его использованием.

Компонент Изображение (TImage) предназначен для вывода на форму графического рисунка. Он поддерживает многочисленные форматы графических файлов, включая .bmp, .ico, .jpg и т.д.

Компонент (TImage) обеспечивает вывод на поверхность формы иллюстраций, представленных в bmp–формате (чтобы компонент можно было использовать для отображения иллюстраций в формате JPG, надо подключить модуль JPEG – указать имя модуля в директиве uses).

Свойство	Описание
Picture	Иллюстрация, которая отображается в поле компонента.
Width, Height	Размер компонента. Если размер компонента меньше размера иллюстрации, и значение свойств AutoSize, Strech и Proportional равно False, то изображается часть иллюстрации.
Proportional	Признак автоматического масштабирования картинки без искажения. Чтобы масштабирование было выполнено, значение свойства AutoSize должно быть False.
Strech	Признак автоматического масштабирования (сжатия или растяжения) иллюстрации в соответствии с реальным размером компонента. Если размер компонента не пропорционален размеру иллюстрации, то иллюстрация будет искажена.Обратите внимание: свойство Stretch не влияет на файлы рисунков типа .ico.
AutoSize	Признак автоматического изменения размера компонента в соответствии с реальным размером иллюстрации.
Center	Признак определяет расположение картинки в поле компонента по горизонтали, если ширина картинки меньше ширины поля компонента. Если значение свойства равно False, то картинка прижата к правой границе компонента, если True – то картинка располагается по центру.
Visible	Отображается ли компонент и соответственно, иллюстрация на поверхности формы.
Canvas	Поверхность, на которую можно вывести графику.

Вы можете присвоить какой-либо рисунок компоненту Image как при разработке в среде Lazarus, так и во время выполнения. В этом уроке мы рассмотрим оба случая.

Для загрузки рисунка в поле Image на этапе разработки интерфейса приложения нужно присвоить свойству Picture файл, содержащий рисунок.

Для присвоения изображению файла с рисунком во время выполнения приложения используется метод LoadFromFile(), принадлежащий объекту Picture.

Например, для вывода в изображение imgIxample файла рисунка myPicture.jpg во время выполнения используется следующий оператор:

Задание 7

Картинки для выполнения задания:

Сохранить их как файлы на вашем компьютере.

Ход выполнения

Разместите на форме два изображения Image (вкладка Additional), две надписи (Label) и две кнопки (Button).

Значение свойства AutoSize для изображения установить True, чтобы размеры поля изображения автоматически изменялись, подстраивались под размеры рисунка.

Скопируйте графические файлы с рисунками в папку проекта, иначе придется указывать полный путь к файлу.
Первый рисунок загрузите в Image1 на этапе проектирования интерфейса при настройке свойства Picture объекта Image1 в инспекторе объектов.

Выделите элемент Image1 на форме, в окне Инспектор объектов.
В строке Picture щелкните по кнопке с многоточием. Откроется окно Диалог загрузки изображения.

Второй рисунок загрузить в Image2 во время выполнения приложения с помощью метода LoadFromFile объекта Image2 после щелчка на кнопке Button2 (Показать рисунок).

Откройте редактор кода двойным щелчком на элементе Button2. В программный код добавиться пустая процедура TForm1.Button2Click.
Напишите программный код для TForm1.Button2Click.

procedure TForm1.Button2Click(Sender: TObject);

Проверьте работу приложения. Первая картинка должна отобразиться в поле Image1 сразу после загрузки приложения, вторая картинка – после щелчка на кнопке Показать рисунок.
Добавьте к предыдущему проекту кнопку Убрать рисунок (Button3). Наложите ее на кнопку Button2. Сделайте невидимой на момент загрузки приложения, для этого измените свойство Visible на False.
Измените программный код процедуры обработки щелчка на кнопке Button2 (Показать рисунок). Программный код выполняет следующие действия:

Делает видимым компонент Image2;
Загрузить рисунок в поле Image2;
Делает невидимой кнопку Button2 (Показать рисунок);
На ее месте делает видимой кнопку Button3 (Убрать рисунок).

Программный код процедуры:

procedure TForm1.Button2Click(Sender: TObject);

Для управления видимостью кнопок используйте свойство Visible.

Напишите программный код процедуры обработки щелчка на кнопке Button3 (Убрать рисунок), который:

прячет кнопку Button3 (Убрать рисунок);
удаляет картинку из Image2;
делает видимой кнопку Button2 (Показать рисунок).

Исходный текст процедуры:

procedure TForm1.Button3Click(Sender: TObject);

Проверьте работу кнопок. После щелчка на кнопке Показать рисунок картина отобразится в поле Image2, а после щелчка на кнопке Убрать рисунок – удаляется из поля.

Задание 8

Создайте приложение, которое над рисунком, расположенным в центре формы, выполняет действия, указанные на кнопках.

Ход выполнения

Создайте новое приложение, сохраните его в папке Перемещение картинки.
Установите на форме 9 кнопок (Button) и поле Image (изображение) как показано в образце.
Измените свойство Name кнопок в соответствии с надписями на них: – Vverh_Vlevo, vverch и т.д.
Написать программный код процедур обработки щелчков по кнопкам.

Напомню. Для того чтобы создать процедуру обработчик события, идущий по умолчанию, нужно выполнить двойной щелчок на элементе управления.

Примерный текст процедур обработчиков для кнопок Вверх-влево , Вверх-вправо и В центр приводится ниже:

Читайте также: