Растровая и векторная графика

В компьютерной графике все картинки можно разделить на растровые и векторные. Соответственно говорят о двух типах графики – растровой и векторной, и о двух типах форматов графических файлов – растровом и векторном. К растровым форматам относятся форматы BMP, JPEG, GIF, TIFF, PNG, Icon и др., к векторным форматам относятся форматы WMF, EMF и др.

Упомянутые два вида графики различаются своим поведением, поэтому неплохо бы знать их различия. Посмотрите на Рис. 12.9.

Рис. 12.9

Слева – фотография (формат BMP), справа – рисунок из коллекции Microsoft (формат WMF). Фотография – типичный представитель растровой графики, рисунок из коллекции Microsoft – типичный представитель векторной графики. Ниже вы видите увеличенные фрагменты фотографии и рисунка соответственно.

Чем больше мы увеличиваем фотографию, тем больше становятся зернистыми и грубыми ее мелкие элементы. Это вполне естественно, то же самое мы видим, рассматривая в мощную лупу фотографию на бумаге. При дальнейшем увеличении на экране нам будет казаться, что фотография состоит из цветных квадратов. Эти квадраты – не что иное, как бывшие пиксели.

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

В файлах векторной графики хранится не собственно рисунок, сделанный из пикселей, как в случае с фотографией, а точное математическое описание рисунка: описание координат всех линий, из которых сделаны контуры областей, и цветов заливки этих областей. Видимого рисунка, как такового, нет, одни описания. Это как если бы вы попросили свою знакомую прислать вам свою фотографию, а она вместо этого прислала письмо: «Глаза у меня серые, ушки маленькие» и так далее. Но для компьютера такого описания достаточно. Если фотографию компьютер направляет на экран прямо так, как она есть, пиксель за пикселем, то рисунок на экране компьютер по описанию рисует. И если вы, работая с векторным рисунком, сместили его на экране, увеличили или как-то по-другому изменили, то компьютер его заново мгновенно перерисовывает. Никто ему не помешает при любом увеличении рисовать четко, ведь описания математически точные.

Рисуем картинки

С этого момента мы будем говорить о работе с картинками в коде.

Устанавливать элементам управления свойство Image быстро и просто. Но для осуществления всего богатства работы с картинками, о которых я говорил, нужны и другие способы.

Объекты. В VB имеются специальные объекты для работы с картинками. Для нас главный из них – объект класса Bitmap. Он может работать со всеми упомянутыми форматами файлов. Имеются еще класс Metafile, учитывающий специфику работы с файлами векторной графики, и класс Icon, учитывающий специфику работы с иконками. Существует еще упомянутый выше класс Image, для которого классы Bitmap и Metafile являются «наследниками». Поэтому считается, что объекты классов Bitmap и Metafile принадлежат не только своим классам, но и типу Image (о наследовании читайте в 22.7.).

Объект класса Bitmap находится в оперативной памяти и невидим для нас. Его главное дело – получить картинку из файла и хранить ее. Картинка, естественно, тоже будет невидима. В памяти она может быть по нашему желанию подвергнута разнообразной обработке, а затем, когда нам нужно, она из объекта Bitmap попадает на поверхность формы или элемента управления, где мы ее и увидим.

Способ 1. Вот самый простой способ поместить картинку из файла в Bitmap, а оттуда безо всяких преобразований – на элемент управления:

Private Sub Button5_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button5.Click

Dim Картинка As New Bitmap("Spacescape.JPG")

PictureBox1.Image = Картинка

End Sub

Пояснения. Первый оператор создает объект Картинка класса Bitmap и тут же при помощи параметра конструктора помещает в него картинку из файла Spacescape.JPG. Следующий оператор просто присваивает эту картинку свойству Image элемента управления PictureBox1. О свойстве Image мы уже говорили.

Способ 2:

Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click

Dim Картинка As New Bitmap("Spacescape.JPG")

Dim Гр As Graphics = PictureBox2.CreateGraphics

Гр.DrawImage(Картинка, 0, 0)

End Sub

Здесь картинка не присваивается свойству Image элемента управления PictureBox2, а рисуется на этом элементе. Метод DrawImageобъекта Гр рисует содержимое объекта Картинка на элементе, в результате чего мы видим на нем картинку. Левый верхний угол картинки имеет на элементе управления координаты 0, 0.

Аналогично картинки можно рисовать и на форме, и на других элементах управления. Оба способа на первый взгляд дают один и тот же результат, но на самом деле между ними есть существенные различия, которые вы постепенно поймете. Самое бросающееся в глаза различие – нарисованная картинка стирается, как только элемент управления, на котором она нарисована, оказывается загорожен другими окнами или задвинут вами за край экрана. Картинка же, являющаяся свойством Image – не стирается.

У конструктора Bitmap есть много вариантов. Мы рассмотрим их позже, а сейчас поговорим поподробнее о методе DrawImage.

Несколько картинок на форме. Вот программа, рисующая на форме три картинки разных форматов:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

Dim Гр As Graphics = Me.CreateGraphics

'Создаем объекты Bitmap из графических файлов:

Dim Фото As New Bitmap("Spacescape.JPG")

Dim Векторный_рисунок As New Bitmap("DIME.WMF")

Dim Иконка As New Bitmap("FACE.ICO")

'Переносим картинки с объектов Bitmap на форму:

Гр.DrawImage(Фото, 0, 0)

Гр.DrawImage(Векторный_рисунок, 300, 50)

Гр.DrawImage(Иконка, 480, 50)

End Sub

Вот результат работы этой программы (Рис. 12.10).

Рис. 12.10

Левый верхний угол космического пейзажа имеет на форме координаты 0, 0. Обратите внимание, что рисунки векторной графики и иконки вовсе не обязаны иметь прямоугольную форму. Тем не менее, мы можем вообразить прямоугольники, описанные вокруг них. Поэтому можно сказать, что левый верхний угол векторного рисунка монеты имеет на форме координаты 300, 50. Маленькая иконка в виде круглой рожицы видна наверху монеты. Ее координаты – 480, 50.

Метафайлы и иконки. Вот для сведения программка, делающая то же самое с монетой и рожицей, но уже с использованием объектов не класса Bitmap, а классов Metafileи Icon:

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click

Dim Гр As Graphics = Me.CreateGraphics

'Работаем с метафайлом:

Dim Векторный_рисунок As New System.Drawing.Imaging.Metafile("DIME.WMF")

Гр.DrawImage(Векторный_рисунок, 300, 50)

'Работаем с иконкой:

Dim Иконка As New Icon("FACE.ICO")

Гр.DrawIcon(Иконка, 480, 50)

End Sub

Как видите, если классы Image, Bitmap и Icon принадлежат пространству имен System.Drawing, то класс Metafile принадлежит пространству имен System.Drawing.Imaging. Для рисования иконок есть свой метод – DrawIcon. В дальнейшем я не буду рассматривать специфику классов Metafile и Icon: