Загрузить! И побыстрее!..

Рыбников Александр

При создании сайта любой веб-мастер всегда стоит на распутье двух дорог: с одной стороны, необходимо создать каждую страничку таким образом, чтобы она выглядела достаточно красиво, что, как правило, требует использования некоторых графических элементов, с другой же стороны, чтобы она быстро грузилась на локальной машине пользователя. Как же найти эту золотую середину?

Следует отметить ту печальную истину, что существует немало графических элементов, которые весьма трудно оптимизировать без потери качества. При этом речь идёт не только о фотографиях, для которых существует множество способов прямой или косвенной оптимизации. Наглядным примером подобной графики являются и различного вида диаграммы, которые средствами стандартного HTML создать невозможно. Однако в некоторых случаях возникает задача, например, разместить на одной из странц сайта несколько круговых диаграмм. Как бы Вы их не ужимали с помощью gif-а, у Вас всё равно вес страницы неизбежно может увеличиться килобайт на 50-100, что по понятным причинам может привести к весьма печальным последствиям относительно посещения данной странички. И тут Вы можете задуматься о том, как было бы здорово, если бы такую диаграмму можно было бы нарисовать с помощью старого доброго HTML.

Такая возможность в некотором смысле существует. Для примера мы создадим две диаграммы (прямоугольную и круговую) исключительно с помощью кода. Правда, работать это будет исключительно в Internet Explorer, но и диаграмма тоже будет тематической - она будет показывать рейтинг популярности основных броузеров.

1.Создание прямоугольной диаграммы.

Для её создания мы будем использовать элемент управления Structured Graphics. Он позволяет строить различные графические объекты (дуги, секторы, прямоугольники, круги и т.п.) с помощью различных методов.

Идентификатор класса элемента управления Structured Graphics равен 369303C2-D7AC-11D0-89D5-00A0C90833E6. Он используется в теге <object>. Для построения различных геометрических фигур применяется тег <param> с именем вида LineXXXX и со значением равным свойству или методу.

Для построения первой фигуры параметр NAME равен Line0001, для второй - Line0002 и т.д.

Прямоугольную диаграмму мы будем создавать с помощью метода Rect(), имеющего следующий синтаксис:

Rect(Х1, У1, Х2, У2, R) - где:
Х1 - начальная координата по оси Х,
У1 - начальная координата по оси У,
Х2 - длина рисунка по оси Х,
У2 - высота рисунка по оси У,
R - угол поворота фигуры.

Для того, чтобы в полученный прямоугольник вписать текст, необходимо вызвать метод Text(), имеющий синтаксис: Text('text', X, Y, R).

Приведём необходимые фрагменты кода:
<object id="graphics"
classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"
style="height:200; width:200"> - устанавливает область для объекта шириной 200 пикселей и высотой 200 пикселей.
<PARAM NAME="Line0001" VALUE="SetLineColor(255, 0, 0)"> - устанавливет цвет линий.
<PARAM NAME="Line0002" VALUE="SetFillColor(0, 0, 255)"> - устанавливает цвет заливки.
<PARAM NAME="Line0003" VALUE="SetFillStile(1"> устанавливает тип заливки.
<PARAM NAME="Line0004" VALUE="SetFont('Arial',28)"> - устанавливает тип и размер шрифта.
<PARAM NAME="Line0005 VALUE="Rect(-5, -5, 8, 8, 0)"> - рисует первый прямоугольник.
...
<PARAM NAME="Line0002" VALUE="SetFillColor(0, 0, 255)"> - устанавливает цвет заливки для текста. Чтобы текст был залит полностью, а не только обведён контуром, важно поменять цвет.
<PARAM NAME="Line0008" VALUE="Text('Netscape', -50, -50, 90)"> - рисует текст в первом прямоугольнике с наклоном в 90 градусов.

Работающий вариант Вы можете увидеть здесь.

1.Создание круговой диаграммы.

Для создания круговой диаграммы нам потребуется ещё два метода:

Oval(X, Y, W, H, R) - метод, создающий эллипс, где:
X- координата центра эллипса по оси Х,
У- координата центра эллипса по оси У,
H - высота описанного вокруг него прямоугольника,
W - ширина описанного вокруг него прямоугольника,
R - угол поворота.

Pie(X, Y, W, H, R1, R2, R) - метод, создающий, сектор круга, где:
R1 - начальный угол сектора,
R2 - ширина сектора,
R - угол поворота.

<PARAM NAME="Line0010" VALUE="Pie(-75, -75, 80, 80, 0, 55, 240)">

Работающий вариант Вы можете посмотреть здесь.

Важно отметить, что, элемент управления Structured Graphics даёт куда больше возможностей, чем просто рисование диаграмм различного вида. Он включает в себя множество других методов, таких, как создание замкнутой сплайновой кривой, градиентная заливка, создание прямоугольника с закруглёнными углами и т.п. Но об этих возможностях мы, возможно, расскажем в последующих номерах журнала.

Удачного творчества!


Используются технологии uCoz