Основы компьютерной графики

Собственно с тем, как вставить изображение на страницу знакомы многие, я даже писал уже о том как с помощью php делать thumbnails - уменьшенные копии изображений. Так вот для более глубоко понимания процесса необходимо понимать некоторые общие вещи в теории графики. В этой статье постараюсь осветить понятие цвета и системы координат а также вкратце коснусь типов изображений. Материал не толко, и не столько об использовании библиотеки GD в php - скорее введение в теорию графики применительно к сайтостроению вообще.

Итак, сначала о цвете. В компьютерной графике используется модель RGB(red, green, blue) - т.е. три основных цвета, красный, зеленый и синий. Комбинируя эти цвета можно создать абсолютно любой цвет. Многие наверно помнят со школы что смесь синего и желтого образует зеленый, на самом деле из 3х цветов можно получить всю палитру. Белый цвет будет представлен этими 3мя цветами с максимальными значениями, черный - их полным отсутствием. Но это уже физика, не будем в нее углубляться. Итак, цвета. Значиния насыщенности, приведенные в десятиричную систему имеют значения в диапазоне от 0 до 255, т.е. белый цвет в системе RGB будет представлен как (255, 255, 255), красный цвет как (255, 0, 0). Для указания цвета в html могут быть использованы либо фиксированные названия цветов, например так "background-color: maroon;", либо должна быть применена функция rgb: "background-color: RGB(249, 201, 16);". Третий способ указания цвета связан с 16-ричной системой счисления(HEX), в ней каждый цвет задается в диапазоне 00-FF и перед значением ставится символ решетки "#", например: "background-color: #3366CC;". Последний пример допустимо записать и в таком виде: "background-color: #36C;". Такая запись менее наглядна, но экономит память - хотя и незначительно. Каким типом записи для обозначения цвета пользоваться - решать Вам, но наиболее часто употребляется 16-ричная форма, она поддерживается всеми графическими редакторами и имеет преимущество в компактности записи - что уменьшает размер таблицы стилей и ускоряет ее загрузку.

Максимальное количество цветов, которое доступно в модели RGB, равно 256 ? 256 ? 256 = 16,7 миллиона. Каждый цвет хранится в 8 битном числе FF(hex)=255(dec)=11111111(bin).Для перевода между системами счисления кстати может быть использован стандартный калькулятор ос windows, только его нужно перевести в "инженерный" вид. Ну собственно в системы счисления мы здесь не будем - поэтому продолжим о цветах. Итак, цвет, будучи представлен 3-мя 8-ми битными числами имеет глубину для модели RGB 8+8+8=24 бита. Обычно глубина цвета находится в диапазоне 1-64 бита. Битовая глубина, равная 1 позволяет использовать только 2 цвета - черный и белый, 8 битов дают возможность использовать 256 цветов. Глубина в 64 бита дает миллионы сочетаний. Библиотека GD для php позволяет оперировать как 8, так и 24 битовыми изображениями.

Система координат. Итак, с цвета разобрались. Теперь немного о координатах - со школы все помнят оси абцисс и ординат. Как правило рисовались они из одной точки и шли одна вверх, вторая вправо. Именовали их как правило латинскими буквами X,Y. Была еще 3я ось, Z - с ней связан применительно к нашей теме z-index, о нем я уже писал здесь. В случае компьютерной графики все почти так же, за исключением положения осей. Начальной точкой берется верхний левый угол:Система координат в компьютерной графике

Такой отсчет координат применяется как при верстке страницы, так и при использовании графических функций библиотеки GD в php. На рисунке представлено изображение размером 300*200px и даны координаты его углов.

Для чего вообще нужно понимать как устроена система координат? Для того чтобы понимать как происходит позиционирование. К примеру такая распространенная задача как наложение логотипа на изображение (может быть решена с помощью php и библиотеки GD)- его как правило располагают в нижнем правом углу. Для нашего примера координаты этого угла буду (299, 199) а не (299,0) как это казалось бы с точки зрения школьной геометрии.

 

Типы изображений. Изображения делятся на 2 типа: векторные и растровые.

В векторном изображении используются математические выражения, описывающие фигуры, из которых изображение состоит. Такие изображения хорошо подходят для диаграмм, графиков, разноцветных блок-схем и им подобных случаев, когда изображение может быть представлено математической моделью. Примером векторного формата является SVG (Scalable Vector Graphics - масштабируемая векторная графика).

Для хранения фотографий такой тип не подходит - здесь применяются растровые изображения. Они состоят из пиксельных (точечных) данных, к примеру изображение размером 10*10px состоит из 10*10=100 точек, для каждой из которых описывается значение цвета в модели RGB. GD библиотека в php позволяет генерировать изображения 3х основных типов графики для web - JPEG и PNG для PC и WBMP для PDA. Все эти изображения являются растровыми. Функции библиотки GD в php не позволяют генерировать векторную графику.

Все 3 упомянутые формата - со сжатием, т.е. в них применяются алгоритмы сокращения количества данных, необходимых для описания изображения. Так в  чем же разница?  Формат JPEG использует сжатие с потерями, в котором данные исходного изображения теряются в процессе сжатия. Формат хорошо подходит для хранения фотографий - когда небольшая потеря качества изображения может быть положена в угоду сокращения размера. Стоит только избегать нескольких повторных пересохранений, либо использовать для промежуточных результатов другие форматы. PNG реализует алгоритм сжатия без потерь, т.е. при распаковке изображения исходные данные будут сохранены в точности. Используется когда в изображении есть однотонные блоки, прямые лини и геометрически точные границы, которые будут точно воспроизведены при распаковке.

Ранние версии библиотеки GD в php(до 1.6) поддерживали формат GIF, который впоследствии (в связи с тем, что Unisys запатентовала алгоритм сжатия gif файлов) был заменен на поддержку PNG. В новых версиях осталась только поддержка чтения GIF файлов.

Покупайте со скидкой магазин devicestore.pro продадим недорого, со скидкой.