Графика в HiAsm: картинки, эффекты

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

Надеюсь, HiAsm у вас уже запущен. Но не спешите открывать вкладку "Графика", ведь там все компоненты невизуальные, т.е. не могу отображаться на форме программы. Сначала нужно поставить визуальный компоненты, который находится на вкладке "Интерфейс". Это компонент Imege, его значок напоминает рисунок пейзажа.

Теперь следует зайти в редактор формы и выровнять компонент так, как вам хочется. А сейчас мы рассмотрим некоторые параметра компонента. Но не все, потому что многие из них аналогичны для всех визуальных компонентов (это я рассказывал в экскурсии по точкам).

Ниже параметра Splitter есть ряд параметров, который нас интересует. Во-первых, это AutoSize. Если этот параметр равен True, то при загрузке картинки в компонент размеры компонента автоматически подстраиваются под размеры картинки. Ну а если False, то можно смело переходить к следующему параметру ViewStyle.

Когда размеры картинки и компонента не совпадают, именно этот параметр определяет, как будет отображаться картинка. Подробно я расписывать его не буду, потому что в описании этого параметра в HiAsm всё подробно расписано.

Параметр Picture может содержать картинку, т.е. вы можете её туда загрузить, чтобы при входе в программу она сразу отображалась в компоненте. Часто это бывает очень удобно.

HalfTone - определяет режим масштабирования картинки. Если выбрать True, то при уменьшении картинка будет выглядеть так же качественно, а если False, то некоторые картинки могут просто "растрескаться", как старая извёстка.

И вот теперь можно переходить ко вкладке "Графика". Группу "Рисование" мы пока трогать не будем, о ней я расскажу в другой раз. А вот группу "Картинка" мы сейчас рассмотрим подробнее.

Компонент ImageLoader может раскодировать картинки почти в любом формате. К сожалению, сохранять он не умеет. Но для несложного просмотра графики вполне сгодится. К примеру, если вам нужно сделать программу для просмотра рисунков фона для веб-страниц (а такие файлы часто небольшие, потому что многократно повторяются на веб-странице, т.е. мостят её). Вот её-то мы сейчас и реализуем.

В такую программу файлы удобнее всего загружать переносом на форму иконки файла, чем другими способами. Надеюсь, вы читали статью про открытие файлов.
Что касается получения раскодированной картинки, то получить её можно аж тремя способами: отрисовкой на элементе Windows (например, на окне), отрисовкой на картинке и выдачей картинки в поток. По сути, два последний способа почти одинаковы: кому как удобнее. А вот третий способ использовать нежелательно, потому что если компонент Image запоминает, что на нём нарисовали, то элементы Windows - нет. И если окно было скрыто (например, вынесено за границы экрана), а потом появилось, то всё придётся перерисовывать заново.



Сначала на doLoad подаётся имя файла, onLoad происходит, когда картинка раскодирована. И это событие вызывает новый метод - doDraw, заставляющий картинку отрисоваться (поскольку DrawSoure компонента ImageLoader равно NewBitmap, картинка просто выдаётся в поток по событию onDraw).

А сам компонент Image занимает всю область окна программы (Align=caClient), и параметр ViewStyle у него равен Mosaic.

Следующий после ImageLoader компонент - PictureStream. Этот компонент может загружать только 4 формата файлов (bmp, ico, pcx и jpg), но зато может сохранять картинки в форматах bmp и jpg. Этот компонент устарел, и лучше им не пользоваться, потому что другие компоненты могут сохранять в файл и другие форматы.

Довольно важный компонент BitmapArray. Я про него не упомянул в статье о хранении бинарных данных, но он тоже может хранить в себе картинки, причём сразу несколько. Ведь это масиив картинок. У него есть точки свойств: Array и Count, с помощью которых можно управлять компонентом (через компонент для работы с массивами - ArrayRW со вкладки "Массивы").

А сейчас я покажу первый приём изменения картинок. Для начала изменим размер картинки. Для этого есть компонент Resize. Однако усложним задачу и уменьшим размеры картинки ровно в два раза. Для этого высоту и ширину картинки нудно уменьшить в два раза. Думаю, статью про арифметику все помнят.



Здесь размеры картинки берутся из свойств компонента ImageLoader, потому что там они остаются после загрузки картинки. А компоненты Math берут их через свои верхние точки и делят на два. А потом уже происходит изменение размеров картинки.
Но если ещё раз нажать на кнопку, то изменения не произойдёт, потому что размеры для уменьшения будут старыми, оригинальными, а не новыми, изменёнными.

Теперь можно перейти и к фильтрам. Они находятся в группе "Фильтры".



Это пример использования фильтра размытия. Остальные фильтры используются аналогично.

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

Этот компонент предназначен для работы с картинками в формате Jpeg. Сам он, конечно, ничего не отображает, но может конвертировать картинку между форматами bmp/jpg (поскольку bmp - это незакодированный формат, в котором каждый пиксель описывается определённым число байт, и формат bmp легко конвертировать в любой другой).



В этом примере из файла jpg читается информация о дате съёмки (если она там есть) и опинсаие. На вкладке "Точки" панели параметров у компонента Jpeg есть ещё много интересных точек.

Компонент Gif не может содержать в себе картинку Gif, потому что у него нет соответствующего параметра. Однако он позволяет читать картинку не только из файла, но и из файлового потока, который может быть сохранён в программе (компонент MemoryStream, вкладка "Файлы").



Файл картинки (точнее, байты этого файла, или файловый поток) заключён в компонент MemoryStream, откуда через верхнюю точку передаётся компоненту Gif. Остаётся только вызвать метод для загрузки данных из потока.

Следует помнить, что в формате gif возможна анимация. Для её реализации у компонента есть все методы и параметры. Смотрите внимательнее и экспериментурийте, а мы переходим к формату ico.

В этом компоненте можно сохранять иконку, у него есть параметр Icon. Возможно, вы знаете, что у иконки некоторые области могут быть прозрачными т.е. принимать цвет фона. Но у bmp таких областей быть не может, и все участки должны иметь фиксированный цвет. А потому при переводе из ico в bmp следует указать, каким цветом заливать прозрачные области. Это указывается в параметре Transparent компонента Icon.

А сейчас я покажу, как можно загрузить картинку в формате jpg и сделать из неё иконку с сохранением в файл.



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