ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 23.05.2024
Просмотров: 29
Скачиваний: 0
Лабораторна робота №15
Тема: Робота з графікою в PHP.
Мета: ознайомитися з особливостями створення і відображення графічних об’єктів засобами мови РНР. Створити скрипти, що здійснюють опрацювання графіки.
Теоретичний розділ
Створення графічного лічильника відвідувань
Важлива особливість роботи з модулем GD полягає в тому, що скрипт, який формує новий малюнок, не повинен виводити хоть щось окрім самого малюнка (тобто в ньому не повинно бути викликів echo, printf і подібних їм функцій). Згодом зображення, сформоване PHP - скриптом, виводиться браузером методом вказівки URL цього скрипта як джерело даних, наприклад, <img src="pic.php">.
Створення нового малюнка в PHP починається або зі створення нової чистої "сторінки " (canvas) для малювання, або з завантаження і модифікації вже існуючого зображення. Але перед тим як почати процес виведення графічної інформації, необхідно вибрати його формат (тип MIME) за допомогою виклику функції header(str). Наприклад, для формату PNG необхідно використовувати наступний код:
header("Content-type: image/png");
Далі для створення області для малювання необхідно викликати функцію внутр int imagecreate (int x_size, int y_size), якій передати в якості параметрів x_size і y_size, відповідно, ширину і висоту (у пікселях) формованої картинки; при цьому функція поверне ідентифікатор створеної області для малювання. Якщо ж ми хочемо взяти за основу вже наявну картинку, то, залежно від її формату, потрібно викликати функцію imagepng, або imagejpeg, або imagegif, передавши як параметр ім'я файлу-картинки. Для виведення тексту існує функція int imagestring(int im, int font, int x, int y, string s, int col), якій потрібно передати: ідентифікатор області малювання, розмір шрифту (1-5), координату X початку тексту, координату Y початку тексту, сам текст і колір тексту відповідно. Для визначення кольору використовується конструкція виду
$white=ImageColorAllocate($im, 255, 255, 255)
Останні три числових параметра - гамма-складові необхідного кольору. Але оскільки кожен раз вказувати їх декілька нераціонально, слід створити include -файл з визначеннями основних кольорів colors.inc:
<?php
$white = ImageColorAllocate ($im, 255, 255, 255);
$black = ImageColorAllocate ($im, 0, 0, 0);
$red = ImageColorAllocate ($im, 255, 0, 0);
$green = ImageColorAllocate ($im, 0, 255, 0);
$blue = ImageColorAllocate ($im, 0, 0, 255);
$yellow = ImageColorAllocate ($im, 255, 255, 0);
$magenta = ImageColorAllocate ($im, 255, 0, 255);
$cyan = ImageColorAllocate ($im, 0, 255, 255);
$l_grey = ImageColorAllocate ($im, 221, 221, 221);
?>
Після того як ми намалювали засобами GD нашу картинку, її необхідно вивести в браузер. Для цього, залежно від формату малюнка необхідно викликати одну з функцій:
imagepng(int im [, string filename])
imagejpeg (int im [, string filename [, int quality]])
передавши їй як параметр ідентифікатор картинки. Якщо крім ідентифікатора області малювання вказати ім'я файлу, то зображення буде збережено на диску під цим ім'ям). Після того як ми завершили роботу з малюнком, необхідно звільнити займану ним пам'ять. Для цього служить функція imagedestroy (int im). Розглянемо роботу з цими функціями на прикладі.
Для початку створимо шаблони заголовка і HTML - документа, які будемо використовувати для того, щоб не засмічувати PHP-код конструкціями HTML:
header.tpl:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//RU">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Работа с графикой в php</title>
</head>
<body>
footer.tpl:
</body>
</html>
Припустимо, ми хочемо створити графічний лічильник відвідувань і у нас є файл-заготовка, в який потрібно "дописати" кількості відвідувань.
Тоді скрипт, який поміщає в заготовку лічильника дані про відвідування, може виглядати наступним чином (сам підрахунок відвідувань опущений):
counter.php:
<?php
header("Content-type: image/png");
$im =ImageCreateFromPNG("counter.png");
include "colors.inc";
//визначаємо розмір шрифту для вивода тексту
$fontSize=1;
//задаємо координати для вивода першого рядка
$x1=40; $y1=22;
//задаємо координати для вивода другого рядка
$x2=49; $y2=33;
//визначаємо загальну кількість відвідувачів
ImageString($im, $fontSize, $x1, $y1, "1 000 000", $blue);
//пишемо кількість відвідувачів сьогодня
ImageString($im, $fontSize, $x2, $y2, "10", $blue);
//виводимо картинку
ImagePNG($im);
//вивільняємо пам’ять, що займав малюнок
imagedestroy($im);
?>
Скрипт для відображення лічильника може бути таким:
<?php
include "header.tpl";
echo "<center><img src="counter.php"></center>";
include "footer.tpl";
?>
Створення лінійного графіка засобами бібліотеки GD
Для створення лінійного графіка нам слід познайомитися ще з декількома корисними функціями бібліотеки GD. У першу чергу нам знадобляться інструменти для малювання ліній. Для цього існує функція imageline (int im, int x1, int y1, int x2, int y2, int col), якій як параметрів потрібно передати ідентифікатор створеної вже області малювання, координати початкової та кінцевої точок, а також колір лінії. Для графіка, нам знадобляться координатні осі, які закінчуються стрілками. Для їх промальовки знадобиться ще одна функція, що створює замкнутий багатокутник довільної форми. Вона має наступний формат виклику: imagefilledpolygon(int im, array points, int num_points, int col), де im - ідентифікатор області малювання, points - масив, що містить координати точок багатокутника ((arr[0]=x0; arr[1]=y0; arr[2]=x1;.. і т д), num_points - кількість точок полігону, col - колір заповнення. Аналогічна функція - imagepolygon - призначена для створення незафарбованого багатокутника.
Приступимо до написання скрипта. Створимо новий файл і назвемо його line_chart.php. Для початку визначимо функцію промальовки осей координат, якою будемо передавати ширину і висоту області малювання. Так як ми плануємо надалі виводити підписи значень, що відкладаються по осях, то необхідно врахувати цей фактор і, відповідно, трохи змістити щодо центру точку, що позначає початок координат. Ось як може виглядати шукана функція:
<?php
function draw_axises($im_width,$im_heignt)
{
global $im,$black,$l_grey,$x0,$y0,$maxX,$maxY;
$x0=25.0; //початок вісі координат по X
$y0=20.0; // початок вісі координат по Y
$maxX=$im_width-$x0; //максимальне значення вісі координат по X в пікселях
$maxY=$im_heignt-$y0; //максимальне значення вісі координат по Y в пікселях
//малюємо вісь X
imageline($im, $x0, $maxY, $maxX, $maxY, $black);
// малюємо вісь Y
imageline($im, $x0, $y0, $x0, $maxY, $black);
//малюємо стрілку на вісі X
$xArrow[0]=$maxX-6; $xArrow[1]=$maxY-2;
$xArrow[2]=$maxX; $xArrow[3]=$maxY;
$xArrow[4]=$maxX-6; $xArrow[5]=$maxY+2;
imagefilledpolygon($im, $xArrow, 3, $black);
// малюємо стрілку на вісі Y
$yArrow[0]=$x0-2; $yArrow[1]=$y0+6;
$yArrow[2]=$x0; $yArrow[3]=$y0;
$yArrow[4]=$x0+2; $yArrow[5]=$y0+6;
imagefilledpolygon($im, $yArrow, 3, $black);
}
Ще одним важливим атрибутом графіка є координатна сітка. Для її створення напишемо ще одну функцію, якої в якості параметрів будемо передавати величину кроку в пікселах по осях X і Y і відстань між лініями сітки для кожної з осей:
function draw_grid($xStep,$yStep,$xCoef,$yCoef)
{
global $im,$black,$l_grey,$x0,$y0,$maxX,$maxY;
$xSteps=($maxX-$x0)/$xStep-1; //визначаємо кількість кроків по вісі X
$ySteps=($maxY-$y0)/$yStep-1; // визначаємо кількість кроків по вісі Y
//виводимо сітку по вісі X
for($i=1;$i<$xSteps+1;$i++)
{
imageline($im, $x0+$xStep*$i, $y0, $x0+$xStep*$i,
$maxY-1, $l_grey);
//за необхідності виводимо значення ліній сітки по вісі X
ImageString($im, 1, ($x0+$xStep*$i)-1, $maxY+2,
$i*$xCoef, $black);
// виводимо сітку по вісі Y
for($i=1;$i<$ySteps+1;$i++)
{
imageline($im, $x0+1, $maxY-$yStep*$i, $maxX,
$maxY-$yStep*$i, $l_grey);
//за необхідності виводимо значення ліній сітки по вісі Y
ImageString($im, 1, 0, ($maxY-$yStep*$i)-3,
$i*$yCoef, $black);
}
}
}
Тепер можна приступити до малювання самого графіка. Створюватися зображення буде викликом окремої функції, якій передаються масиви координат X і Y, кількість елементів у масивах і колір даного графіка. Ось як це можна реалізувати:
function draw_data($data_x,$data_y,$points_count,$color)
{
global $im,$x0,$y0,$maxY,$scaleX,$scaleY;
for($i=1;$i<$points_count;$i++)
{
//малюємо лінійний графік по точкам з масивів даних
imageline($im, $x0+$data_x[$i-1]*$scaleX,
$maxY-$data_y[$i-1]*$scaleY,
$x0+$data_x[$i]*$scaleX,
$maxY-$data_y[$i]*$scaleY,$color);
}
}
Отже, всі підзадачі створення графіка вирішені. Тепер скористаємося створеними нами функціями для безпосереднього формування зображення
//створюємо рисунок шириною 500 і висотою 400 пикселов
$im = @ImageCreate(500, 400);
include "colors.inc";
//малюємо вісі координат
draw_axises(500,400);
//задаємо масиви даних графіків
$x1[0]=1; $y1[0]=1;
$x1[1]=2; $y1[1]=4;
$x1[2]=3; $y1[2]=8;
$x1[3]=4; $y1[3]=16;
$x2[0]=1.5; $y2[0]=1;
$x2[1]=2.5; $y2[1]=4;
$x2[2]=3.5; $y2[2]=8;
$x2[3]=4.5; $y2[3]=16;
//обєднуємо дані з масивів даних для обчислення масштабу
$x=array_merge($x1,$x2);
$y=array_merge($y1,$y2);
//отримуємо максимальні значення елементів для кожного масиву
$maxXVal=max($x);
$maxYVal=max($y);
//обраховуємо масштаб перетворення даних в координати робочої області
$scaleX=($maxX-$x0)/$maxXVal;
$scaleY=($maxY-$y0)/$maxYVal;
//задаємо крок для координатної сітки в пикселах
$xStep=30;
$yStep=30;
//малюємо координатну сітку
draw_grid($xStep,$yStep,
round($xStep/$scaleX,1),
round($yStep/$scaleY,1),
true);
//малюємо перший графік
draw_data($x1,$y1,4,$red);
// малюємо другий графік
draw_data($x2,$y2,4,$blue);
//виводимо рисунок
ImagePNG($im);
//вивільняємо память
imagedestroy($im);
?>
Відображення графіка в браузері відбувається точно так, як і в першому прикладі:
<?php
include "header.tpl";
echo "<center><img src="line_chart.php"></center>";
include "footer.tpl";
?>
Кругова діаграма
У разі, якщо необхідно відобразити процентне співвідношення якихось параметрів, не обійтися без кругової діаграми. Будувати її зовсім не важко, якщо знати про існування функцій бібліотеки GD imagearc і imagefilledarc, які малюють дугу і закрашену дугу відповідно. Як параметри функції imagearc(int im, int cx, int cy, int w, int h, int s, int e, int col) потрібно вказати: im - ідентифікатор області малювання; сх, су - координати центру дуги; w, h - ширину і висота дуги (для побудови сектора кола вони повинні бути рівні); S, E - початковий і кінцевий кути дуги (в градусах, від 0 до 360) і звичайно ж col - колір дуги. Функція imagefilledarc () відрізняється від попередньої лише наявністю додаткового параметра стиль, який визначає спосіб заливки сектора. Цей параметр може приймати такі значення:
-
IMG_ARC_PIE - звичайний спосіб заливки, виходить зафарбований сектор;
-
IMG_ARC_CHORD (IMG_ARC_CHORD і IMG_ARC_PIE взаємовиключні параметри) - заливка по хорді, тобто виходить зафарбований трикутник;
-
IMG_ARC_NOFILL - без заливки, отримуємо просто дугу;
-
IMG_ARC_EDGED - використовується спільно з IMG_ARC_NOFILL і вказує, що кінцевий і початковий кути дуги повинні бути з'єднані з центром.
Ці параметри можна вказувати, використовуючи оператор | | (АБО).
Тепер, коли у нас є всі необхідні знання, створимо скрипт кругової діаграми в новому файлі circular_chart.php. Для початку створимо функцію малювання одного сектора кола необхідного кольору із заданим центром, радіусом, початковим і кінцевим кутами
<?php
function drawSegment($x0,$y0,$radius,$begAngle,$endAngle,$color)
{
global $im,$x0,$y0,$black;
//малюємо сектор круга відповідного розміру і кольору
imagefilledarc($im, $x0, $y0, $radius*2, $radius*2,
$begAngle, $endAngle,
$color, IMG_ARC_PIE);
