Как рисовать на Web-странице

Проблема

Мне очень нужно нарисовать кое-что прямо на Web-странице. Использовать для этого соответствующие приложения Shockwave/Flash, апплеты Java и элементы ActiveX я не могу. Я даже готов смириться с некоторыми ограничениями, связанными с рисованием на Web-странице (наверняка эти ограничения будут присутствовать, поскольку Web-страница — все-таки текстовый документ). Как это можно сделать?

Решение

Да, Web-страница — это текстовый, а не графический документ, поэтому рисовать на ней просто так не получится. (Хотя вывести текст проще простого, в чем мы и убедились еще в главе 5.) Но существует описанный в [2] прием, который позволит нам рисовать прямо на Web-странице, не пользуясь никакими сторонними средствами.

1. Готовим графическое изображение, представляющее собой точку размером 1x1 пиксел того цвета, которым мы хотим рисовать.

2. Создаем новый стиль CSS, задающий абсолютное позиционирование (значение "absolute" атрибута стиля position) и, возможно, другие параметры.

3. В сценарии, реализующем рисование, вычисляем координаты очередной точки фигуры, которую мы рисуем.

4. В том же сценарии создаем новое графическое изображение, выводящее на экран созданную нами на первом шаге точку, задаем ему вычисленные на предыдущем шаге координаты и привязываем к нему стиль, созданный на шаге 2.

5. Если это не последняя точка рисуемой фигуры, переходим к шагу 3.

Народ замечает

Не самый изящный способ рисования... Скорее, будет полезен как иллюстрация, что рисование на Web-странице в принципе возможно, и как учебный пример. Похоже, именно поэтому автор и не стал особо развивать эту тему.

С другой стороны, часто ли вам приходится рисовать прямо на Web-странице?..

Вот несколько полезных функций, рисующих различные фигуры. Все они были разработаны автором книги на основе кода, представленного в [2].

Функция jspsDrawDot (листинг 6.3) рисует точку с заданными координатами внутри заданного элемента страницы. Ее формат вызова:

jspsDrawDot(<Координата Х>, <Координата Y>[, <Размер точки> [, <Элемент страницы>]]);

Если Размер точки не указан, он составит 1 пиксел. Если не указан Элемент страницы, точка будет нарисована прямо внутри тела Web-страницы.

Для задания интернет-адреса файла, содержащего само изображение точки, функция jspsDrawDot использует переменную jsps_PD_dotFileName. Эта переменная объявляется в листинге 6.3 перед объявлением данной функции и изначально хранит "универсальное" значение vdot.gif" (интернет-адрес файла dot.gif, находящегося в корневой папке сайта). Если кому-то из Web-программистов, использующих эту функцию, потребуется другое "рисующее" изображение, он просто присвоит интернет-адрес хранящего его файла этой переменной.

Народ советует

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

Функция jspsDrawDot не возвращает значения.

Листинг 6.3. Функция kspsDrawDot. рисующая на Web-странице точку

// Объявляем переменную jsps_DD_dotFileName, хранящую интернет-адрес // файла, содержащего "рисующую" точку var jsps_DD_dotFileName = "/dot.gif";

function jspsDrawDot(x, y, pSize, element) {

if (IpSize) pSize = 1;

if ((element) element = document.body;

var imgObj ect = document.createElement("IMG");

imgObject.style.position = "absolute";

imgObject.style.width = pSize.toString();

imgObject.style.height = pSize.toString();

imgObject.style.left = x. toString();

imgObject.style.top = y.toString();

imgObject.src = jsps_DD_dotFileName;

element.appendChild(imgObject); }

Функция jspsDrawLine (листинг 6.4) рисует прямую линию. Ее формат вызова:

jspsDrawLine(<Координата X начала>, <Координата Y начала>, <Координата X конца>, <Координата Y конца>[, <Размер точки> [, <Элемент странрщы>]]);

Назначение параметров этой функции понятно без объяснений. Она использует объявленную ранее функцию jspsDrawDot для рисования точек, из которых будет состоять рисуемая линия, и также не возвращает значения.

Листинг 6.4 Функция jspsDrawLine. рисующая на Web-странице прямую пинию

function jspsDrawLine(x1, y1, x2, y2, pSize, element) {

// Страхуемся на тот случай, если координаты заданы числами

//с плавающей точкой

xl = Math.floor(x1);

х2 = Math.floor(x2);

yl = Math.floor(y1);

y2 = Math.floor(y2);

if (IpSize) pSize = 1;

if ((element) element = document.body;

if (y1 == y2) {

// "Быстрое" рисование горизонтальной линии var imgObject = document.createElement("IMG"); imgObject.style.position = "absolute"; imgObject.style.width = Math.abs(x2 - xl) . toString() ; imgObject.style.height = pSize. toString() ; imgObject.style.left = ((x2 > xl) ? xl : x2).toString(); imgObject.style.top = y1.toString(); imgObject.src = jsps_DD_dotFileName ; element.appendChiId(imgObject); } else

if (xl == x2) {

// "Быстрое" рисование вертикальной линии var imgObject = document.createElement("IMG"); imgObject.style.position = "absolute"; imgObject.style.width = pSize.toString(); imgObject.style.height = Math.abs(y2 - y1) . toString() ; imgObject.style.left = x1.toString();

imgObject.style.top = ((y2 > y1) ? y1 : y2) . toString() ; imgObject.src = jsps_DD_dotFileName; element.appendChild(imgObject); } else {

// Рисование наклонных линий var k = Math.abs((y2 - yl) / (x2 - xl)); if (yl > y2) k = -k; var x = xl; while (x != x2) {

jspsDrawDot(x, yl + k * Math.abs(x - xl), pSize, element); if (x2 > xl)

x += .5 else

x -= .5; //Мы увеличиваем значение горизонтальной координаты на // 0,5 пиксела. Это сделает наши линии более, если так // можно сказать, монолитными } } }