лаба 14 ит. Лабораторная работа 14 вывод изображения в интерфейс. Взаимодействие с мышью

Название	Лабораторная работа 14 вывод изображения в интерфейс. Взаимодействие с мышью
Анкор	лаба 14 ит
Дата	25.05.2022
Размер	35.78 Kb.
Формат файла
Имя файла	laboratornaya_rabota_14_VS.docx
Тип	Лабораторная работа #549658

ЛАБОРАТОРНАЯ РАБОТА № 14
ВЫВОД ИЗОБРАЖЕНИЯ В ИНТЕРФЕЙС. ВЗАИМОДЕЙСТВИЕ С МЫШЬЮ.
Цель работы: знакомство с принципами загрузки и работы с изображениями, а также основами взаимодействия с мышью в графическом интерфейсе.

ЗАГРУЗКА ИЗОБРАЖЕНИЯ В PICTUREBOX

Создадим новый проект WindowsCLR и добавим форму в пользовательский интерфейс, как было показано в предыдущей работе.
Добавим на форму кнопку (Button) и объект PictureBox. С помощью мышки растянем форму и затем PictureBox, чтобы размер последнего стал 320 на 240. Точно установить желаемый размер можно в свойствах объекта PictureBox, в поле Size (можно прописать значения через знак «;», или в отдельных полях Width и Height). В поле SizeMode установим значение StretchImage
Добавим на форму объект OpenFileDialog
Наша цель сделать так, чтобы при нажатии на кнопку открывалось диалоговое окно, в котором пользователь мог выбрать файл – изображение, которое отображалось бы в PictureBox.

Для этого напишем в обработчик события нажатия кнопки (двойной клик по кнопке на форме создаст нам шаблон):

private: System::Void button1_Click(System::Object^

sender, System::EventArgs^ e) {
}

) следующийкод:

if (openFileDialog1->ShowDialog() == System::Windows::Forms::DialogResult::OK)

{

pictureBox1->Image = Image::FromFile(openFileDialog1->FileName);

}

В результате в PictureBox отобразится наше изображение.

Упражнение 1.

1. Создать проект Windows CLR (C++) и добавить одну форму. Разместить на форме кнопку (Button) и четыре элемента PictureBox.

Установить различные значения в поле SizeMode.

Проанализировать различие в представлении изображений.

ЗАГРУЗКА ИЗОБРАЖЕНИЯ В ПРОГРАММУ. ДОСТУП К ЗНАЧЕНИЯМ ОТДЕЛЬНЫХ ПИКСЕЛЕЙ ИЗОБРАЖЕНИЯ

Теперь создадим в программе объект для хранения изображения и загрузим в него изображение с диска.
Добавим на форму еще одну кнопку (Button) и оставим только один объект PictureBox. Напишем для кнопки обработчик события нажатия (двойной клик по кнопке на форме создаст нам шаблон). В обработчике мы инициализируем специальный объект для хранения графических данных, с помощью диалога работы с файлами загрузим в него картинку и выведем ее в pictureBox

Объект img1 класса Bitmap хранит растровое изображение и имеет ряд полезных для работы с графикой методов. Нас интересуют методы, позволяющие получить доступ к значению цвета каждого отдельного пикселя и изменить его, согласно логике проводимой обработки. Это методы GetPixel(int,int) и SetPixel(int,int,Color).
Метод GetPixel возвращает объект типа Color, который содержит (в типовом случае при глубине цвета изображения 24 бит на пиксель) свойства R, G, B - хранящие значения соответствующих каналов пикселя цветного изображения.
Расширим предыдущий пример. Добавим на форму еще один объект PictureBox. Загрузим изображение в объект Bitmap. Выведем в pictureBox1 исходное изображение, а в pictureBox2 – изображение, где для каждого пикселя значения каналов R и B поменяны местами.

private: System::Void button1_Click(System::Object^sender,System::EventArgs^ e) {

if (openFileDialog1->ShowDialog() == System::Windows::Forms::DialogResult::OK)

{

//создаем CLI объект с помощью конструктора, принимающего на вход имя файла

//и возвращаем с помощью gcnew указатель (^) на CLI объект
Bitmap ^img1 = gcnew Bitmap(openFileDialog1->FileName);
//создаем CLI объект с помощью конструктора, принимающего на вход размер //картинки

//и возвращаем с помощью gcnew указатель (^) на CLI объект

//в отличие от предыдущего конструктора, данный конструктор создает только //заголовок объекта (размер картинки)

//никакие графические данные не создаются!
Bitmap ^img2 = gcnew Bitmap(img1->Width,img1->Height);
pictureBox1->Image = img1;

//проходим по каждому пикселю изображения

for(int i = 0; i < img1->Width; i++)

for (int j = 0; j < img1->Height; j++) {
//в обект типа Color сохраняем значение цвета пикселя из первого изображения

Color cl1 = img1->GetPixel(i, j);
//инициализируем второй объект типа Color тремя значениями

// (R, G, B), меняя порядок следования каналов,

//подставляя, наоборот (B, G, R) из cl1
Color cl2 = Color::FromArgb(cl1.B, cl1.G, cl1.R);

//записываем в соответствующий пиксель второго изображения новый цвет
img2->SetPixel(i, j, cl2);
}

pictureBox2->Image = img2;
}

}

Упражнение 2.

Загрузить цветное изображение. Вывести его в элемент pictureBox1 на форме. Конвертировать цветное изображение в оттенки серого и вывести результат во второй элемент pictureBox2.

Изображение в оттенках серого характеризуется тем, что для каждого пикселя значения цветовых каналов равны: R=G=B.

Для получения изображения в оттенках серого из цветного используют следующую формулу для каждого пикселя: Y = 0.299*R + 0.587*G + 0.114*B

Примечание: Обратите внимание: при вызове

pictureBox1->Image = img1;

в pictureBox1 не копируются графические данные! Элемент просто начинает ссылаться на графическую информацию, хранящуюся в img1. Именно поэтому в предыдущем примере мы создавали два разных изображения. Если бы мы изменили img1 и вызвали

pictureBox2->Image = img1;

то оба pictureBox на форме отобразили бы одинаковую картинку!
III. ВЗАИМОДЕЙСТВИЕ С МЫШЬЮ В ИНТЕРФЕЙСЕ
1. Для взаимодействия с мышью используют вкладку «События» («Events») на панели свойств объекта. Находясь в окне редактора интерфейса (на вкладке Form1.h [Design] выделите объект pictureBox1.

2. Откройте панель его свойств (Properties). В заголовке щелкните на пиктограмме с молнией и перейдите на вкладку «События» («Events»).

3. С помощью различных событий происходит взаимодействие пользователя и программы через интерфейс. Этот механизм позволяет написать обработчик (некий код), который будет выполняться при наступлении соответствующего события. Например, можно написать обработчик на изменение изображения, отображаемого в pictureBox, и так далее.

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

5. Рассмотрим некоторые, наиболее полезные события, имеющиеся у элемента pictureBox для взаимодействия с мышью. Они находятся в подразделах Action и Mouse.

- MouseClick – срабатывает при щелчке мышью в области pictureBox;

- MouseDoubleClick - срабатывает при быстром двойном щелчке мышью в области pictureBox;

- MouseDown – срабатывает, когда происходит нажатие (не щелчок!) на кнопку мыши, находящуюся в области pictureBox;

- MouseEnter – срабатывает, когда курсор мыши входит в область, занимаемую pictureBox на экране (можно использовать, например, для смены отображения курсора мыши);

- MouseLeave – срабатывает, когда курсор мыши покидает область, занимаемую pictureBox на экране;

- MouseMove – срабатывает, когда курсор мыши перемещается в области, занимаемой pictureBox на экране; событие происходит каждый раз при любом изменении координаты мыши;

- MouseUp – событие, обратное MouseDown, отвечающее за обработку «отжатия» клавиши мыши, если оно произошло в области pictureBox.

6. Напишем обработчик события щелчка мыши. Для этого дважды кликнем на пустом поле напротив MouseClick в списке «События» («Events») pictureBox. Visual Studio автоматическисформируетдлянасшаблонобработчика.

private: System::Void pictureBox1_MouseClick(System::Object^sender, System::Windows::Forms::MouseEventArgs^ e) {

}

К написанию кода для обработчика вернемся позже.
Примечание: Для большего понимания, рассмотрим данный автоматически созданный код. Это не что иное, как описание метода pictureBox1_MouseClick, который объявлен как приватный метод класса формы, с которой мы работаем в Дизайнере. Не вдаваясь в подробности, данная форма это объект нашего собственного класса, который был унаследован от некоего класса-родителя System::Windows::Forms::Form. Это можно заметить в самом начале заголовочного файла.

Все манипуляции, которые мы производим в дизайнере отражаются в коде класса нашей формы (добавление новых элементов, обработчиков событий и т.д.). Метод pictureBox1_MouseClick мало чем отличается от обычной функции С++. Сигнатура метода включает тип возвращаемого значения System::Void и список аргументов (System::Object^sender, System::Windows::Forms::MouseEventArgs^ e).
7. Нас интересует аргумент e. Это указатель на объект, который содержит необходимые нам данные о произошедшем событии. Используя его, реализуем следующий алгоритм. Пусть pictureBox отображает некоторое изображение. По щелчку левой кнопки мыши будем закрашивать все пиксели белым в области 5 на 5 пикселей вокруг точки щелчка. По правому клику – закрашивать область черным.

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

private: System::Windows::Forms::PictureBox^ pictureBox1;

допишем:

private: Bitmap ^img1;
Теперь это изображение будет нам доступно при всех манипуляциях с формой. Ранее, мы объявляли img1 внутри обработчика нажатия на кнопку и тем самым ограничивали область видимости img1.

Код обработчика нажатия кнопки примет вид:
private: System::Void button1_Click(System::Object^ sender, System::EventArgs^ e) {

if (openFileDialog1->ShowDialog() == System::Windows::Forms::DialogResult::OK)

{

img1 = gcnew Bitmap(openFileDialog1->FileName);

pictureBox1->Image = img1;

}

}
10. Вернемсякобработчикусобытия MouseClick. Напишемкод:

private: System::Void pictureBox1_MouseClick(System::Object^ sender,

System::Windows::Forms::MouseEventArgs^ e) {

for (int i = -2; i < 2; i++)

for (int j = -2; j < 2; j++)

{

// проверка, что мы не выходим за пределы изображения

if ((e->X + i > 0) && (e->X + i < img1->Width) &&

(e->Y + j > 0) && (e->Y + j < img1->Height))

{

// если нажата левая кнопка

if (e->Button == System::Windows::Forms::MouseButtons::Left) {

img1->SetPixel(e->X + i, e->Y + j, Color::White);

}

// если нажата правая кнопка

if (e->Button == System::Windows::Forms::MouseButtons::Right) {

img1->SetPixel(e->X + i, e->Y + j, Color::Black);

}

}

}

pictureBox1->Image = img1;

}

Упражнение 3.

Написать программу, которая моделирует инструмент графического редактора «ластик». Необходимо загрузить изображение, вывести его в pictureBox и написать следующий обработчик для мыши: при движении мыши в области pictureBox, если зажата левая клавиша, осуществлять стирание изображения (закрашивание белым). Размер ластика – 5 на 5 пикселей.

Упражнение 4.

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

рисует через всю картинку вертикальную и горизонтальную линию через точку, где находится мышь (e->X, e->Y). Толщина линии – один пиксель. Цвет – красный (Color::Red).

Содержание отчета:

1. Титульный лист

2. Цель работы

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

4. Коды модулей С++

5. Копии экрана с примерами работы программ

6. Схемы алгоритмов программ.

7. Выводы по работе.