Разработка графического редактора в Delphi

Программирование на Delphi. Часть 1. Установка Delphi Community Edition (бесплатная версия) – Школа программирования ProgTips

Разработка графического редактора в Delphi

Компания Embarcadero в 2018 году представила Delphi Community Edition — бесплатную версию легендарной среды разработки Delphi. Использовать её могут студенты, стартаперы, небольшие команды, некоммерческие организации.

Условия использования: ​лицензия на использование продолжает действовать до тех пор, пока прибыль физического лица или компании от приложений Delphi не достигнет 5 000 долларов США, или штат команды разработчиков не превысит 5 человек.

Мы ставим Delphi в учебных целях, поэтому ее можно использовать бесплатно. А после заработка первых 5 тысяч долларов её можно приобрести: цены начинаются от 98 999 руб. (почти $1600).

С помощью Delphi Community Edition можно разрабатывать мультиплатформенные приложения на Windows, Android, iOS и macOS. В этой статье мы пошагово пройдём процесс установки среды и напишем тестовое приложение под Windows. Delphi всегда был инструментом для быстрого старта в разработке под Windows на языке Pascal, это мы сегодня и проверим.

Примерное время установки: около 40-60 минут.

1. Скачивание бесплатной версии Delphi

Для того, чтобы получить доступ к Delphi Community Edition, пройдите по этой ссылке https://www.embarcadero.com/ru/products/delphi/starter/free-download

Заполните форму, введенный пароль сохраните. В качестве компании я указал один из своих сайтов, телефон реальный, но мне никто пока что не звонил :). Главное: правильно укажите электронную почту.

На почту вам придёт письмо с ключом — его лучше сохранить. После отправки формы начнётся процесс загрузки.  Если загрузка не начнётся, ссылка будет также в письме.

Письмо вам необходимо — если оно не пришло, проверяйте спам. Если вообще не пришло, регистрируйтесь заново на другой ящик. Я регистрировался дважды на разные email — один на доменную почту, второй на Gmail.

Оба раза всё было ок. Вот как выглядит письмо:

2. Установка Delphi Community Edition

Запускаем установщик, у меня файл назывался: radstudio_10_3_3_esd7899_nt.

exeСоглашаемся с условиями использования: На этом экране я нажал кнопку Оptions — открылось окно, где можно изменить каталог установки и настройки: ярлык на рабочем столе и установка для всех пользователей. Эти опции я оставил включёнными, вы можете убрать.

Каталог установки можно оставить этот. После нажатия Ок на форме Options возвращаемся на окно с соглашением, жмём Next. Здесь выбираем вариант I already have a serial number («У меня есть серийный номер».

Он есть у вас в почте) и нажимаем Install. Начнётся установка, через несколько минут появилось окно для ввода данных регистрации (серийного номера):

Введите Serial number из письма в почте и нажмите Register.

Программа начнёт связываться с серверами Embarcadero и попытается зарегистрировать вашу копию. На одном компьютере у меня всё произошло мгновенно, на другом с третьей попытки.

Судя по сообщениям, проблема была с серверами Embarcadero. Если всё получилось, переходите к следующему разделу статьи. Если нет, попробуйте сделать следующее.

На скриншоте ниже кликните по ссылке «Trouble connection…»

Cистема предложит пройти на web-регистрацию. Соглашаемся — жмём Yes (или копируем предложенный URL в браузер). Откроется окно регистрации через сайт. Жмёте Download, чтобы скачать файл с лицензией в формате txt. Его нужно будет использовать: в диалоге Product Registration нажать Advanced. Затем Import в следующем окне и импортировать файл лицензии. Надеюсь, у вас всё получится.

3. Выбор платформ для установки

Далее установщик предложить выбрать платформы для разработки.Я выбрал Windows 32, Windows 64 и Android: В рамках наших ближайших статей мы будем рассматривать разработку под Windows и Android, поэтому  я выбрал только их.

Для работы с экосистемой Apple вам понадобится платный ключ разработчика, поэтому ставить iOS и macOS имеет смысл, если вы действительно планируете этим заниматься. В любом случае можно будет доустановить недостающие компоненты позже. Жмём Install и наблюдаем за загрузкой У меня процесс занял минут 30.

Ждём до победного. После окончания установки жмём Start Working.

4. Первичная настройка среды разработки Delphi

Появится окно с Delphi.

Можно выбрать тему, я люблю светлую, поэтому нажал на LightПервое окно при загрузке Delphi Жмём Next, на следующем экране можно подключить систему контроля версий (пока можно пропустить), включить автосохранение файлов и оформления темы (рекомендую поставить эту галку), а также выбрать папку для сохранения проектов по умолчанию. Я рекомендую создать какую-либо папку в корне, например C:\work После окончания настройки жмите Get Started.

5. Создание проекта программы на Delphi под Windows

Откроется Welcome Page, на ней нажмите Create Windows VCL Application, чтобы создать простое приложение под Windows.

(Также можно это сделать с помощью верхнего меню File → New → Windows VCL Application — Delphi)Откроется окно нового проекта, где уже будет размещена Form1 — главное окно вашего приложения.

Нажмите Save All (иконка с дискетами в левом верхнем меню), чтобы сохранить проект.В рабочем каталоге создайте папку HelloWorld, зайдите в неё. Сохраните файл Unit1.pas (это единственный модуль вашего приложения.

Рекомендуется давать им более осмысленные названия, но сейчас мы этот шаг пропустим).Затем сохраните файл проекта, назвав его HelloWorld.dproj (так будет называться ваше приложение, в том числе запускаемый exe-файл). После сохранения имя запускаемого файла отобразится справа в окне проектов:

6. Создание интерфейса приложения

Теперь займёмся главным окном приложения. Поменяйте заголовок окнаСлева в окне Object Inspector найдите свойство Caption у вашей Form1 и напишите там: «Моя первая программа на Delphi». Обратите внимание, что одновременно будет меняться заголовок окнаДобавим кнопку на форму.

Найдите в правом нижнем углу экрана палитру компонентов и нажмите на Standart — вам откроется набор популярных компонентов. Два раза щёлкните на компоненте TButton — кнопка появится в самом центре формы. Вы можете изменить её размеры, ухватив за уголок и протянув в нужном направлении.

Зажав левую кнопку мыши на элементе Button1 вы можете перетащить его на любой место формы. Поэкспериментируйте с этим,  сделав кнопку покрупнее. В инспекторе объектов (по аналогии с изменением заголовка Form1) поменяйте Caption кнопки на «Нажми меня!«.

Окно проекта в Delphi будет выглядеть примерно так: Обращаю ваше внимание, что визуальная часть нашей программы уже готова. Оцените мощь Delphi, создать форму рабочего приложения можно за несколько минут! Самое время написать свою первую строку кода.

Щёлкните два раза на кнопку Button1 (Button1 — имя объекта, на самой кнопке уже написано «Нажми меня!«). Откроется редактор кода. Delphi автоматически создало событие, которое произойдёт после щелчка по кнопке TForm1.Button1Click.

Всё, что вам нужно: вписать свой код между begin и end; в теле процедуры ShowMessage('Привет, мир!');

ShowMessage('Привет, мир!');

Редактор автоматически сделает отступ, чтобы код процедуры был заметнее. Рекомендую следовать стандарту и оставить оформление таким же. Нажмите F9.

Или зеленую кнопку:Если вы ввели код правильно (или скопировали его с этой страницы), программа скомпилируется и запуститься. Проверьте работу кнопки: вы увидите ваше всплывающее сообщение. Поздравляю! Вы написали свою первую программу под Windows на Delphi. Попробуйте изменить текст сообщения и надпись на кнопке и запустите программу заново. Переключаться между кодом программы и формой можно с помощью переключателя в правом нижнем углу окна модуля

8. Релиз приложения и размер exe-файла

Полученный исполняемый файл для Windows называется HelloWorld.exe, он находится в папке c:\work\HelloWorld\Win32\Debug\ (у вас путь к файлу может отличаться) и весит около 12 Mb.Многовато для простого приложения.

Размер связан с двумя факторами:1) Библиотеки Delphi вшиваются в файл с программой, что позволяет передавать просто сам exe-файл, дополнительных библиотек не нужно. Я просто отправил файл товарищу, у которого Delphi не установлено — приложение заработало сразу.

2) Сейчас мы компилируем программу в режиме отладки (Debug), который добавляет в исполняемый файл отладочную информацию и библиотеки. Попробуем уменьшить размер файла за счет смены режима. В окне проекта (справа вверху) нажмите Build Configurations и дважды щёлкните на режим Release.Запустить приложение, нажав F9.

Программа запустится как обычно, но при этом в папке проекта создастся подкаталог Release, где будет находиться новый HelloWorld.exe. Его размер составит около 2,5 Mb, что существенно меньше. Этот файл я также проверил на другом компьютере — всё отлично заработало.

Именно его вам и стоит передавать заказчику или выкладывать (предварительно сделав установщик setup, но это тема отдельной статьи). Надеюсь, создавать программу на Delphi вам понравилось! В следующей статье мы разберём создание мультиплатформенного приложения, которое будет работать на Windows и Android.

Источник: https://progtips.ru/instrumenty-programmista/ustanovka-delphi-community-edition-besplatnaya-versiya-i-razrabotka-pervogo-prilozheniya-pod-windows.html

Уроки 114 – 120§4.13. Графика в объектно-ориентированных языках программирования

Разработка графического редактора в Delphi

| Информатика и информационно-коммуникационные технологии | Планирование уроков и материалы к урокам | 10 классы | Планирование уроков на учебный год (по учебнику Н.Д. Угриновича, профильный уровень) | §4.13. Графика в объектно-ориентированных языках программирования

Холст

Перо. Кисть

Цвет

Графические методы

Рисование текста

Проект «Графический редактор». Создание проекта «Графический редактор» на языке Turbo Delphi

Проект «Графический редактор». Создание программных кодов обработчиков событий рисования закрашенных объектов

Проект «Треугольник». Создание графического интерфейса проекта на языке Turbo Delphi

Проект «Треугольник». Создание обработчиков событий

Компьютерный практикум

Создание проекта «Графический редактор» на языке Turbo Delphi

Создать проект, который позволит рисовать линии, закрашенные прямоугольники и закрашенные окружности. Ввод координат осуществлять путем нажатия и отпускания кнопки мыши на графическом поле. Для рисования фигур использовать меню и панель инструментов. Обеспечить возможность открытия и сохранения графических файлов.

1. Поместить на форму (рис. 4.38):

• графическое поле Image1, которое будет использоваться в качестве области рисования;

• четыре надписи Label 1, Labe 12, Labe 13 и Label4 для вывода координат; • четыре надписи для вывода имен координат;

меню MainMenul для создания пунктов меню Файл и Графические примитивы;

• панель инструментов ToolBar1 для создания четырех кнопок, обеспечивающих рисование графических примитивов и очистку поля рисования;
• коллекцию изображений ImageList1 для хранения изображений, которые будут помещены на кнопки панели инструментов;
• диалог ColorDialog1, который позволяет выбрать цвет с использованием диалогового окна Цвет;
• диалог OpenDialog1, который позволяет выбрать файл для открытия с использованием диалогового окна Открыть;
• диалог SaveDialog1, который позволяет выбрать имя файла при его сохранении с использование диалогового окна Сохранить.

Рис. 4.38. Графический интерфейс проекта «Графический редактор»

Элементы управления MainMenu1, ImageList1, OpenDialog1, SaveDialog1 и ColorDialog1 будут видны только в процессе создания проекта.

2. Объявить переменные, которые будут содержать координаты двух точек на холсте.
var X1: integer; Y1: integer; X2: integer;

Y2: integer;

3.

Создать программные коды обработчиков событий, которые обеспечивают запоминание и вывод на надписи координат после нажатия (событие ImageMouseDown) и отпускания (событие ImageMouseUp) кнопки мыши на графическом поле.
procedure TForml.ImageMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);

begin

X1:=X; Y1:=Y; Label1.Caption := IntToStr(X1); Label2.Caption := IntToStr (Y1);

end;

procedure TForm1.ImageMouseUp(Sender: TObject;

Button: TMouseButton; Shift: TShiftState; X, Y: Integer);

begin

X2:=X; Y2:=Y; Label3.Caption := IntToStr(X2); Label4.Caption := IntToStr (Y2);

end;

Создадим меню графического редактора, для чего используем элемент управления MainMenu1:

ФайлГрафические примитивы
ОткрытьЛиния
СохранитьЗакрашенный прямоугольник
Закрашенная окружность
Очистить

4. Разместить на форме элемент управления MainMenu1.

5. Осуществить двойной щелчок по элементу управления MainMenu1.

В появившемся диалоговом окне Form1.MainMenu1 редактора меню создать меню проекта (рис. 4.39).

Рис. 4.39. Редактор меню

6. Двойным щелчком по пунктам меню последовательно создать заготовки обработчиков событий рисования графических примитивов. Ввести программный код обработчика события рисования линии.
procedure TForm1.

N2Click(Sender: TObject);
begin Image1.Canvas.Pen.Width := 3; ColorDialogl.Execute; Image1.Canvas.Pen.Color := ColorDialogl.Color; Image1.Canvas.MoveTo(X1,Y1); Image1.Canvas.

LineTo(X2,Y2);

end;

Следующая страницаПроект «Графический редактор». Создание программных кодов обработчиков событий рисования закрашенных объектов

Cкачать материалы урока

Источник: https://xn----7sbbfb7a7aej.xn--p1ai/informatika_10_ugr_prof/informatika_materialy_zanytii_10_114_ugr_prof_15.html

Написание своих компонентов для Delphi. Часть 4. Простейший визуальный компонент

Разработка графического редактора в Delphi
Перейти к содержимому

В предыдущих статьях, посвящённых созданию собственных компонентов мы рассматривали разработку новых визуальных компонентов только на основе уже существующих. Теперь мы переходим к написанию визуальных компонентов с нуля.

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

Немного теории

Как это ни странно прозвучит, но основное и, пожалуй, единственное отличие визуальных компонентов от не визуальных состоит в том, что:

  • Их можно увидеть на экране компьютера в окне приложения;
  • Визуальные компоненты могут взаимодействовать с устройствами ввода.

Однако, если первое отличие является очевидным и свойственно для всех визуальных компонентов, то со вторым всё значительно сложнее.

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

В качестве базовых классов при создании визуального компонента с нуля чаще всего используются:

  • TWinControl – базовый класс для всех «оконных» элементов управления (кнопки, календари, тестовые поля и т.д.). Обеспечивает наиболее широкий функционал, включая поддержку ввода с клавиатуры, размещение внутри себя других компонентов и т.д.;
  • TGraphicControl – этот класс служит основой для «графических» компонентов. Такие компоненты способны только отображать информацию на экране или обрабатывать простейшие события, связанные с мышью, изменением размера и т.п.

Оба вышеназванных класса являются потомками класса TControl, который включает общий функционал для всех визуальных компонентов в том числе базовые механизмы, связанные с размещением на форме, работой с устройствами ввода и внешним видом.

Использовать TControl в прикладной разработке не рекомендуется так как алгоритмы работы, связанные с реализацией собственных «оконных» или «графических» компонентов, приходится переопределять крайне редко (обычно при написании собственных библиотек, и то в исключительных случаях). Обычно возможности стандартных TWinControl и TGraphicControl вполне достаточны для решения самых различных задач.

Класс TControl является наследником класса TComponent. Следовательно, всё, что было рассмотрено во второй и третьей частях относительно не визуальных компонентов также справедливо и для визуальных. Потому мы не станем рассматривать вопросы создания компонентов как таковых и обработки событий, а сразу перейдём к визуализации и взаимодействию с устройствами ввода.

Важно отметить, что возможности базовых классов для визуальных компонентов в целом весьма широки. Поэтому в статьях, посвящённых их написанию возможно привести лишь основные принципы разработки на простых примерах.

Для более глубокого изучения рекомендуется документация Embarcadero и подробные руководства по программированию на Delphi рассчитанные на профессиональную разработку (в частности книги Д.Осипова).

Простейший визуальный компонент

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

Цвет «индикатора» определяется при помощи свойства Color, которое имеет тип данных TColor. Пусть по умолчанию цвет «индикатора» будет зелёный.

private fColor: TColor; procedure SetColor(NewColor:TColor); public . . . property Color:TColor read fColor write SetColor default clGreen;

    procedure SetColor(NewColor:TColor);    property Color:TColor read fColor write SetColor default clGreen;

Так как функционал компонента минимален, реализуем его на основе класса TGraphicControl. В работе мы будем использовать следующие члены этого класса:

  • Canvas (тип TCanvas) – свойство ответственное за канву для рисования;
  • Paint – метод который выполняет непосредственно отображение компонента на экране (отрисовку);
  • Refresh – метод который выполняет обновление компонента, включая его повторную отрисовку (в ходе выполнения вызывается метод Paint);

Зададим в конструкторе начальные значения ширины, высоты и цвета.

constructor TSimpleLEDIndicator.Create(AOwner: TComponent); begin inherited Create(AOwner); Height := 10; Width := 50; fColor := clGreen; end;

constructor TSimpleLEDIndicator.Create(AOwner: TComponent);  inherited Create(AOwner);

Далее создадим метод, который будет осуществлять отрисовку.

Здесь мы сталкиваемся с коренным отличием от того, что рассматривали в первой части. Дело в том, что, если новый компонент создаётся на основе уже существующего, за его отрисовку отвечает в первую очередь класс предок. При желании внешний вид такого компонента можно изменить, но суть остаётся прежней. Когда же компонент пишется с нуля его необходимо отрисовать вручную.

Поэтому нам придётся полностью реализовать отображение «индикатора» на экране. В данном случае нам потребуется при помощи свойства Canvas, нарисовать прямоугольник и заполнить его цветом.

procedure TSimpleLEDIndicator.DrawIndicator(NewColor: TColor); begin Canvas.Pen.Style := psSolid; Canvas.Brush.Style := bsSolid; Canvas.Brush.Color := NewColor; Canvas.Rectangle(0, 0, Width, Height); end;

procedure TSimpleLEDIndicator.DrawIndicator(NewColor: TColor);  Canvas.Pen.Style := psSolid;  Canvas.Brush.Style := bsSolid;  Canvas.Brush.Color := NewColor;  Canvas.Rectangle(0, 0, Width, Height);

У компонентов на основе TGraphicControl отрисовка производится при вызове метода Paint. Поэтому вызов только что созданного метода отрисовки в метод Paint.

procedure TSimpleLEDIndicator.Paint; begin DrawIndicator(fColor); end;

procedure TSimpleLEDIndicator.Paint;

Обратите внимание, что в метод отрисовки передаётся значение цвета из поля fColor, которое хранит значение свойства Color. Таким образом, для того чтобы перекрасить «индикатор» в новый цвет достаточно просто перерисовать компонент при помощи метода Refresh.

Для того чтобы это осуществить значение свойства Color устанавливается посредством метода SetColor:

procedure TSimpleLEDIndicator.SetColor(NewColor: TColor); begin fColor := NewColor; Refresh; end;

procedure TSimpleLEDIndicator.SetColor(NewColor: TColor);

В этом методе вначале присваивается новое значение цвета компонента, а затем вызывается его обновление.

В завершение добавим поддержку события OnClick.

Как уже говорилось выше, непосредственно поддержка событий мыши реализована в классе TControl, но свойства ответственные за эти события в нём объявлены как защищённые (protected). Это избавляет классы наследники от поддержки «лишних» событий, но требует некоторых дополнительных действий при реализации.

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

public . . . property OnClick;

Теперь наш компонент полностью готов. Для целостности картины, ниже приведён полный исходный код его модуля:

unit SimpleLED; interface uses System.SysUtils, System.Classes, Vcl.Controls, Vcl.Graphics; type TSimpleLEDIndicator = class(TGraphicControl) private fColor: TColor; procedure SetColor(NewColor: TColor); protected procedure Paint; override; procedure DrawIndicator(NewColor: TColor); public constructor Create(AOwner: TComponent); override; property Color: TColor read fColor write SetColor default clGreen; property OnClick; end; procedure Register; implementation procedure Register; begin RegisterComponents('Samples', [TSimpleLEDIndicator]); end; { TSimpleLEDIndicator } constructor TSimpleLEDIndicator.Create(AOwner: TComponent); begin inherited Create(AOwner); Height := 10; Width := 50; fColor := clGreen; end; // Алгоритм отрисовки компонента procedure TSimpleLEDIndicator.DrawIndicator(NewColor: TColor); begin Canvas.Pen.Style := psSolid; Canvas.Brush.Style := bsSolid; Canvas.Brush.Color := NewColor; Canvas.Rectangle(0, 0, Width, Height); end; // Собственно отрисовка компонента procedure TSimpleLEDIndicator.Paint; begin DrawIndicator(fColor); end; // Перерисовка компонента при изменении цвета procedure TSimpleLEDIndicator.SetColor(NewColor: TColor); begin fColor := NewColor; Refresh; end; end.

  System.SysUtils, System.Classes, Vcl.Controls, Vcl.Graphics;  TSimpleLEDIndicator = class(TGraphicControl)    procedure SetColor(NewColor: TColor);    procedure Paint; override;    procedure DrawIndicator(NewColor: TColor);    constructor Create(AOwner: TComponent); override;    property Color: TColor read fColor write SetColor default clGreen;  RegisterComponents('Samples', [TSimpleLEDIndicator]);constructor TSimpleLEDIndicator.Create(AOwner: TComponent);  inherited Create(AOwner);// Алгоритм отрисовки компонентаprocedure TSimpleLEDIndicator.DrawIndicator(NewColor: TColor);  Canvas.Pen.Style := psSolid;  Canvas.Brush.Style := bsSolid;  Canvas.Brush.Color := NewColor;  Canvas.Rectangle(0, 0, Width, Height);// Собственно отрисовка компонентаprocedure TSimpleLEDIndicator.Paint;// Перерисовка компонента при изменении цветаprocedure TSimpleLEDIndicator.SetColor(NewColor: TColor);

Пример использования

Посмотрим на созданный нами визуальный компонент в действии.

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

Компонент будем создавать при отображении формы:

procedure TForm1.FormShow(Sender: TObject); begin Led := TSimpleLEDIndicator.Create(Form1); Led.Parent := Form1; Led.OnClick := LedClick; end;

procedure TForm1.FormShow(Sender: TObject);  Led := TSimpleLEDIndicator.Create(Form1);

При создании компонента для его события OnClick сразу же назначается обработчик, в котором «индикатор» будет перекрашиваться в красный цвет:

procedure TForm1.LedClick(Sender: TObject); begin Led.Color := clRed; end;

procedure TForm1.LedClick(Sender: TObject);

Так выглядит компонент после создания:

А, так он выглядит после клика на нём левой кнопкой мыши.

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

Источник: https://streletzcoder.ru/napisanie-svoih-komponentov-dlya-delphi-chast-4-prosteyshiy-vizualnyiy-komponent/

Ваш педагог
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: