Веб-инструмент
Веб-мастерская
Данная группа функций позволяет рисовать точки, линии, геометрические фигуры.
Функции данной группы принимают в качестве первого параметра дескриптор открытого изображения $image. Последний параметр $color всех функций данного раздела представляют собой дескриптор цвета.
Функции рисования
| Функция | Описание |
| imagessetpixel($image, $x, $y, $color) |
Пиксел в точке с координатами $x, $y |
| imageline($image, $x1, $y1, $x2, $y2, $color) |
Линия от точки с координатами $x1, $y1 до точки с координатами $x2, $y2 |
| imagedashedline ($image, $x1, $y1, $x2, $y2, $color) |
Штрихпунктирная линия от точки с координатами $x1, $y1 до точки с координатами $x2, $y2 |
| imagerectangle ($image, $x1, $y1, $x2, $y2, $color) |
Прямоугольник с левым верхним углом в точке с координатами $x1, $y1 и правым нижним углом в точке с координатами $x2, $y2 |
| imagepolygon($image, $points, $num_points, $color) |
Многоугольник с координатами (Х,У) вершин, представленных в массиве $points |
| imagearc($image, $cx, $cy, $w, $h, $s, $e, $color) |
Дуга эллипса. Параметры $cx, $cy задают координаты эллипса по оси абсцисс и ординат соответственно. Параметры $w, $h задают ширину и высоту эллипса, а $s, $e — начальный и конечный углы сектора в градусах (нулевая позиция соответствует 3 часам) |
| imageellipse($image, $cx, $cy, $w, $h, $color) |
Эллипс. Центр эллипса находится в точке с координатами $cx, $cy. Параметры $w, $h задают ширину и высоту эллипса |
| imagefilledrectangle ($image, $x1, $y1, $x2, $y2, $color) |
Закрашенный прямоугольник с левым верхним углом в точке с координатами $x1, $y1 и правым нижним углом в точке с координатами $x2, $y2 |
| imagefilledrolygon ($image, $points, $num_points, $color) |
Закрашенный многоугольник, с количеством вершин $num_points с координатами (Х,У), содержащимися в массиве точек $points |
| imagefilledarc($image, $cx, $cy, $w, $h, $s, $e, $color, $style) |
Сектор эллипса с заливкой. Параметры $cx, $cy задают координаты эллипса по оси абсцисс и ординат соответственно, $w, $h — ширину и высоту эллипса, $s, $e — начальный и конечный углы сектора в градусах (нулевая позиция соответствует 3 часам). Параметр $style определяет стиль формирования сектора и может принимать следующие константы: IMG_ARC_PIE —соединяет начальную и конечную точки на окружности кривой линией, повторяющей окружность; IMG_ARC_CHORD —соединяет начальную и конечную точки на окружности прямой линией; IMG_ARC_NOFILL —рисуемый сектор не закрашивается; IMG_ARC_EDGED —начальная и конечная точки соединяются с центром окружности. Константы могут объединяться при помощи побитового ИЛИ, однако IMG_ARC_PIE и IMG_ARC_CHORD являются взаимоисключающими и не могут применяться совместно. |
| imagefilledellipse ($image, $cx, $cy, $w, $h, $color) |
Закрашенный эллипс с центром в точке с координатами $cx, $cy, шириной $w и высотой $h |
| imagefill($image, $x, $y, $color) |
Заливка цветом $color области, ограниченной пикселями, цвет которых не совпадает с цветом точки с координатами $x, $y |
| imagefilltoborder ($image, $x, $y, $border, $color) |
Заливка цветом $color области, ограниченной пикселями, цвет которых не совпадает с указанными в дескрипторе $border. border — идентификатор цвета контура |
Кривая Безье — это сглаженная кривая, построенная по координатам (Х,У) четырех точек при помощи системы параметрических уравнений. Система уравнений выглядит следующим образом:
Параметр t принимает произвольное значение от 0 до1, что позволяет получить координаты любой точки (Х,У) сглаженной кривой.
Создадим веб-приложение, запрашивающее у пользователя четыре точки с координатеми 
и отражающие график сглаженной кривой с количеством точек, равным 1000.
Построение сглаженной кривой
<?php
if(!empty($_POST))
{
$x1 = $_POST['x1'];
$x2 = $_POST['x2'];
$x3 = $_POST['x3'];
$x4 = $_POST['x4'];
$y1 = $_POST['y1'];
$y2 = $_POST['y2'];
$y3 = $_POST['y3'];
$y4 = $_POST['y4'];
if(!empty($x1) && !empty($y1) &&
!empty($x2) && !empty($y2) &&
!empty($x3) && !empty($y3) &&
!empty($x4) && !empty($y4))
for($t = 0.0; $t <= 1.0; $t += 0.001)
{
$x[] = (1 - $t) * (1 - $t) * (1 - $t) * $x1 +
3 * $t * (1 - $t) * (1 - $t) * $x2 +
3 * $t * $t * (1 - $t) * $x3 +
$t * $t * $t * $x4;
$y[] = (1 - $t) * (1 - $t) * (1 - $t) * $y1 +
3 * $t * (1 - $t) * (1 - $t) * $y2 +
3 * $t * $t * (1 - $t) * $y3 +
$t * $t * $t * $y4;
}
// Определяем максимальные и минимальные
// значения по осям X и Y
$max_x = $min_x = $x[0];
$max_y = $min_y = $y[0];
for($i = 0; $i < count($x); $i++)
{
if($max_x < $x[$i]) $max_x = $x[$i];
if($min_x > $x[$i]) $min_x = $x[$i];
if($max_y < $y[$i]) $max_y = $y[$i];
if($min_y > $y[$i]) $min_y = $y[$i];
}
// Ширина изображения
$width = 100;
// Высота изображения
$height = 100;
// Создаем пустое изображение с 10-пиксельными
// отступами по краям
$img = imagecreatetruecolor($width + 20, $height + 20);
// Заливаем фон белым цветом
$white = imagecolorallocate($img, 255, 255, 255);
imagefill($img, 0, 0, $white);
// Черный цвет для линии
$black = imagecolorallocate($img, 0, 0, 0);
// В цикле отрисовываем линию
for($i = 0; $i < count($x) - 1; $i++)
{
// Масштабируем координаты
$x1 = 10 + intval(($x[$i] - $min_x)*$width/($max_x - $min_x));
$y1 = 10 + intval(($max_y - $y[$i])*$height/($max_y - $min_y));
$x2 = 10 + intval(($x[$i + 1] - $min_x)*$width/($max_x - $min_x));
$y2 = 10 + intval(($max_y - $y[$i + 1])*$height/($max_y - $min_y));
// Рисуем линию
imageline($img, $x1, $y1, $x2, $y2, $black);
}
// Вычисляем координаты исходных точек
$x1 = 10 + intval(($_POST['x1'] - $min_x)*$width/($max_x - $min_x));
$y1 = 10 + intval(($max_y - $_POST['y1'])*$height/($max_y - $min_y));
$x2 = 10 + intval(($_POST['x2'] - $min_x)*$width/($max_x - $min_x));
$y2 = 10 + intval(($max_y - $_POST['y2'])*$height/($max_y - $min_y));
$x3 = 10 + intval(($_POST['x3'] - $min_x)*$width/($max_x - $min_x));
$y3 = 10 + intval(($max_y - $_POST['y3'])*$height/($max_y - $min_y));
$x4 = 10 + intval(($_POST['x4'] - $min_x)*$width/($max_x - $min_x));
$y4 = 10 + intval(($max_y - $_POST['y4'])*$height/($max_y - $min_y));
// Отрисовываем точки
imagefilledellipse($img, $x1, $y1, 7, 7, $black);
imagefilledellipse($img, $x2, $y2, 7, 7, $black);
imagefilledellipse($img, $x3, $y3, 7, 7, $black);
imagefilledellipse($img, $x4, $y4, 7, 7, $black);
// Выводим изображение в браузер
header('Content-type: image/jpeg');
imagejpeg($img);
exit();
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Построение сглаженной кривой</title>
</head>
<body>
<table>
<form method=post>
<tr align=center>
<td>Координата (x1, y1)</td>
<td><input type=text name=x1 size=3 value="<?= $_POST['x1'] ?>"></td>
<td><input type=text name=y1 size=3 value="<?= $_POST['y1'] ?>"></td>
</tr>
<tr align=center>
<td>Координата (x2, y2)</td>
<td><input type=text name=x2 size=3 value="<?= $_POST['x2'] ?>"></td>
<td><input type=text name=y2 size=3 value="<?= $_POST['y2'] ?>"></td>
</tr>
<tr align=center>
<td>Координата (x3, y3)</td>
<td><input type=text name=x3 size=3 value="<?= $_POST['x3'] ?>"></td>
<td><input type=text name=y3 size=3 value="<?= $_POST['y3'] ?>"></td>
</tr>
<tr align=center>
<td>Координата (x4, y4)</td>
<td><input type=text name=x4 size=3 value="<?= $_POST['x4'] ?>"></td>
<td><input type=text name=y4 size=3 value="<?= $_POST['y4'] ?>"></td>
</tr>
<tr>
<td></td>
<td cols=2><input type=submit value="Сгладить"></td>
</tr>
</form>
</table>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
При первой загрузке скрипта выводится HTML-форма, позволяющая задать координаты четырех точек.
После того, как форма будет заполнена и нажата кнопка Сгладить, данные отправляются обработчику, который выполняет сглаживание по приведенным выше формулам, отрисовывает точки при помощи функции imagefilledellipse() и формирует линию при помощи функции imageline().
Результат работы приложения
Пусть значения столбцов задаются в процентах (от 0 до 100) в массиве $rows.
Процентное задание столбцов в массиве $rows
<?php
//Значения столбцов от 0 до 100
$rows = array (80, 75, 32, 20);
?>
Построение гистограммы
<?php
// Значение столбцов от 0 до 100
$rows = array(80, 75, 53, 32, 20);
// Ширина изображения
$width = 200;
// Высота изображения
$height = 200;
// Ширина одного столбца
$row_width = 30;
// Ширина интервала между столбцами
$row_interval = 5;
// Создаем пустое изображение
$img = imagecreatetruecolor($width, $height);
// Заливаем изображение белым цветом
$white = imagecolorallocate($img, 255, 255, 255);
imagefill($img, 0, 0, $white);
for($i = 0, $y1 = $height, $x1 = 0; $i < count($rows); $i++)
{
// Формируем случайный цвет для каждого из столбца
$color = imagecolorallocate($img,
rand(0, 255), rand(0, 255), rand(0, 255));
// Нормирование высоты столбца
$y2 = $y1 - $rows[$i]*$height/100;
// Определение второй координаты столбца
$x2 = $x1 + $row_width;
// Отрисовываем столбец
imagefilledrectangle($img, $x1, $y1, $x2, $y2, $color);
// Между столбцами создаем интервал в $row_interval пикселей
$x1 = $x2 + $row_interval;
}
// Выводим изображение в браузер, в формате GIF
header ("Content-type: image/gif");
imagegif($img);
?>
В окне веб-браузера это будет выглядеть ТАК.
Результат работы скрипта
Скрипт использует значения элементов массива $rows как процентные величины для формирования в цикле for гистограммы. На каждой итерации формируется случайный цвет, который используется для отрисовки очередного столбца гистограммы. Столбец формируется при помощи функции imagefilledrectandle(), которая рисует заданный прямоугольник.
& Пусть доли секторов заданы массивом $rows. При построении круговой диаграммы следует помнить, что в круге 360 градусов, и значения столбцов массива $rows следует нормировать таким образом, чтобы их сумма ранялась 360.
Построение круговой диаграммы
<?php
// Значения столбцов от 0 до 100
$rows = array(80, 75, 53, 32, 20);
// Нормируем значения массива $rows
// таким образом, чтобы их сумма
// составляла 360 градусов
$summ = array_sum($rows);
for($i = 0; $i < count($rows); $i++)
{
$rows[$i] = intval($rows[$i]*360/$summ);
}
// Создаем пустое изображение,
// размером 201x201 пикселей
$img = imagecreatetruecolor(201, 201);
// Определение белого цвет на изображении
$white = imagecolorallocate($img, 255, 255, 255);
imagefill($img, 0, 0, $white);
// Переменные $cy и $cy определяют
// центр круговой диаграммы
$cx = $cy = 100;
// Переменные $w и $h определяют
// ширину и высоту диаграммы
$w = $h = 200;
$start = 0;
foreach ($rows as $value)
{
// Формируем случайный цвет
// для каждого сектора
$color = imagecolorallocate($img,
rand(0, 255),
rand(0, 255),
rand(0, 255));
// Определяем конечный угол сектора
$angle_sector = $start + $value;
// Отрисовываем сектор
imagefilledarc($img, $cx, $cy, $w, $h, $start, $angle_sector,
$color, "IMG_ARC_PIE || IMG_ARC_EDGED");
// Увеличиваем значение начального угла сектора
$start += $value;
}
// Вывод изображения в окно браузера
header ("Content-type: image/gif");
imagegif($img);
?>
В окне веб-браузера это будет выглядеть ТАК.
Результат работы скрипта
Похожие материалы по теме:
Обсудить на форуме