Работа с графикой Вывод иллюстраций Классы графики

Работа с графикой Вывод иллюстраций

Классы графики Класс TBit. Map TCursor TIcon TJpeg. Image TMeta. File Описание Растровая графика. Размер произволен. 2, 16 или 256 цветов Курсор. = Bit. Map 32 х32. 2 цвета. Пиктограмма (значок). = Bit. Map 32 х32 или 16 х16. 2 или 16 цветов. График Jpeg. Сжатый с потерями Bit. Map. Векторная графика. С графическими примитивами.

Вывод графики • Компонент Image (на вкладке “Additional”) • Свойство Picture с методом Load. From. File загрузки изображения из файла Image 1. Picture. Load. From. File(‘c: picture 1. bmp’); Image 2. Picture. Load. From. File(‘c: picture 2. jpg’);

Битовый образ – область памяти для хранения картинок в стандарте Bit. Map • Содержимое области может прямо выводиться в форму или (лучше) в компонент Image • Битовый образ может загрузиться дисковым файлом только один раз для его многократного использования (это ускоряет работу приложения)

Битовый образ Для работы с битовым образом нужно: • В разделе var объявить переменную типа Bit. Map My. Bit. Map : TBit. Map; • Создать объект типа Bit. Map My. Bit. Map : = TBit. Map. Create • Загрузить в него файл с расширением. bmp My. Bit. Map. Load. From. File(‘файл’); • Использовать этот файл для вывода картинок

Пример 1 • Проект: картинка с двумя самолетами на фоне неба • Левый самолет для фона непрозрачен • Правый самолет для фона прозрачен

Пример 1 var sky, aplane: TBit. Map; // битовые образы. . . procedure TForm 1. Form. Paint(Sender: TObject); begin sky : = TBit. Map. Create; // создаем битовые образы aplane : = TBit. Map. Create; sky. Load. From. File('sky. bmp'); // загружаем картинки aplane. Load. From. File('aplane. bmp'); // рисуем картинки Form 1. Canvas. Draw(0, 0, sky); // фон - небо Form 1. Canvas. Draw(20, aplane); // сам_1 aplane. Transparent: =True; // прозрачен Form 1. Canvas. Draw(120, aplane); // сам_2 sky. free; // освободить память aplane. free; end.

Битовый образ R 1: =TBitmap. Create; R 3: =TBitmap. Create; R 1. Load. From. File('R. bmp'); R 3. Assign(Ris 1); R 2: =TBitmap. Create; R 3. Transparent: =True; R 2. Assign(Ris 1); R 3. Transparent. Color : =cl. White; R 2. Transparent: =True; R 2. Transparent. Color: =cl. Black; R 4: =TBitmap. Create; R 4. Assign(Ris 1); R 4. Transparent: =True; R 4. Transparent. Color: =R 4. Ca nvas. Pixels[30, 30];

Анимация – это рисунок с движением или изменением Для создания анимации нужно: • вывести рисунок на экран • затем стереть его • вывести рисунок на экран в другой позиции • Для получения ощущения движения нужно подобрать расстояние и временной интервал между отрисовками

Анимация Для работы нужны битовые образы: • фона • движущегося объекта • буфера для хранения копии фона, заслоняемого движущимся объектом • Для задания временных интервалов используется компонент Timer (на вкладке System)

Пример 2 Проект - картинка с самолетом, движущимся слева направо на фоне фабрики

Пример 2 var Back, Bitmap, Buf : TBit. Map; Back. Rct : TRect; Buf. Rct : Trect; x, y : integer; W, H : integer; // фон, картинка, буфер // область фона, восстановленная из буфера // область буфера для фона // текущее положение картинки // размеры картинки

Пример 2 procedure TForm 1. Form. Activate(Sender: TObject); begin // создаем три объекта - битовых образа Back : = TBitmap. Create; Bitmap : = TBitmap. Create; Buf : = TBitmap. Create; Back. Load. From. File(‘factory. bmp’); Form 1. Image 1. canvas. Draw(0, 0, Back); Bitmap. Load. From. File('aplane. bmp'); Bitmap. Transparent : = True; Bitmap. Trans. Parent. Color : = Bitmap. canvas. pixels[1, 1];

Пример 2 //продолжение procedure TForm 1. Form. Activate(Sender: TObject); . . . // создать буфер для копии области фона W: = Bitmap. Width; H: = Bitmap. Height; Buf. Width: = W; Buf. Height: =H; Buf. Palette: =Back. Palette; Buf. Canvas. Copy. Mode: =cm. Src. Copy; // область буфера для восстановления Buf. Rct: =Bounds(0, 0, W, H); // начальное положение картинки x : = -W; y : = 20; // сохраняем область фона Back. Rct: =Bounds(x, y, W, H); Buf. Canvas. Copy. Rect(Buf. Rct, Back. Canvas, Back. Rct); end;

Пример 2 // обработка сигнала таймера procedure TForm 1. Timer 1 Timer(Sender: TObject); begin // восстановлением фона удалим рисунок Form 1. image 1. canvas. Draw(x, y, Buf); x: =x+2; if x>form 1. Image 1. Width then x: =-W; // сохраняем область фона Back. Rct: =Bounds(x, y, W, H); Buf. Canvas. Copy. Rect(Buf. Rct, Back. Canvas, Back. Rct); // выведем рисунок Form 1. image 1. canvas. Draw(x, y, bitmap); end;

Пример 2 // завершение работы программы procedure TForm 1. Form. Close(. . . ); begin // освободим память для битовых образов Back. Free; Bitmap. Free; Buf. Free; end;

Утилита Image Editor • Утилита доступна по команде Image Editor • В редакторе можно создавать и сохранять Файл Команда Иконка File=>New=>Icon File (. ico) Курсор File=>New=>Cursor File(. cur) Битовое изображение File=>New=>Bit. Map File (. bmp) Ресурсов File=>New=>Resource File (. res) Ресурсов компонент File=>New=>Component Resource File (. dcr)

Утилита Image Editor • При создании нового или открытии существующего файла вызывается окно редактирования • Окно похоже на обычный графический редактор • Доступные инструменты определяются автоматически типом файла

Создание файла ресурсов • Файл ресурсов может содержать картинки разного типа. • Файл имеет иерархически организованное оглавление, которое заполняется по мере включения в файл новых картинок • При создании файла формируется окно содержания. • Новый файл можно сохранить с расширением. res с использованием стандартного файл-менеджера.

Наполнение файла ресурсов Для добавления ресурса в файл нужно: • вызвать список доступных ресурсов (Bit. Map, Icon, Cursor) Resource => New • из списка выбрать нужный ресурс • если это курсор, то он заносится в оглавление файла • если это Icon или Bit. Map, то вызывается окно свойств, в котором выбираются подходящие значения • Создается ресурс с именем по умолчанию Cursor. N, Icon. N, Bit. Map. N • Имя ресурса можно изменить командой Resource=>Rename

Наполнение файла ресурсов

Редактирование файла ресурсов • Для выделенного в оглавлении ресурса командой Resource=>Edit можно вызвать окно его редактирования

Подключение файла ресурсов • Директива $R предписывает компилятору при компоновке включить в exe-файл указанный файл ресурсов {$R <имя файла ресурса>} • После этого файл ресурсов известен в программе под системным именем HInstance • Загрузка картинки из подключенного файла ресурсов в переменную типа TBit. Map с помощью метода Load. From. Resource. Name • Метод имеет два формальных параметра: • HInstance • Имя ресурса

Пример 3 • Пусть для работы (пример 2) был создан файл ресурсов images. res, содержащий два Bit. Map-образа с именами: • factory - из файла factory. bmp • aplane - из файла aplane. bmp • Тогда в коде модуля формы перед интерфейсной частью нужно ввести директиву {$R images. res} • В разделе implementation вместо команд Back. Load. From. File(‘factory. bmp’); Bit. Map. Load. From. File('aplane. bmp'); применить команды Back. Load. From. Resource. Name (HInstance, ’factory’); Bitmap. Load. From. Resource. Name (HInstance, ’aplane’);

Задания 1. Создать свой курсор, используя Image Editor 2. Создать приложение с анимацией • Используя файлы • Используя файл ресурсов

Задания 1. Два сталкивающихся и разлетающихся шарика (столкновение не лобовое). Удар абсолютно упругий. 2. Брусок, скользящий с наклонной плоскости с ускорением при наличии трения. После скатывания он некоторое время скользит по горизонтальной поверхности и останавливается. 3. Колесо, катящееся по прямой. 4. Колесо, катящееся по внутренней части окружности. 5. Качающийся маятник. 6. Попадание биллиардного шара в лузу. 7. Взлетающая ракета. 8. Опускающийся парашют. 9. Кран, из которого капают капли воды. 10. Воздушный шарик, надувающийся и лопающийся.

Задания 11. Две картинки (например, портреты), переходящие друг в друга. 12. Идущие часы (со стрелками). 13. Песочные часы с высыпающимся песком. 14. Ходики с маятником и движущимися глазами. 15. Телефон с вращающимся диском. 16. Горящая свечка. 17. "Живая" картинка - поздравление с праздником. 18. Праздничный салют. 19. Пушка, стреляющая ядром. 20. Ползущая гусеница (червяк).

Задания 21. Движущаяся летающая тарелка. 22. Плывущая через экран и поднимающая и опускающая перископ подводная лодка. 23. Кораблекрушение. 24. Автомобильное столкновение. 25. Пейзаж с закатом солнца.

Задания (дополнительные варианты) • • • Ночной пейзаж с мерцающими звездами и летящей кометой. Пейзаж с облаками, плывущими по небу. Когда солнце закрыто облаками, темнеет. Гроза со сверкающей молнией и струями дождя. Вырастающий мухомор. Вырастающее дерево. Тающий снеговик. Кипящий чайник (пар, подпрыгивающая крышка). Горизонтально движущийся карандаш и вырисовывающаяся побуквенно за ним надпись. Подмигивающая рожица. Двигающийся человечек(идущий, бегущий, поднимающий штангу, подтягивающийся на перекладине, выполняющий приседания. . . ) Летящий с постоянной скоростью через экран комар (или муха).