3. Інструктаж з ТБ
4. Вивчення нового матеріалу
Cтворення і виведення зображень растрової графіки можна здійснити за допомогою бібліотеки GD — див. опис. Для виконання практичної роботи достатньо ознайомитися лише з такими вказівками:
imagecreate,
imagecolorallocate,
imagedestroy,
imagefilledpolygon,
imagefttext,
imageline,
imagepng,
imagesetthickness,
imagedestroy.
Використання бібліотеки GD проілюструємо таким кодом (замість вказаних числових значень можна використати інші значення або вирази).
<?php
header("Content-type: image/png");
// створення зображення розміру 160 на 120 пікселів
$img = imagecreate(160, 120);
// задання (темно зеленого) кольору тла
$background_color = imagecolorallocate($img, 0, 127, 0);
// задання (жовтого) кольору тексту
$text_color = imagecolorallocate($img,255, 255, 0);
putenv('GDFONTPATH='.realpath('.')); // вказання шляху для бібліотеки GD у поточну теку
$font = 'Ubuntu-B.ttf'; // всказання назви файлу зі шрифтом
/* виведення тексту: "Все гаразд!" жовтого кольору під кут нахилу 30 градусів
з точки (лівий нижній кут першого символу) з координатами (30, 90)
шрифтом Ubuntu-B, розташованим у тій самій теці, що й код PHP, розміром 18 pt
*/
imagefttext ($img, 18, 30, 30, 90, $text_color, $font, "Все гаразд!");
imagepng($img); // виведення зображення на екран монітора
imagedestroy($img); // знищення зображення у пам'яті
?>У результаті виконання цього коду можна отримати таке зображення.
Затримка й встановлення часу виконання коду php можуть бути викликані дією таких вказівок:
sleep (2); // Затримка на 2 секунди (аргумент - ціле число секунд)
usleep (3000000); // Затримка на 3 секунди (аргумент - ціле число мікросекунд)
time_nanosleep (1, 500); // Затримка на 1 секундe і 500 наносекунд
time_sleep_until ($t); // Затримка до часу $t (у секундах) з 1979 року
$t=time(); // Поточний час (у секундах) з 1979 року
set_time_limit (4); // Встановлення часу виконання коду 4 секунди
set_time_limit (0); // Встановити необмежений час виконання коду
exit("текст"); // припинення виконання коду з виведенням рядка "текст"
Спрямування на іншу сторінку через певний час можна здійснити, використавши функцію header. Наприклад, вказівка:
header('Refresh: 3; URL=new.html');
спрямовує через 3 секунди на файл new.html поточної теки. Як значення URL можна вказати шлях на файл ПК чи ресурс мережі.
5. Закріплення вивченого матеріалу
Завдання 1. Використовуючи розв'язання завдання 1 наявної розробки уроку, створити сторінку html з формою такого вигляду:
Для перемикачів типу функції використати назву curve (властивість name) і значення 1, 2, 3, 4. Для полів введення використати назви nx, ny, n, t0, t1, x0, x1, y0, y1 (перелічено згори донизу). Наприкінці форми вивести зображення, записане у файлі graph.png (його поки немає). Натискання на кнопку з написом: "Побудувати графік" має призводити до виклику коду graph.php. Записати у файл з назвою Ваше_прізвище.html у вказане вчителем місце. Порівняти з очікуваним.
Завдання 2. Створити програму graph.php, яка працює згідно з таким алгоритмом.
Заповнити змінні $curve, $nx, $ny, $n, $t0, $t1, $x0, $x1, $y0, $y1 значеннями з глобального масиву $_REQUEST, що містить як POST-, так і GET-змінні. Для цього використати вказівки такого вигляду:
$a = (тип) trim($_REQUEST['a']);- a — назва змінної без символу $;
-
тип — int — для цілих значень $curve, $nx, $ny, $n,
тип — float — для дійсних значень $t0, $t1, $x0, $x1, $y0, $y1.
Створити зображення розміру $nx × $ny.
Задати білий колір тла, червоний колір кривих і чорний колір осей і написів.
Вказати шлях до шрифту Times New Roman при ОС Windows або FreeSerif при ОС Linux. В останньому випадку це може бути /usr/share/fonts/truetype/freefont/FreeSerif.ttf.
При справдженні нерівностей ($x0 < 0) і (0 < $x1):
зобразити вертикальну вісь ординат зі стрілкою вгору, що вказує додатний напрям на осі. Стрілка має вигляд рівнобедреного трикутника з основою 7 і висотою 12 пікселів;
підписати вісь ординат.
При справдженні нерівностей ($y0 < 0) і (0 < $y1):
зобразити горизонтальну вісь абсцис зі стрілкою праворуч, що вказує додатний напрям на осі. Стрілка має такий вигляд стрілки для осі ординат, повернутої на 90° за рухом годинникової стрілки;
підписати вісь абсцис.
Описати функції параметра t ∈ [t0; t1], що задають координати x, y точки кривої залежно від виду кривої таким чином:
function x($t,$c) { if ($c==4) return cos(5*$t); else return $t; } function def($t,$c) { if ($c==3) return ($t!=0.5); else return true; } function y($t,$c) { switch ($c) { case 1: return $t/2+0.75; case 2: return $t*$t/4 + $t/3 - 0.25; case 3: if (def($t)) return ($t/8+0.0625)/(2*$t-1); else return 0; case 4: return sin(7*$t); } }Встановити ширину лінії 3 пікселя.
Побудувати ламану лінію червоного кольору з вершинами на кривій, що відповідають значенням параметра, що розбивають діапазон значень параметра на $n рівних відрізків.
- Встановити час виконання коду 3 секунди.
- Вивести зображення на екран монітора й у файл graph.png.
- Знищити зображення в оперативній пам'яті.
- Через 3 секунди перенаправити на сторінку HTML початкової форми.
Таким чином, протягом 3 секунд користувач має можливість спостерігати результат виведення зображення у браузер, а потім — у файл graph.png. Файл буде відображено у місці напису: "Тут буде відображено графік функції".
Для квадрата, декартові координати точок якого лежать у межах від –1 до 1, отримати такі зображення:
Отриманий код записати з назвою Ваше прізвище у теку, вказану вчителем.
Порівняти створену програму з демонстраційним розв'язанням.
6. Підбиття підсумків уроку
Виставлення оцінок.
7. Домашнє завдання
Використавши створену форму форму, створити код для запису зображення у форматі векторної графіки SVG.
SVG — Scalable Vector Graphics (англійською: масштабована векторна графіка) — специфікація мови розмітки на основі XML або формат файлу двовимірної векторної графіки (статичної, анімованої, інтерактивної).
Ця специфікація є відкритим стандартом, розробленим робочою групою SVG Working Group організації World Wide Web Consortium.
Файл svg можна створити і редагувати:
- у середовищі редактора векторної графіки, наприклад, Inkscape;
- у середовищі текстового редактора;
- за допомогою програми, написаної довільною мовою програмування.
Потрібно використати останній варіант. Інакше кажучи, створити програму (мовою PHP), яка створить іншу програму (мовою розмітки) для зображення кривої, у тому числі графіка функції: лінійної, квадратичної, раціональної. Для цього немає необхідності вивчати детальний опис (англійською) з прикладами. Достатньо використати лише такі відомості.
<svg>…</svg> — контейнер, всередині якого (замість трьох крапок) записують всі інші вказівки svg (при створення статичного малюнку у файлі формату svg). Наприклад, контейнер:
<svg width="600" height="400" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg"> </svg>
передбачає створення малюнку розміру 600×600 пікселів.
<line /> — вказівка для побудови зображення відрізка прямої.
Наприклад, вказівка:
<line x1="12" y1="34" x2="56" y2="78" style="stroke:rgb(0,0,0);stroke-width:2" />
передбачає створення зображення відрізка прямої:
- суцільна лінія чорного кольору — див. style="stroke:rgb(0,0,0);
- товщини 2 — див. stroke-width:2;
- сполучено точки з екранними координатами (12; 34) і (56, 78).
<text>…</text> — контейнер, що описує форматування символів тексту і всередині якого записуєть контейнери для виведення послідовностей символів.
<tspan>…</tspan> — контейнер, що вказує яку послідовність символів і у якому місці потрібно розташувати.
Наприклад, вказівка:
<text style="font-size:12px;font-style:italic;font-weight:normal;font-family:Ubuntu,Calibri"><tspan x="12" y="34">текст для виведення</tspan></text>
передбачає таке виведення тексту:
- гарнітура — Ubuntu або Calibri, якщо Ubuntu немає;
- розмір — 12рх;
- накреслення — курсив (italic) звичайний (normal);
- відносні екранні координати верхнього лівого кута тексту — (12; 34).
Примітка. У разі потреби можна використати демонстраційне розв'язання мовою Ruby наявної розробки уроку.
Текст упорядкував Олександр Рудик.