CFA LogoCFA Logo Computer
Новости Статьи Магазин Драйвера Контакты
Новости
RSS канал новостей
В конце марта компания ASRock анонсировала фирменную линейку графических ускорителей Phantom Gaming. ...
Компания Huawei продолжает заниматься расширением фирменной линейки смартфонов Y Series. Очередное ...
Компания Antec в своем очередном пресс-релизе анонсировала поставки фирменной серии блоков питания ...
Компания Thermalright отчиталась о готовности нового высокопроизводительного процессорного кулера ...
Компания Biostar сообщает в официальном пресс-релизе о готовности флагманской материнской платы ...
Самое интересное
Программаторы 25 SPI FLASH Адаптеры Optibay HDD Caddy Драйвера nVidia GeForce Драйвера AMD Radeon HD Игры на DVD Сравнение видеокарт Сравнение процессоров

АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2003 ГОД

ПеРсоНальный опРос

Дмитрий СВИРЕПЧУК dima_sdi@i.com.ua

Окончание, начало см. в МК №6 (229).

Часть третья (полная теории)

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

В PHP работа с изображениями осуществляется через библиотеку GD. Поддерживаются два формата изображений: .png и .jpg. Раньше была реализована поддержка .gif’a, но сейчас ее убрали. Теперь давай разберем последовательность процесса создания изображения. Любая программа на PHP, которая работает с графикой, включает в себя три этапа:

1. Создание нового пустого изображения или открытие уже существующего файла.

2. Рисование, изменение рисунка.

3. Сохранение файла на диске или вывод в браузер.

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

Если необходимо создать пустой рисунок, используй функцию $pic=ImageCreate($x,$y). Функция создает рисунок размером XY. Далее весь доступ к рисунку будет вестись через переменную $pic (похоже на дескрипторы у файлов). Если тебе нужно открыть файл с диска, примени функцию $pic=imageCreateFromJpeg($file) или $pic=imageCreateFromPng($file). Эти две функции загружают в переменную $pic рисунки из .png и .jpg-файлов соответственно.

Практически любой программе нужно знать размеры рисунка. Для этого предназначены две функции: imageSX($pic) и imageSY($pic). Функции возвращают ширину и высоту соответственно. Причем размеры возвращается в пикселях, а в параметрах функции передается собственно изображение, которое нужно измерять.

Теперь перейдем к созданию палитры. Этот процесс состоит из задания отдельных цветов. Новый цвет определяется функцией imageColorAllocate($pic, $red, $green, $blue);

Все просто. В палитру рисунка $pic добавляется цвет, RGB-составляющие которого следующие: красный —$red, зеленый —$green, синий —$blue. Напомню, что значение каждой из этих переменных не должно превышать 255.

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

Эй, вставай, товарищ! Да, функция громоздкая и записывается неудобно, но не в обморок же падать. Сейчас я все объясню. Параметр $wherePic определяет, в какую картинку будет вставляться вырезанная область. $fromPic определяет, из какого изображения должен браться фрагмент. Переменные $fromX, $fromY соответственно определяют: координаты Х и Y верхнего левого угла вырезаемой области (на исходном рисунке). $fromW и $fromH — это ширина и высота вырезаемой области. $whereX, $whereY, $whereW и $whereH соответственно показывают координаты X и Y, в которые будет помещен вырезанный фрагмент, и его новую ширину и высоту.

Далее рисуем залитый прямоугольник: imageFilledRectangle($pic, $x1, $y1, $x2, $y2, $color). Функция рисует в изображении $pic прямоугольник, залитый цветом $color. Аргументы $x1, $y1, $x2, $y2 — это координаты двух противоположных углов будущего прямоугольника. Именно при помощи этой функции мы и будем выводить столбцы нашей с тобой диаграммы. Следующая функция —imageRectangle() — имеет те же параметры, что и предыдущая, и тоже рисует прямоугольник, только он не имеет заливки. Толщина границы один пиксель.

Функция imageLine($pic, $x1, $y1, $x2, $y2, $color) рисует прямую линию из точки (x1;y1) в точку (x2;y2) цветом $color.

Теперь перейдем к криволинейным фигурам. Для того чтобы рисовать дуги (окружности или эллипса) пользуйся функцией imageArc($pic, $x, $y, $w, $h, $s, $e, $color). Все работает предельно просто. Как всегда, первый и последний параметры — имя картинки и цвет. Следующих четыре параметра — это, соответственно, координаты верхнего левого угла прямоугольника и его ширина с высотой. Что за прямоугольник такой? Это воображаемый прямоугольник, в который вписывается эллипс, дугу которого ты рисуешь. Если задать ширину и высоту равными, то тогда у тебя получится окружность. Аргументы $s и $e — начальный и конечный углы отображаемой дуги. Отсчет ведется в градусах, по часовой стрелке от горизонтальной оси. Получившаяся фигура не заливается, а просто прорисовывается линия.

Функция imageSetPixel($pic, $x, $y, $color) много на себя не берет. Просто в рисунке $pic окрашивает пиксель с координатами ($x;$y) в цвет $color.

Ну и последняя функция для рисования —imageFill($pic, $x, $y, $color) — предназначена для заливки любой области нужным цветом. Она работает по такому же принципу, как и заливка в обычных графических редакторах. Опять же первый и последний аргументы определяют соответственно рисунок и цвет заливки. Координаты x и y задают ту точку, в которой начинается заливание.

Теперь приступим к работе с текстом. Функция imageString($pic, $font, $x, $y, $str, $color). Параметр $font должен принимать значение от одного до пяти в зависимости от того, шрифтом какого размера тебе нужно печатать (их пять встроенных). Если же ты сам открывал шрифт (как это делается, я не буду объяснять), то тогда цифра может быть иной. Координаты x и y определяют вершину верхнего левого угла прямоугольника, в который будет вписана надпись. В переменной $str хранится собственно строка, которая должна выводиться.

Теперь разберемся с последним этапом: выводом изображения. Перед тем, как что-то выводить, необходимо показать, что далее идущие данные — это именно рисунок. Делается это при помощи уже знакомой нам функции Header():

Следующая функция собственно выводит изображение:

Если же твое изображение в .png, то тогда предыдущие две функции принимают следующий вид:

Также функциям imageJpeg() и ImagePng() можно задать второй параметр — имя файла. Именно в него и сохранится рисунок, и тогда никакого вывода в браузер посетителя не последует.

Часть четвертая (опять практическая и умеющая рисовать)

Теперь вернемся к скрипту. Снова придержи лошадей и выполни еще один подготовительный этап. Дело в том, что на рисунке будет меняться далеко не все. Фон, оси, подписи под ними и под колонками остаются неизменными. Следовательно, мы не будем рисовать эти элементы при каждом вызове скрипта, и тем самым сбережем драгоценное время посетителя и память драгоценного сервера. Открывай любой графический редактор и рисуй в нем нечто похожее на мой рисунок. Сохраняй его в .jpg. Все! Ты дождался — теперь ты, наконец, увидишь последнюю часть скрипта. Поскорее записывай ее в draw.php.

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

Здесь вычисляем количество процентов голосов за каждый вариант. Также отсчитываем общую сумму голосов; ее мы тоже будем выводить.

Создаем новый рисунок $chart, беря его из файла chart.jpg. Собственно, именно на этом рисунке и должен быть изображен фон нашей будущей диаграммы.

Создаем три цвета. Черный — для надписей, желтый — для столбиков. Синим цветом создается эффект трехмерности столбцов диаграммы. Для этого за основным столбцом, с небольшим сдвигом вверх и вправо, мы нарисуем синий столбец такого же размера.

Рисуем восемь прямоугольников и подписи к ним. Объясню назначение незатронутых ранее функций. ImageFontWidth($font) возвращает ширину символов шрифта $font. Я раньше не акцентировал внимание на том, что мы работаем с фиксированными шрифтами, следовательно, все их символы имеют одинаковую высоту и ширину. ImageFontHeight($font) возвращает ширину шрифта, заданного ей в качестве аргумента. Strlen($str) получает аргументом строку и возвращает количество символов в ней.

Также следует заметить, что мы рисуем столбики диаграммы из расчета: на каждый процент голосов — два пикселя столбика. Следовательно, высота рисунка должна соответствовать максимальному размеру столбца гистограммы. Большая часть координат взаиморасположения элементов рисунка была подобрана вручную. Исключение составляет только центрирование подписей к столбцам и вертикальное расположение этих подписей.

Выводим общее количество проголосовавших.

Выводим рисунок в браузер. Заканчиваем скрипт.

Теперь для того чтобы вставить нашу картинку в web-страницу, поставь там такой код: <img src=”draw.php”> Круто, да? Фактически картинка нигде и не хранится.

Часть печальная (потому что заключительная)

Этим заканчивается процесс написания скрипта для системы опроса посетителей твоего сайта. Надеюсь, как установить скрипт на сайте, ты знаешь. На конкретном примере «колбасной статистики» было описано много полезных функций (преимущество отдавалось работе с графикой). Некоторые функции мы не успели рассмотреть — работа со шрифтами TrueType, строковые функции и т.д.

Не стоит думать, что после выхода этого номера «МК» на всех сайтах появятся системы опроса любителей колбасы! Легко догадаться, что, немного покопавшись и потрудившись, можно расширить возможности и способности этого скрипта. Но как говорится, лучшее — враг хорошего. Если у тебя есть вопросы или идеи по этой и другим темам, пиши мне на dima_sdi@i.com.ua. Я отвечу тебе, а когда писем наберется много, возможно, мы перенесем нашу встречу на страницы «МК»!

Рекомендуем ещё прочитать:






Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:

RSS
Комментарий:
Введите символы или вычислите пример: *
captcha
Обновить





Хостинг на серверах в Украине, США и Германии. © sector.biz.ua 2006-2015 design by Vadim Popov