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

 

Цель: Изучение компонентов ColorGrid, SpinEdit, RadioGroup, ListBox, ColorDialog.

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

ColorGrid - пример компонента, используемого для создания таблицы цветов, в которой пользователь выбирает требуемый цвет. Компонент визуальный. Свойство GridOrdering определяет внешний вид сетки (количество строк и столбцов). Свойство ForegroundColor определяет цвет, выбранный пользователем левой клавишей, BackgroundColor - правой.

SpinEdit - окно редактирования в комбинации с кнопкой-счетчиком. Свойства MinValue и МахValue компонента задают соответственно минимальное и максимальное значения чисел, свойство Increment задает приращение числа при каждом нажатии на кнопку. Свойство Value определяет текущее значение числа. Это свойство можно читать, чтобы узнать, какое число задал пользователь.

Радиокнопки образуют группы взаимосвязанных индикаторов, из которых обычно может быть выбран только один. Компонент RadioGroup — панель группы радиокнопок, которая может содержать регулярно расположенные столбцами и строками радиокнопки. Надпись в левом верхнем углу панели определяется свойством Caption. А надписи кнопок и их количество определяются свойством Items, имеющим тип TStrings. Щелкнув на кнопке с многоточием около этого свойства в окне Инспектора Объектов, вы попадете в редактор списков строк. В нем вы можете занести надписи, которые хотите видеть около кнопок, по одной в строке. Сколько строчек вы запишете — столько и будет кнопок.

Определить, какую из кнопок выбрал пользователь, можно по свойству ItemIndex, которое показывает индекс выбранной кнопки. Индексы, как всегда в Delphi, начинаются с 0. По умолчанию ItemIndex = -1, что означает отсутствие выбранной кнопки.

Компонент ListBox отображает списки строк. ListBox отображает список в раскрытом виде и автоматически добавляет в список полосы прокрутки, если все строки не помещаются в окне компонента.

Основное свойство компонента, содержащее список строк, — Items, имеющее тип TStrings. Заполнить его во время проектирования можно, нажав кнопку с многоточием около этого свойства в окне Инспектора Объектов. Во время выполнения работать с этим свойством можно, пользуясь свойствами и методами класса TStrings — Clear, Add и другими. Номер выбранной строки можжно узнать из свойства ItemIndex. Если ни одна строка не выбрана, то ItemIndex = -1.

Компонент ColorDialog вызывает диалоговое окно выбора цвета. Основное свойство компонента ColorDialog — Color. Это свойство соответствует тому цвету, который выбрал в диалоге пользователь.

Ход работы

Часть 1.

1. Создайте новый проект и сохраните его в своей папке.

Поместите на форму компонент Shape (палитра Aditional) и ColorGrid (палитра Samples). Свойству Shape компонента Shape присвоить значение stRectangle. Свойству GridOrdering компонента ColorGrid присвоить значение go8x2.

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

 

 

2. Создадим обработчик события OnChange компонента ColorGrid

Shape1.Pen.Color:=ColorGrid1.ForegroundColor;

Shape1.Brush.Color:=ColorGrid1.BackgroundColor;

Запустим программу и посмотрим как она работает. Левым щелчком по палитре выбирается цвет контура (передний цвет), правым – цвет фона (задний цвет).

3. Используя компонент SpinEdit (палитра Samples) создадим возможность изменения толщины контура от 1 до 50.

Свойству MaxValue зададим значение 50, MinValue – 1

В обработчике события OnChange компонента SpinEdit запишем:

shape1.Pen.Width:=SpinEdit1.Value;

Расположим компонент Label (свойство Caption – Контур) и SpinEdit, как это показано на рисунке ниже.

4. Расположим на форме компонент RadioGroup.

Присвоим его свойству Captions и свойству Items (содержит названия строк списка) значения, как это показано на рисунке ниже. Сделаем так, чтобы по умолчанию был выбран первый компонент списка. Для этого свойству ItemIndex компонент а RadioGroupзададим значение 0 (нумерация в списке начинается с нуля)

 

 

5. В обработчике OnClick для RadioGroup1 запишем:

if RadioGroup1.ItemIndex=0 then Shape1.Shape:=stCircle; {если выбран первый элемент списка}

if RadioGroup1.ItemIndex=1 then Shape1.Shape:=stEllipse;

if RadioGroup1.ItemIndex=2 then Shape1.Shape:=stRoundRect;

if RadioGroup1.ItemIndex=3 then Shape1.Shape:=stRoundSquare;

if RadioGroup1.ItemIndex=4 then Shape1.Shape:=stSquare;

6. Расположим на форме компоненты Label (свойство Caption – Способ заливки) и компонент ListBox. В Редакторе списка строк компонента ListBox (вызывается щелчком по свойству Items) введите значения, как это показано на рисунке выше.

7. В обработчик OnClick компонента ListBox введем следующий код:

if ListBox1.Selected[0] then Shape1.Brush.Style:=bsSolid;

if ListBox1.Selected[1] then Shape1.Brush.Style:=bsClear;

if ListBox1.Selected[2] then Shape1.Brush.Style:=bsBDiagonal;

if ListBox1.Selected[3] then Shape1.Brush.Style:=bsFDiagonal;

if ListBox1.Selected[4] then Shape1.Brush.Style:=bsCross;

if ListBox1.Selected[5] then Shape1.Brush.Style:=bsDiagCross;

if ListBox1.Selected[6] then Shape1.Brush.Style:=bsHorizontal;

if ListBox1.Selected[7] then Shape1.Brush.Style:=bsVertical;

Запустим программу и посмотрим как она работает.

Часть 2.

1. Создайте новый проект и сохраните его в своей папке.

2. Наша задача добиться следующего эффекта: при щелчке мышки по форме на ней должна появиться фигура. Ели клавиша Shift не нажата, это будет круг, если нажата – квадрат. Для этого в обработчике события OnMouseDown формы напишем код:

if Button=mbLeft then

if ssShift in Shift then

Canvas.Rectangle(x-10,y-10,x+10,y+10)

else canvas.Ellipse(x-10,y-10,x+10,y+10);

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

caption:=Format('Фигуры: X=%d, Y=%d', [X,Y]);

4. Поместим на форму компоненты MainMenu и ColorDialog.

Создадим главное меню, содержащее следующие пункты:

 Файл:         Цвет:                        Размер:

    Новый            Цвет карандаша      Увеличить карандаш

    Выход            Цвет кисти     Уменьшить карандаш

                                                       Увеличить фигуру

                                                       Уменьшить фигуру

5. Создадим глобальную переменную Radius, инициализируем ее при создании формы значением 10, и заменим ею константы при создании фигур в обработчике события OnMouseDown:

if button=mbLeft then

if ssShift in Shift then canvas.rectangle(x-radius,y-radius,x+radius,y+radius)

else canvas.Ellipse(x-radius,y-radius,x+radius,y+radius);

6. Обработаем события OnClick пунктов меню следующим образом:

Новый:

repaint;

Выход:

form1.Close;

Цвет карандаша:

colordialog1.Color:=canvas.Pen.color;

if colordialog1.Execute then

canvas.Pen.Color:=colordialog1.Color;

Цвет кисти:

colordialog1.Color:=canvas.brush.color;

if colordialog1.Execute then

canvas.brush.Color:=colordialog1.Color;

Увеличить карандаш:

canvas.Pen.Width:=canvas.Pen.Width+2;

Уменьшить карандаш:

    canvas.Pen.Width:=canvas.Pen.Width-2;

if Canvas.Pen.Width<3 then canvas.Pen. {ограничение на минимальную толщину карандаша)

Увеличить фигуру:

radius:=radius+5;

Уменьшить фигуру:

radius:=radius-5;

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

1. Создать обработчик события OnClick пункта меню Выход с запросом о выходе из программы.

2. Создать ограничение на увеличение размера карандаша.

3. Создать ограничения на увеличение и уменьшение (не меньше чем Radius-10) размера фигуры.

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