Элементы управления для работы с графикой

Элементы управления для работы с графикой

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

PictureBox хранит картинку. Bitmap и Graphics позволяют рисовать поверх или вместо неё.

Результат урока

Создашь проект с PictureBox и кнопкой показа изображения; настроишь Image и SizeMode; по второй команде нарисуешь оси на Bitmap через Graphics и проверишь сохранение проекта.

Перед началом

Работай в своей папке и соблюдай правила кабинета. При неисправности остановись и обратись к учителю. Нужна проверенная учителем среда PascalABC.NET под Windows с дизайнером Windows Forms.

Вспомни: свойства формы и кнопка Click уже знакомы. Сегодня новый элемент — контейнер для рисунка, а также холст из пикселей.

Основа — § 4.1–4.2 учебника (примеры 4.3 и введение к 4.5). Полный график (y = x\sin x), гистограммы и Timer сегодня не обязательны: они остаются в резерве и на следующие часы. Имена Delphi (Edit, OnClick) в нашем комплекте заменяем на TextBox / Click.

PictureBox — контейнер рисунка

Компонент PictureBox показывает изображение. Свойство Image задаёт картинку. Форматы JPEG, PNG, BMP, GIF. Если нужно менять пиксели, удобнее BMP; PNG и GIF могут сохранять прозрачность.

SizeMode

Фон формы

Свойство формы BackgroundImage задаёт фоновый рисунок. BackgroundImageLayout = Stretch растягивает фон. PictureBox при этом остаётся отдельным элементом поверх фона.

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

Демонстрация ShowPic

Учитель показывает проект Windows Forms ShowPic. Заголовок формы — «Показ рисунка».

Внутри button1.Click:

pictureBox1.Visible := true;
label1.Text := 'Рисунок на экране';

Проверь: при запуске рисунок скрыт; после Click появляется. Смени SizeMode и сравни вид. По желанию второй Click может снова скрыть картинку.

Координаты, Bitmap и Graphics

На экране точка (0; 0) — левый верхний угол. Ось X вправо, ось Y вниз. Единица — пиксель. Это отличается от привычных школьных осей.

Bitmap — точечный холст. Graphics рисует линии и заливки. Типичный порядок в обработчике:

1. создать Bitmap размера PictureBox;
2. присвоить его свойству Image;
3. получить Graphics.FromImage;
4. Clear и примитивы (DrawLine, SetPixel).

Оси в центре

var bm := new Bitmap(pictureBox1.Width, pictureBox1.Height);
pictureBox1.Image := bm;
var gr := Graphics.FromImage(pictureBox1.Image);
gr.Clear(Color.White);
var cx := pictureBox1.Width div 2;
var cy := pictureBox1.Height div 2;
var pen := new Pen(Color.Black, 1);
gr.DrawLine(pen, 0, cy, pictureBox1.Width, cy);
gr.DrawLine(pen, cx, 0, cx, pictureBox1.Height);

Точка «выше центра» на экране имеет меньший Y:

bm.SetPixel(cx + 40, cy - 30, Color.Blue);

Полный график (y = x\sin x) из примера 4.5 требует масштаба, шага и проверки границ — это резерв, если останется время.

Пауза перед практикой

На минуту отведи взгляд от экрана, расслабь кисти и проверь посадку. Затем переходи к своей копии проекта.

Практика: DrawFrame_07

Скопируй каркас DrawFrameShell в папку DrawFrame_07 (07 — номер места) и открой .pabcproj.

1. Задай Image и SizeMode. При старте Visible = False у pictureBox1 (или скрой рисунок иначе по указанию учителя).
2. В button1.Click сделай элемент видимым и обнови статус.
3. В button2.Click создай Bitmap, очисти белым и нарисуй оси через центр.
4. По желанию добавь одну контрольную точку SetPixel относительно центра.

Лист проверки

Сохранение

1. «Сохранить все», закрой проект.
2. Открой .pabcproj из своей папки.
3. Проверь показ рисунка и оси.
4. Сдай всю папку (исходники и файлы изображений) и личный лист.

Критерии готовности

Шесть диагностических баллов: проект повторно открывается; Image и SizeMode заданы; Click показывает рисунок; оси нарисованы через Graphics/Bitmap; учтён знак оси Y; в листе есть прогнозы. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: скрытие рисунка повторным Click; одна точка SetPixel; фрагмент примера 4.5.

Если результат отличается

Объясни самостоятельно

1. Зачем свойство SizeMode?
2. Где точка (0; 0) на PictureBox и куда направлена ось Y?
3. Чем Bitmap для рисования отличается от готового JPEG в Image?

Показать ответ после выполнения

Домашнее задание

§ 4.1–4.2. Письменно: 1) три значения SizeMode и отличия; 2) почему Y на экране направлен вниз; 3) порядок Bitmap → Graphics → Clear → DrawLine. Диаграммы и Timer (§ 4.3–4.4) — по желанию при доступе к Windows. Установка программ дома не требуется.

Источники

Котов В. М. и др. «Информатика. 11 класс», 2021: § 4, примеры 4.3–4.5. Электронная копия. Конспект § 4.

Microsoft Learn: PictureBox, SizeMode, Bitmap, Graphics. Среда: PascalABC.NET.

ShowPic, DrawFrame, границы практики и одиннадцать иллюстраций — авторская адаптация. Изображения условные и не являются снимками установленной среды.