JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

JavaScript. Подробное руководство, 6-е издание

на обложку

Флэнаган Дэвид

Шрифт:

icon.setAttribute("stroke", "black"); // Такая же рамка,

icon.setAttribute("stroke-width", "2");

chart.appendChild(icon); // Добавить в диаграмму

// Добавить метку правее квадрата

var label = document.createElementNS(svgns, "text");

label.setAttribute("x", lx + 30); // Координаты текста

label.setAttribute("y", ly +

ЗО*і + 18);

// Стиль текста можно также определить посредством таблицы CSS-стилей

label.setAttribute("font-family", "sans-serif");

label.setAttribute("font-size", "16");

// Добавить текстовый DOM-узел в элемент <svg:text>

label.appendChild(document.createTextNode(labels[і]));

chart.appendChild(label); // Добавить текст в диаграмму

}

return chart;

}

Программный код в примере 21.2 относительно прост. Здесь выполняются некоторые математические расчеты для преобразования исходных данных в углы секторов круговой диаграммы. Однако основную часть примера составляет программный код, создающий SVG-элементы и выполняющий настройку их атрибутов. Чтобы этот пример мог работать в броузерах, не полностью поддерживающих стандарт HTML5, здесь формат SVG интерпретируется как грамматика XML и вместо метода

createElement

используются пространство имен SVG и метод

createElementNS

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

<svg:path>

. Этот SVG-элемент описывает рисование произвольных фигур, состоящих из линий и кривых. Описание фигуры определяется атрибутом

элемента

<svg:path>.

Основу описания составляет компактная грамматика символьных кодов и чисел, определяющих координаты, углы и прочие значения. Например, символ

означает «move to» (переместиться в точку), и вслед за ним должны следовать координаты X и У точки. Символ

означает «line to» (рисовать линию до точки); он рисует линию от текущей точки до точки с координатами, которые следуют далее. Кроме того, в этом примере используется символьный код

, который рисует дугу (arc). Вслед за этим символом следуют семь чисел, описывающих дугу. Точное описание нас здесь не интересует, но вы можете найти его в спецификации по адресу http://www.w3.org/TR/SVG/.

Обратите внимание, что функция

pieChart

возвращает элемент

<svg>,

содержащий описание круговой диаграммы, но она не вставляет этот элемент в документ. Предполагается, что это будет делать вызывающая программа. Диаграмма, изображенная на рис. 21.3, была создана с помощью следующего файла:

<html>

<head>

<script src="PieChart.js"x/scr.ipt>

</head>

<body onload="document.body.appendChild(

pieChart([12, 23, 34, 45], 640, 400, 200, 200, 150,

['красный','синий’,'желтый','зеленый'],

['Север','Юг', 'Восток', 'Запад'], 400, 100));

</body>

</html>

примере 21.3 демонстрируется создание еще одного SVG-изображения: в нем формат SVG используется для отображения аналоговых часов (рис. 21.4). Однако вместо создания дерева SVG-элементов с самого начала, в нем используется статическое SVG-изображение циферблата, встроенное в HTML-страницу. Это статическое изображение включает два SVG-элемента

<line>,

представляющих часовую и минутную стрелки. Обе линии направлены вверх, в результате чего статическое изображение часов показывает время 12:00. Чтобы превратить это изображение в действующие часы, в примере используется сценарий на языке JavaScript, устанавливающий атрибут

transform

каждого элемента

<liпе>

и поворачивающий их на углы, соответствующие текущему времени.

Обратите внимание, что в примере 21.3 разметка SVG встроена непосредственно в файл HTML5 и в ней не используются пространства имен XML, как в XHTML-файле выше. Это означает, что данный пример будет работать только в броузерах, поддерживающих возможность непосредственного встраивания разметки SVG. Однако если преобразовать HTML-файл в XHTML, тот же самый прием будет работать и в старых броузерах с поддержкой SVG.

Пример 21.3. Отображение времени посредством манипулирования SVG-изображением

<! D0CTYPE НТМ1_>

<html>

<head>

<title>Analog Clock</title>

<script>

function updateTime { // Обновляет SVG-изображение часов

// в соответствии с текущим временем

var now = new Date; // Текущее время

var min = now.getMinutes; // Минуты

var hour = (now.getHours % 12) + min/60; // Часы с дробной частью

var minangle = min*6; // 6 градусов на минуту