Компьютерное проектирование интерфейса пользователя

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

Рубрика Программирование, компьютеры и кибернетика
Вид методичка
Язык русский
Дата добавления 24.10.2012
Размер файла 788,7 K

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Краткие теоретические сведения.

Компоненты Memo является окнами редактирования многострочного текста. Они так же, как и окно Edit, снабжены многими функциями, свойственными большинству редакторов. В них предусмотрены типичные комбинации «горячих» клавиш: Ctrl-C -- копирование выделенного текста в буфер обмена Clipboard (команда Copy), Ctrl-X -- вырезание выделенного текста в буфер Clipboard (команда Cut), Ctrl-V -- вставка текста из буфера Clipboard в позицию курсора (команда Paste), Ctrl-Z -- отмена последней команды редактирования.

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

Свойства Alignment и WordWrap определяют выравнивание текста и допустимость переноса длинных строк. Установка свойства ReadOnly в true задает текст только для чтения.

Основное свойство Memo -- Lines, содержащее текст окна в виде списка строк и имеющее тип TStrings. Начальное значение текста можно установить в процессе проектирования, нажав кнопку с многоточием около свойства Lines в окне Инспектора Объектов.

Во время выполнения приложения вы можете заносить текст в окно редактирования с помощью методов свойства Lines типа TStrings. Доступ к отдельной строке текста вы можете получить с помощью свойства Strings[Index: Integer]. Индексы, как и везде в Delphi, начинаются с 0. Так что Memo1.Lines.Strings[0] -- это текст первой строки. Свойство только для чтения Count указывает число строк в тексте. Для очистки текста в окне надо выполнить процедуру Clear. Этот метод относится к самому окну, а не к его свойству Lines.

Для занесения новой строки в конец текста окна редактирования можно воспользоваться методами Add или Append свойства Lines. Для загрузки текста из файла применяется метод LoadFromFile. Сохранение текста в фале осуществляется методом SaveToFile.

В Delphi имеется два компонента, представляющие меню: MainMenu -- главное меню, и PopupMenu -- всплывающее меню. Оба компонента расположены на странице Standard. Эти компоненты имеют много общего. Это невизуальные компоненты, т.е. место его размещения на форме в процессе проектирования не имеет никакого значения для пользователя -- он все равно увидит не сам компонент, а только меню, сгенерированное им.

Основное свойство компонента -- Items. Его заполнение производится с помощью Конструктора Меню, вызываемого двойным щелчком на компоненте или нажатием кнопки с многоточием рядом со свойством Items в окне Инспектора Объектов.

Контекстное меню (PopUpMenu) привязано к конкретным компонентам. Оно всплывает, если во время, когда данный компонент в фокусе, пользователь щелкнет правой кнопкой мыши. Оконные компоненты: панели, окна редактирования, а также метки и др. имеют свойство PopupMenu, которое по умолчанию пусто, но куда можно поместить имя того компонента PopupMenu, с которым будет связан данный компонент.

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

Компоненты OpenDialog -- диалог «Открыть файл» и SaveDialog -- диалог «Сохранить файл как...», пожалуй, используются чаще всего, в большинстве приложений. Основное свойство, в котором возвращается в виде строки выбранный пользователем файл, -- FileName. Типы искомых файлов, появляющиеся в диалоге в выпадающем списке Тип файла, задаются свойством Filter. В процессе проектирования это свойство проще всего задать с помощью редактора фильтров, который вызывается нажатием кнопки с многоточием около имени этого свойства в Инспекторе Объектов. Свойство FilterIndex определяет номер фильтра, который будет по умолчанию показан пользователю в момент открытия диалога.

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

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

Кнопки SpeedButton имеют возможность отображения пиктограмм и могут использоваться как обычные управляющие кнопки или как кнопки с фиксацией нажатого состояния. Изображение на кнопке задается свойством Glyph.

Особенностью кнопок SpeedButton являются свойства GroupIndex (индекс группы), AllowAllUp (разрешение отжатого состояния всех кнопок группы) и Down (исходное состояние -- нажатое). Если GroupIndex = 0, то кнопка ведет себя так же, как Button и BitBtn. При нажатии пользователем кнопки она погружается, а при отпускании возвращается в нормальное состояние. В этом случае свойства AllowAllUp и Down не влияют на поведение кнопки.

Если Grouplndex > 0 и AllowAllUp = true, то кнопка при щелчке пользователя на ней погружается и остается в нажатом состоянии. При повторном щелчке пользователя на кнопке она освобождается и переходит в нормальное состояние (именно для того, чтобы освобождение кнопки состоялось, необходимо задать AllowAllUp = true). Если свойство Down во время проектирования установлено равным true, то исходное состояние кнопки -- нажатое.

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

Состояние кнопки во время выполнения можно определить по значению свойства Down: если значение равно true, то кнопка нажата. Во время события OnClick значение Down уже равно тому состоянию, которое примет кнопка в результате щелчка на ней.

Ход работы

1. Поместить на форму компонент Panel, присвоить свойству Align значение alTop. Удалить строку из свойства Caption.

2. Поместить на Panel четыре компонента Button (кнопка) и присвоить их свойству Caption соответственно значения &Open, &Save, Save &As…, E&xit. Определить свойство Font для панели из кнопок как «жирный»

3. Изменить заголовок формы (свойство Caption) - например, My Editor

4. Поместить на форму компонент Memo и установить его свойства следующим образом:

Align - alClient, Scroll bar - ssBoth, Lines (убрать текст из свойства, выполнив щелчок на свойстве Lines, и затем на кнопке с тремя точками).

5. Поместить на форму компонент OpenDialog, который находится на странице Dialog и присвоить его свойствам значения:

DefaultExt

TXT

Title

Открыть файл

Options.ofFileMustExist

True

Options.ofNoReadOnlyReturn

True

6. Открыть окно редактора фильтров, для чего дважды щелкнуть на свойстве Filter. Заполнить две первые строки в колонке Имя фильтра названиями фильтров: текстовые файлы и все файлы, а в колонке Фильтр ввести соответствующие маски: *.txt и *.*

7. Поместить на форму компонент SaveDialog и присвоить ему значения:

DefaultExt

TXT

Title

Сохранить файл

Options.ofOverwritePrompt

True

Options.ofNoReadOnlyReturn

True

8. Открыть окно редактора фильтров, для чего дважды щелкнуть на свойстве Filter. Заполнить две первые строки в колонке Имя фильтра названиями фильтров: текстовые файлы и все файлы, а в колонке Фильтр ввести соответствующие маски: *.txt и *.*

9. Создадим обработчик события OnClick для кнопки Open:

with OpenDialog1 do

if execute then

begin

memo1.Lines.LoadFromFile(FileName);

Memo1.Modified:=false;

Caption:='My Editor -'+ExtractFileName(FileName);

SaveDialog1.FileName:=FileName;

FileName:='';

end;

10. Создадим обработчик OnClick для кнопки Save As..:

with SaveDialog1 do

if Execute then

begin

memo1.Lines.SaveToFile(FileName);

Memo1.Modified:=false;

Caption:='My Editor -'+ExtractFileName(FileName);

end;

11. Создадим обработчик OnClick для кнопки Save:

if SaveDialog1.FileName='' then

Button3Click(Sender)

else

begin

Memo1.Lines.SaveToFile(SaveDialog1.Filename);

Memo1.Modified:=false;

end;

12. Создадим обработчик события OnClick для кнопки Exit:

Case MessageDlg('Закрыть редактор?', mtConfirmation,mbYesNoCancel,0) of

idYes: form1.Close;

idNo:;

idCancel:;

end;

13. Расположить на форме компонент MainMenu и создать пункты меню следующим образом:

Редактор меню вызывается двойным щелчком по компоненту. Для создания разделительной черты в свойстве Caption, необходимо ввести символ «-» (Минус)

14. Каждый пункт меню кроме New свяжем с уже существующим методом OnClick для соответствующих кнопок. Например, кнопка Open имеет имя Button1, поэтому на странице Events окна Object Inspector для пункта меню Open вы щелкните на клавише открытия списка, расположенной рядом с OnClick и выберите Button1.Click.

15. В обработчик события OnClick пункта меню New поместим код:

if Memo1.Modified then

case MessageDlg('Oaee'+ExtractFileName(SaveDialog1.FileName)+

'aue eciaiai. Nio?aieou?',mtConfirmation,mbYesNoCancel,0) of

idYes:button2Click(Sender);

idNo:;

idCancel:Exit

end;

memo1.Clear;

SaveDialog1.FileName:='';

Caption:='My Editor';

16. Двойным щелчком отредактируем компонент-меню и добавим еще один пункт меню Color, и в нем два подпункта ColorBackGround и ColorText.

Поместим на форму компонент ColorDialog, находящийся в палитре Dialogs.

В обработчик пункта меню ColorBackGraund вставить следующий код:

with ColorDialog1 do

if Execute then

memo1.Color:=color;

В обработчик пункта меню ColorText вставить следующий код:

with ColorDialog1 do

if Execute then

memo1.Font.Color:=color;

17.Создать для формы обработчик события OnCloseQuery:

if Memo1.Modified then

case MessageDlg('Файл'+ExtractFileName(SaveDialog1.FileName)+

'был изменен. Сохранить?',mtConfirmation,mbYesNoCancel,0) of

idYes: button2Click(Sender);

idNo:;

idCancel:CanClose:=false;

end;

18. Установим на панели три кнопки SpeedButton. В свойства Caption этих кнопок введем буквы Ж(жирный), К(курсив), П (подчеркнутый) соответствующим образом изменив тип начертания в свойстве Font.

Выделив все три кнопки установим их свойство AllowAllUp установим True. Также установим следующие свойства:

Компонент

GroupIndex

Tag

SpeedButton1

1

0

SpeedButton2

2

1

SpeedButton3

3

2

В обработчик события OnClick для кнопки Ж введем:

with sender as TSpeedButton do

begin

if down then

memo1.Font.Style:=memo1.Font.Style+[TFontStyle(tag)]

else

memo1.Font.Style:=memo1.Font.Style-[TFontStyle(tag)]

end;

События OnClick для оставшихся двух кнопок свяжем с событием SpeedButton1Click при помощи Инспектора объектов, как в случае с пунктами меню.

17. Поместить на панель еще одну кнопку SpeedButton. В свойство Caption ничего не вводить. Выполнить два щелчка на свойстве Glyph. В появившемся диалоговом окне выбрать команду Load и из каталога Program Files/Common Files/Borland Shared/Images/Buttons загрузим файл Font.bmp или любой другой.

В обработчике OnClick написать следующий код:

with fontdialog1 do

if execute then memo1.Font:=font;

18. Компонент Memo позволяет хранить информацию только в формате txt, поэтому при закрытии файла все элементы форматирования пропадут. Поэтому мы заменим компонент на позволяющий сохранять текст в формате rtf. Для этого необходимо нажать Alt+F12. На экране появится окно с содержимым файла Unit1.dfm (данный файл ресурсов формы содержит все настройки формы, сделанные с помощью Инспектора объектов). Найдите в этом файле описание компонента object Memo1: T Memo и замените его на Memo1: TRichEdit. Затем снова нажмите Alt+F12. При компиляции согласитесь с тем, что вам предложит Delphi.

19. Поместим на панель еще три кнопки SpeedButton, которые будут отвечать за выравнивание текста по левому краю, по правому краю и по центру. Зададим их свойства следующим образом:

Компонент

GroupIndex

Tag

SpeedButton5

4

0

SpeedButton6

4

1

SpeedButton7

4

2

В свойствах Caption введем «<», «>» и «=» соответственно.

Для 1-й кнопки создадим обработчик OnClick:

with sender as tspeedbutton do

memo1.Paragraph.Alignment:=TAlignment(tag)

Обработчики этого события для остальных кнопок свяжем с SpeedButton5Click

20. Установить на форму компонент StatusBar, находящийся в палитре Win32. Два раза щелкнуть на компоненте, чтобы перейти в окно редактирования StatusBar. В окне редактирования три раза нажать кнопку Добавить, чтобы получить три панели на компоненте. На первых двух будет отображаться текущее состояние клавиш CapsLock и NumLock. На третьей - системное время.

21. Добавить на форму компонент Timer, расположенный на палитре System. добавим в список глобальных переменных KS: Tkeyboardstate

Создать обработчик OnTimer:

GetKeyBoardState(KS);

with StatusBar1 do

begin

if KS[VK_Capital]=1 then panels[0].Text:='CAP' else panels[0].Text:='';

if KS[VK_NumLock]=1 then panels[1].Text:='Num' else panels[1].Text:='';

StatusBar1.Panels[2].Text:=TimeToStr(Time);

end;

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

22. Создадим контекстное меню. Установить на форму компонент PopupMenu. Создадим пункты - Cut, Copy, Paste. В обработчики событий OnClick ввести соответственно следующий код:

Для пункта Copy: Memo1. CopyToClipboard;

Для пункта Cut: Memo1. CutToClipboard;

Для пункта Paste: Memo1.PasteFromClipboard;

В свойстве Memo1 PopUpMenu выберем PopUpMenu1

Для того, чтобы недоступные команды (если текст не выделен или буфер пуст) выделялись серым цветом сделаем следующее. В список uses добавим модуль Clipbrd (он обеспечивает доступ к объекту Clipboard - буферу обмена).

Создадим обработчик OnPopUp для PopUpMenu

copy1.Enabled:=memo1.SelLength>0;

cut1.Enabled:=memo1.SelLength>0;

paste1.Enabled:=Clipboard.HasFormat((CF_TEXT);

Выполнить самостоятельно:

Создать кнопку для Зачеркнутого шрифта (свойство Style - fsStrikeOut, т.е Tag=3)

Сделать всплывающие подсказки для всех кнопок.

Добавить на панель кнопку для добавления маркеров. В обработчике OnClick для новой кнопки поместить код:

if (sender as TSpeedButton).down then

memo1.Paragraph.Numbering:=nsBullet else

memo1.Paragraph.Numbering:=nsNone

Используя свойство ShortCut пунктов меню назначить им комбинации горячих клавиш, например - Open - Ctrl+O, Save - Ctrl+S и т.п.

Создать кнопку Undo, при нажатии которой будет отменено последнее действие. В обработчике кнопки поместить код:

Memo1.Undo.

Если отменять нечего, кнопка должна быть недоступной (для этого используем свойство Memo1.CanUndo).

6. Добавить в контекстное меню пункты Выделить все (метод SelectAll) и Удалить (ClearSelection). Если операции недоступны, пункты должны быть неактивными. В первом случае можно использовать значение memo1.text<>''.

7. Создать пункт меню О программе.

Создать новую форму. Изменить ее заголовок. Поместить на нее компонент Memo. Установить свойство компонента ReadOnly в True. Щелкнуть два раза по свойству Lines и ввести текст. Изменить произвольным образом свойства Color и Font компонента Memo.

В обработчике события OnClick пункта меню О программе написать код:

Form2.showmodal

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

Лабораторная работа №9. Создание простейшего графического редактора

Цель: Изучение компонентов Image, ScrollBox, компонетов-диалогов, а также обработки событий мыши.

Краткие теоретические сведения.

Компонент Image представляют собой некоторую ограниченную поверхность с канвой, на которую можно заносить изображения. Свойства и методы работы с канвой описаны в Л/р№4.

Компонент Image используется для отображения графики: пиктограмм, битовых матриц и метафайлов. Для этого служит его свойство Picture -- объект типа TPicture. Если установить свойство AutoSize в true, то размер компонента Image будет автоматически подгоняться под размер помещенной в него картинки. Если же свойство AutoSize установлено в false, то изображение может не поместиться в компонент или, наоборот, площадь компонента может оказаться много больше площади изображения. Другое свойство -- Stretch позволяет подгонять не компонент под размер рисунка, а рисунок под размер компонента

Свойство -- Center, установленное в true, центрирует изображение на площади Image, если размер компонента больше размера рисунка.

Рассмотрим еще одно свойство -- Transparent (прозрачность). Если Transparent равно true, то изображение в Image становится прозрачным. Это можно использовать для наложения изображений друг на друга.

ScrollBox -- панель с прокруткой. Этот компонент предназначен для создания области, в которой могут размещаться компоненты, занимающие площадь большую, чем сам ScrollBox. Если размеры ScrollBox меньше, чем размещенные компоненты, то появляются полосы прокрутки, которые позволяют пользователю перемещаться по всем размещенным в ScrollBox компонентам.

Свойства компонентов OpenPictureDialog и SavePictureDialog ничем не отличаются от свойств компонентов OpenDialog и SaveDialog. Единственное отличие -- заданное значение по умолчанию свойства Filter в OpenPictureDialog и SavePictureDialog. В этих компонентах заданы следующие фильтры:

All (*.jpg; *.jpeg; *.bmp; *.ico; *.emf; *.wmf)

*.jpg; *.jpeg; *.bmp; *.ico; *.emf; *.wmf

JPEG Image File (*.jpg)

*.jpg

JPEG Image File (*.jpeg)

*.jpeg

Bitmaps (*.bmp)

*.bmp

Icons (*.ico)

*.ico

Enhanced Metafiles (*.emf)

*.emf

Metafiles (*.wmf)

*.wmf

В этих фильтрах перечислены все типы графических файлов, с которыми может работать диалог. Так что вам остается удалить, если хотите, фильтры тех файлов, с которыми вы не хотите работать, добавить, может быть, фильтр «Все файлы (*.*)» и перевести на русский язык названия типов.

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

События мыши

Событие

Описание

onClick

Щелчок мыши на компоненте и некоторые другие действия пользователя

onDblClick

Двойной щелчок мыши на компоненте

onMouseDown

Нажатие клавиши мыши на компоненте. Возможно распознавание нажатой кнопки и координат курсора мыши

onMouseMove

Перемещение курсора мыши над компонентом. Возможно распознавание нажатой кнопки и координат курсора мыши

onMouseUp

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

onStartDrag

Начало процесса «перетаскивания» объекта. Возможно распознавание перетаскиваемого объекта

onDragOver

Перемещение «перетаскиваемого» объекта над компонентом. Возможно распознавание перетаскиваемого объекта и координат курсора мыши

onDragDrop

Отпускание ранее нажатой кнопки мыши после «перетаскивания» объекта. Возможно распознавание перетаскиваемого объекта и координат курсора мыши

onEndDrag

Еще одно событие при отпускании ранее нажатой кнопки мыши после «перетаскивания» объекта. Возможно распознавание перетаскиваемого объекта и координат курсора мыши

onEnter

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

onExit

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

Во все события, связанные с мышью, передаются также координаты курсора X и Y . Эти параметры определяют координаты курсора в клиентской области компонента. Благодаря этому можно обеспечить различную реакцию в зависимости от того, в какой части клиентской области расположен курсор.

Ход работы

1. Создадим новое приложение и сохраним его в своей папке.

2. Разместим на форме 4 компонента Button и зададим им соответствующие названия. Далее разместим на форме компонент ScrollBox (вкладка Additional). Выделив этот компонент, разместим на нем компонент Image. В свойстве Align этого компонента выберем alClient

Разместим на форме также два невизуальных компонента - OpenPictureDialog и SavePictureDialog. В этих компонентах свойство Filter уже содержит фильтры для некоторых типов графических файлов. Все эти фильтры, кроме фильтра для bmp-файлов, надо удалить. В свойстве DefaultExt обоих компонентов введем bmp.

3. Создадим еще одну форму и разместим на ней компоненты Button, Label и SpinEdit следующим образом:

Для компонентов SpinEdit здадим следующие свойства:

SpinEdit1: MinValue = 10, MaxValue = 800, Increment = 10

SpinEdit2: MinValue = 10, MaxValue = 600, Increment = 10

Первый из них будет определять ширину нового изображения в пикселях, второй - высоту.

Для кнопок определим следующие свойства:

Button1: ModalResult=mrOK, Default = True.

Button2: ModalResult=mrCancel, Cancel = True.

4. Вернемся к первой форме. Создадим обработчик OnClick для кнопки New:

with form2 do //устанавливаем значения счетчиков на второй форме равными текущим значениям ширины и высоты компонента Image

begin

spinedit1.Value:=image1.Width;

spinedit2.Value:=image1.Height;

end;

if form2.ShowModal=mrOK then //если на 2-й форме нажата кнопка ОК

with image1 do

begin

picture:=nil; //очистка прежнего изображения и создание нового с нужными размерами

picture.Bitmap.Width:=form2.SpinEdit1.Value;

picture.Bitmap.Height:=form2.SpinEdit2.Value;

canvas.FillRect(canvas.ClipRect); //заливка созданного изображения цветом фона

savepicturedialog1.FileName:='';

form1.Caption:='Image editor';

end;

5. Создадим обработчик OnClick для кнопки Open:

with openpicturedialog1 do

if execute then

begin

image1.Picture.LoadFromFile(filename);

savepicturedialog1.FileName:=filename;

form1.Caption:='Image Editor - '+Filename; //к заголовку окна добавляется название файла

filename:='';

end;

6. Аналогичным образом создаем обработчик для кнопки Save:

with savepicturedialog1 do

if execute then

begin image1.Picture.SaveToFile(filename);

form1.Caption:='Image Editor -'+ filename;

end;

7. Для копки Clear создадим следующий обработчик:

with image1.Canvas do

fillrect(cliprect);

8. Создадим обработчик события OnCreate для формы:

image1.Parent.DoubleBuffered:=true;

with image1 do

begin

picture.Bitmap.Width:=scrollbox1.Width;

picture.Bitmap.Height:=scrollbox1.Height;

canvas.FillRect(canvas.ClipRect);

end;

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

9. Следующим шагом будет реализация возможности рисования линии черного цвета толщиной 1 пиксел. Рисование будет возможным как на созданных, так и на загруженных изображениях.

Для Image1 в обработчике OnMouseDown напишем:

image1.Canvas.MoveTo(x,y); //точка с координатами X,Y становится текущей точкой канвы.

Обработчик OnMouseMove Image1:

if ssleft in shift then //если нажата левая клавиша мышки

image1.Canvas.LineTo(x,y); //рисуется линия от текущей точки до точки с координатами X,Y и эта точка становится следующей текущей

10. Приступим к следующему этапу. Добавим редактору следующие функции: возможность рисования прямых линий, изменения толщины контура, а также возможность выбора цвета фона и контура. Разместим на форме дополнительные компоненты:

GroupBox1 (Capture = `Mode'), внутри которого размещены две кнопки:

SpeedButton1 (Capture='Brush', GroupIndex=1, Down=True) - кнопка для рисования в режиме «free hand»

SpeedButton2 (Capture ='Ruler'GroupIndex=1, Tag=1) - кнопка для рисования в режиме «прямой линии»

ColorGrid1 (свойство GridOrdering=go16x1 - ячейки расположены в один ряд)

SpiEdit1 (MaxValue=22, MinValue=1, Value=1, Increment=3).

Label1 (Capture='Width')

В свойстве Tag будет хранится номер режима рисования.

11. Напишем следующие обработчики:

OnChange для ColorGrid1:

image1.Canvas.Pen.Color:=colorgrid1.ForegroundColor; //цвет контура

image1.Canvas.Brush.Color:=colorgrid1.BackgroundColor; //цвет фона

OnChange для SpiEdit1:

image1.Canvas.Pen.Width:=spinedit1.Value;// задаем толщину линии

12. Теперь обеспечим возможность рисования во втором режиме - прямые линии.

OnClick для SpeedButton1:

image1.Tag:=(sender as tspeedbutton).Tag;

(sender as Tspeedbutton).Down:=true;

Для события OnClick SpeedButton2 выберем из списка SpeedButton1Click

Опишем глобальные переменные:

startPoint,MovePoint:tpoint;

А в секции Implementation (сразу после {$R *.dfm}) опишите следующую процедуру:

procedure drawfigure(p1,p2:tpoint; amode:TPenMode);

begin

with form1.Image1.Canvas do

begin

pen.Mode:=Amode;

MoveTo(p1.X,p1.Y);

lineto(p2.X,p2.Y);

end;

end;

13. Создадим следующие обработчики:

Image1 OnMouseUp:

if startpoint.X=10000 then exit;

if (image1.Tag=1) or

(image1.Tag=2) //это условие нам пригодится в будущем для рисования фигур

then drawfigure(startpoint,point(x,y),pmCopy);

Отредактируем метод Image1MouseMove следующим образом:

if ssleft in shift then

case image1.Tag of

0: image1.Canvas.LineTo(x,y);

1: begin

drawfigure(startpoint,movepoint,pmNotXor);

MovePoint:=Point(x,y);

DrawFigure(StartPoint,MovePoint,pmNotXor);

end;

end;

В метод Image1MouseDown добавьте:

startpoint:=point(x,y);

movePoint:=StartPoint;

Теперь рисование можно производить в двух режимах: в режиме «Brush» рисуются линии произвольной формы, а в новом режиме «Ruler» рисуются прямые линии.

14. Усложним на редактор. Добавим еще один инструмент - Рисование фигур

Добавим в GroupBox1 еще одну кнопку SpeedButton3 (Caption = `Figure').

Параметры кнопки - GroupIndex=1, Tag=2

Разместим также в левом нижнем углу формы панель (Panel1) и поместим на нее компонент Shape1. Установите значения Width и Height для Shape1 на 4 пикселя меньше, чем соответствующие значения компонента Panel1. Разместите компонент Shape1 по центру панели.

Компонент Shape1 позволяет определить, как будет выглядеть нарисованная фигура. В других режимах рисования данный компонент позволяет визуально оценить текущие цвет и толщину линии. При щелчке левой клавиши мышки на компоненте-образце Shape1 изменяется тип фигуры (прямоугольник, прямоугольник с закругленными углами, эллипс) и происходит автоматический переход в режим «Figure». Щелчок правой клавиши по компоненту позволяет перейти в режим рисования фигур с равными измерениями (квадраты и т.п.).

15. Объявим еще две глобальные переменные: dx,dy:integer;

В раздел uses для Unit1 необходимо добавить модуль математических функций Math

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

with form1.Image1.Canvas do

begin

pen.Mode:=Amode;

case form1.Image1.tag of

1: begin

MoveTo(p1.X,p1.Y);

lineto(p2.X,p2.Y);

end;

2: begin

dx:=p2.X-p1.X;

dy:=p2.Y-p1.Y;

if abs(dx)>abs(dy) then dx:=abs(dy)*sign(dx) else dy:=abs(dx)*sign(dy);

case form1.shape1.Shape of

stRectangle:Rectangle(p1.X,p1.Y,p2.X,p2.Y);

stRoundRect:RoundRect(p1.X,p1.Y,p2.X,p2.Y,(p2.Y-p1.X) div 2,(p2.Y-p1.Y) div 2);

stEllipse: Ellipse(p1.X,p1.Y,p2.X,p2.Y);

stSquare:rectangle(p1.X,p1.Y,p1.X+dx,p1.Y+dy);

stRoundSquare:RoundRect(p1.X,p1.Y,p1.X+dx,p1.Y+dy,dx div 2, dy div 2);

stCircle:Ellipse(p1.X,p1.Y,p1.X+dx,p1.Y+dy);

end;

end;

end;

end;

В методе Image1MouseMove замените строку 1:begin на1,2:begin

В метод ColorGrid1Change добавьте:

shape1.Brush.Color:=colorgrid1.BackgroundColor;

shape1.Pen.Color:=ColorGrid1.ForegroundColor;

В метод SpinEdit1Change добавьте:

shape1.Pen.Width:=spinedit1.Value;

16. Создадим обработчик OnMouseDown для Shape1:

procedure TForm1.Shape1MouseDown(Sender: TObject; Button: TMouseButton;

Shift: TShiftState; X, Y: Integer);

var i:integer;

begin

if ssLeft in Shift then

i:=(ord(shape1.Shape)+2) mod 6 else

if odd(ord(Shape1.Shape)) then

i:=ord(shape1.Shape)-1

else i:=ord(shape1.Shape)+1;

shape1.Shape:=tshapetype(i);

speedbutton3.Down:=true;

image1.Tag:=2;

end;

17. Реализуем функцию отмены предыдущей операции. Для этого объявим глобальную переменную oldbitmap:tbitmap;

Отредактируйте метод FormCreate следующим образом:

image1.Parent.DoubleBuffered:=true;

oldbitmap:=tbitmap.Create;

with image1 do

begin

picture.Bitmap.Width:=scrollbox1.Width;

picture.Bitmap.Height:=scrollbox1.Height;

canvas.FillRect(canvas.ClipRect);

oldbitmap.Width:=picture.Bitmap.Width;

oldbitmap.Height:=picture.Bitmap.Height;

end;

end;

Создадим обработчик OnDestroy для Form1:

oldbitmap.Free;

Установим свойству KeyPreview формы значение true и напишем обработчик OnKeyPress для формы:

if key=#27 then

with image1.Canvas do

copyrect(cliprect,oldbitmap.Canvas,cliprect);

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

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

Разместим на форме компоненты StaticText1 (Caption='FG'), StaticText2 (Caption='BG') (панель Additional) и ColorDialog1. Для компонентов StaticText1 и StaticText2 зададим следующие свойства:

Alignment=taCenter; AutoSize=False; BorderStyle=sbsSunken; Font.Color = cllnactiveCaption.

В секцию imlementation добавьте следующую процедуру:

procedure NewColor (sender:TObject; Acolor:TColor);

begin

with Form1 do

begin

if sender = StaticText1 then

Colorgrid1.ForegroundIndex:=-1 else

Colorgrid1.BackgroundIndex:=-1 ; // скрытие подписей FG и BG на компоненте ColorGrid1

(sender as TStaticText).Color:=AColor;

(sender as TStaticText).Font.Color:=AColor xor $FFFFFF; //цвет текста на компонентах StaticText будет инверсным к фону компонента

ColorGrid1Change(Sender);

end;

end;

19. Напишем обработчик OnMouseDown для StaticText1:

with ColorDialog1 do

begin

if Sender=StaticText1 then

Color:=Shape1.Pen.Color

else Color:=Shape1.Brush.Color;

if execute then //вызов диалогового окна ColorDialog1, если оно было закрыто кнопкой «ОК», Execute=true

NewColor(sender,color);

end;

Для OnMouseDown StaticText2 выберем StaticText1MouseDown

Обработчик OnChange для Colorgrid1 изменим следующим образом:

with colorgrid1 do

begin

if ForegroundIndex <>-1 then

begin

shape1.Pen.Color:=ForegroundColor;

StaticText1.Color:=clBtnFace;

StaticText1.Font.Color:=clInactiveCaption;

end

else

shape1.Pen.Color:=StaticText1.Color;

image1.Canvas.Pen.Color:=shape1.Pen.Color;

if BackGroundIndex<>-1 then

begin

StaticText2.Color:=clBtnFace;

StaticText2.Font.Color:=clInactiveCaption;

end;

if BackGroundIndex<>-1 then

Shape1.Brush.Color:=BackgroundColor

else shape1.Brush.Color:=StaticText2.Color;

image1.Canvas.Brush.Color:=shape1.Brush.Color;

end;

Для выбора цвета линии или цвета фона, не входящего в палитру ColorGrid1, нужно щелкнуть мышкой по компонентам StaticText1 или StaticText2 соответственно, в появившемся диалоговом окне «Цвет» указать новый цвет и нажать ОК. При этом компонент StaticText окрасится в соответствующий текст, а метка «FG»(«BG») из палитры ColorGrid1 исчезнет.

20. Реализуем задание цветов при помощи «пипетки». Внесем изменения в обработчик OnMouseDown для Image1:

with image1.Canvas do

begin

oldbitmap.Canvas.CopyRect(cliprect,image1.Canvas,cliprect);

if ssAlt in Shift then

case Button of

mbLeft:NewColor(Statictext1,Pixels[x,y]);

mbRight:NewColor(StaticText2,Pixels[x,y]);

end;

end;

image1.Canvas.MoveTo(x,y);

startpoint:=point(x,y);

movePoint:=StartPoint;

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

21. Разместим на форме дополнительные компоненты.

Компоненты SpeedButton4 (Cuption='Roller', GroupIndex=1, Tag=3), SpeedButton5 (Cuption='Text', GroupIndex=1, Tag=4), Label2 (Caption='Text'), Label3 (Caption='Style'), Button5 (Caption='Font'), Edit1 (Text=''), FontDialog1 (Options.fdEffects=false - отключение возможности настройки цвета шрифта, а также выбора режима подчеркивания и перечеркивания текста), ComboBox1 и ComboBox2 (Style=csOwnerDeawFixed, Text='', ItemIndex=0).

Для кнопок SpeedButton событие OnClick определите как SpeedButton1Click.

22. Четвертым режимом рисования будет «Валик» (Roller). Этот режим позволяет заливать текущим цветом фона области, ограниченные линиями других цветов. Заливка производится при щелчке мышью внутри нужной области.

Внесем изменение в метод Image1MouseDown:

if ssAlt in Shift then

case Button of

mbLeft:NewColor(Statictext1,Pixels[x,y]);

mbRight:NewColor(StaticText2,Pixels[x,y]);

end

else

if image1.Tag=3 then

FloodFill(x,y,pixels[x,y],fsSurface)

23. Пятый режим - добавление в рисунок текста. В метод Image1MouseDown добавим:

if image1.Tag=3 then

FloodFill(x,y,pixels[x,y],fsSurface)

else if image1.tag=4 then TextOut(x,y,edit1.Text);

Создадим обработчик OnEnter для Edit1:

SpeedButton5.Down:=true;

Image1.Tag:=4;

В метод ColorGrid1Change добавьте операторы:

image1.Canvas.Pen.Color:=shape1.Pen.Color;

image1.Canvas.Font.Color:=shape1.Pen.Color;

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

24. Нажатие кнопки Font позволяет изменить шрифт вставляемой надписи.

Для кнопки Button5 напишем обработчик OnClick

with FontDialog1 do

begin

font:=Image1.Canvas.Font;

if execute then

image1.Canvas.Font:=font;

end;

25. Занесем в свойство Items ComboBox1 6 строк, содержащих числа 0,1,2,3,4,5. В компонент ComboBox2 занесем 8 строк (0,1,2,3,4,5,6,7).

Опишем OnDrawItem для ComboBox1:

with comboBox1.Canvas,Rect do

begin

brush.Color:=clWhite;

Pen.Color:=clBlack;

Pen.Style:=TPenStyle(StrToInt(Combobox1.Items[index]));

MoveTo(Left,(top+Bottom) div 2);

LineTo(Right,(top+Bottom) div 2);

end;

Создадим для ComboBox1 обработчик OnChange:

with ComboBox1, Shape1.pen do

begin

Style:=TPenStyle(StrToInt(Items[ItemIndex]));

Image1.Canvas.Pen.Style:=Style;

ColorGrid1Change(Sender);

end;

Аналогично поступим с ComboBox2:

OnDrawItem для ComboBox2:

with ComboBox2.Canvas do

begin

Brush.Color:=clGray;

Brush.Style:=TBrushStyle(StrToInt(ComboBox2.Items[Index]));

FillRect(Rect);

end;

ComboBox1 событие OnChange:

with ComboBox2, Shape1.Brush do

begin

Style:=TBrushStyle(StrToInt(Items[ItemIndex]));

Image1.Canvas.Brush.Style:=Style;

Button4.Enabled:=Style<> bsClear;

ColorGrid1Change(Sender);

end;

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

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

Список рекомендованной литературы

1.Borland Delphi 6. Руководство разработчика

2.Paradox for Windows: Практическое руководство. Под редакцией Оспищева Д.А. Издательство АОЗ' "Алевар"

3.Александровский А.Д. Delphi 5. Разработка корпоративных приложений. Среда визуальной разработки RAD

4.Алексей Архангельский. Интегрированная среда разработки Delphi (версии 1 - 5). Практическое пособие с примерами

5.Архангельский А.Я. Работа с локальными базами данных в Delphi 5.

6. Архангельский А.Я. Object Pascal в Delphi. Настольная книга программиста.

7. Бобровский С. И. Delphi 7. Учебный курс

8. Горев А., Ахаян Р., Макашарипов С. «Эффективная работа с СУБД».СПб.:Питер, 2001.

9. Дарахвелидзе П.Г. Программирование в Delphi 7.

10. Дж. Мартин., "Организация баз данных в вычислительных системах" М: Мир 1998г.

11. Джон Матчо, Дэвид Р.Фолкнер. «Delphi» -- пер. с англ. -- М.:Бином, 1999г.

12. Дунаев С.В. Borland-технологии. SQL-Link. Interbase. Paradox for Windows. Delphi

13. Епанешников А.М., "Программирование в среде Delphi 5.0"

14. Кириллов В.В. Структуризованный язык запросов (SQL). - СПб.: ИТМО, 2001.

15. Когловский М.Р., "Технология баз данных на персональных ЭВМ", Москва, 'Финансы и статистика', 1992 г.

16. Кожедуб О.А., Скиба С.А., Подольский С.В. Разработка интернет-приложений в Delphi

17. Мейер М. Теория реляционных баз данных. - М.: Мир, 1997.

18. Наталия Елманова. ADO в Delphi.

19. Попов В.Б. Паскаль и Дельфи. Самоучитель

20. С.М. Диго "Проектирование и использования баз данных". Москва: Финансы и статистика 2000.

21. Тиори Т., Фрай Дж. Проектирование структур баз данных. В 2 кн., - М.: Мир, 1995.

22. Фаронов В. Программирование баз данных в Delphi 6: учебный курс

Размещено на Allbest.ru


Подобные документы

  • Дизайн интерфейса приложения как связь человека и персонального компьютера. Adobe Photoshop и его возможности, анализ функциональности и содержание главных операций. Используемые инструменты для разработки дизайна интерфейса текстового редактора.

    контрольная работа [407,5 K], добавлен 12.10.2015

  • Изучение особенностей растровых и векторных графических редакторов. Создание графического редактора: выбор языка программирования, разработка структуры программы и алгоритма работы. Описание интерфейса программы. Руководство программиста и пользователя.

    курсовая работа [1,3 M], добавлен 28.07.2013

  • Принципы создания приложений с GUI. Панель инструментов для добавления элементов интерфейса. Расположение кнопки и осей в окне приложения. Управление свойствами объектов. Установка свойств при редактировании. Программное изменение свойств. Флаги и рамки.

    методичка [1,1 M], добавлен 06.07.2009

  • Составление Win32 App проекта - простейшего текстового редактора, который позволяет выполнять такие операции: редактирование текста, копирование и вставку из одного окна проекта в другое окно проекта. Методы вызова диалогов сохранения и открытия файла.

    курсовая работа [716,3 K], добавлен 09.11.2010

  • Типы, основные функции, элементы и принцип работы текстового редактора (компьютерной программы). Методы вставки внешних объектов в текст. Особенности текстового процессора Microsoft Word, его специальные возможности. Типовая структура интерфейса.

    реферат [15,8 K], добавлен 07.12.2010

  • Особенности процесса взаимодействия пользователя с компьютером. Графический интерфейс ОС Windows, его преимущества и недостатки. Основы простейшего SILK-интерфейса. Основные черты и специфика структуры WIMP-интерфейса. Общепринятые соглашения для меню.

    реферат [26,8 K], добавлен 02.10.2012

  • Алгоритмическое представление и описание правил игры "Эволюция". Построение диаграммы прецедентов. Разработка графического интерфейса пользователя. Реализация интерфейса в среде Unity. Структура файла сохранения игры. Проектирование поведения компьютера.

    дипломная работа [3,3 M], добавлен 18.02.2017

  • Изучение основных алгоритмов генерации различных видов фракталов. Выбор языка и среды программирования. Характеристика структурных элементов растрового графического редактора фракталов. Описание интерфейса приложения, порядок редактирования изображений.

    курсовая работа [1,2 M], добавлен 04.04.2014

  • Создание консольных приложений с использованием графического интерфейса пользователя. Содержание палитры компонентов программы С++ Builder. Использование возможностей объектно-ориентированного программирования, особенности редактора кода и форм в С++.

    лекция [27,0 K], добавлен 22.12.2010

  • Исследование спецификации логической игры "Сапёр". Системное и функциональное проектирование приложения. Разработка программных модулей. Обзор классов, необходимых для создания интерфейса данного приложения. Инструменты для реализации логической игры.

    курсовая работа [1,2 M], добавлен 13.01.2016

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.