VML – векторный язык разметки

Формат VML – это ответ Microsoft на появление SVG. Подобно SVG, VML также является грамматикой языка XML, предназначенной для описания графических изображений. VML во многом напоминает SVG. Несмотря на то, что возможности формата VML не столь широки, как SVG, он предлагает полный набор примити_ вов рисования и имеет встроенную поддержку в IE начиная с версии 5.5. Компа_ ния Microsoft (и некоторые ее партнеры) передали формат VML консорциуму W3С для рассмотрения в качестве стандарта, но их усилия пока ни к чему не при_ вели. Лучшее из существующих описание VML, представленное компанией Mi_ crosoft, доступно на веб_сайте W3C по адресу http://www.w3.org/TR/NOTE' VML. Обратите внимание: несмотря на то, что этот документ размещен на сайтеW3C, формат VML еще не стандартизован, а его реализация является собствен_ ностью компании Microsoft.

Хотя VML – это очень мощная технология, ей так и не удалось завоевать попу_ лярность. Из_за не слишком широкого распространения¹ она не подвергалась тщательному документированию. Веб_сайты Microsoft обычно указывают на спецификации, переданные консорциуму W3C, как на авторитетный источник сведений. К сожалению, т. к. этот документ – лишь проект, он никогда не под_ вергался тщательному изучению с целью стандартизации и потому в отдельных местах страдает неполнотой, в других – неточностями. При работе с VML вам, скорее всего, придется идти путем проб и ошибок, экспериментируя с реализаци_ ей в IE в процессе создания требуемых изображений. Это предупреждение можно считать незначительным, если рассматривать VML как мощный механизм созда_ ния векторной графики на стороне клиента, тем более учитывая, что данный ме_ ханизм встроен в веб_броузер, который по_прежнему доминирует на рынке.

VML – это диалект XML, отличающийся от HTML, но IE не обладает полноцен_ ной поддержкой XHTML_документов, а его реализация модели DOM не поддер_ живает функции, различающие пространства имен, такие как document.crea_ teElementNS(). Работа с тегами в пространстве имен VML в IE обеспечивается с помощью HTML_атрибутов «поведения» (еще одно расширение, характерное для IE). Все HTML_файлы, содержащие VML_документы, в первую очередь должны объявить пространство имен, например так:

Это же пространство имен может быть объявлено иначе, специфичным только для IE (нестандартным) способом:

¹Насколько мне известно, Google Maps (http://local.google.com) – единственный высокопрофессиональный сайт, в котором используется технология VML.

570 Глава 22. Работа с графикой на стороне клиента

<xml:namespace ns="urn:schemas_microsoft_com:vml" prefix="v"/>

Затем с помощью следующего нестандартного CSS_объявления необходимо ука_ зать, как должны обрабатываться теги из этого пространства имен:

После того как все необходимые объявления сделаны, можно свободно переме_ шивать VML_ и HTML_код, как в следующем фрагменте, который создает нечто похожее на SVG_изображение, представленное на рис. 22.4:

<head><style>v\:* { behavior: url(#default#VML); }</style></head> <body>

Это красный квадрат:<v:rect style="width:10px;height:10px;" fillcolor="red"/> Это голубой круг:<v:oval style="width:10px;height:10px;" fillcolor="blue"/> </body>

</html>

Однако вернемся к теме этой главы, в которой основной упор делается на исполь_ зовании JavaScript_сценариев для динамического создания графических изобра_ жений на стороне клиента. В примере 22.10 демонстрируется, как построить круговую диаграмму средствами VML. Пример очень напоминает код построе_ ния круговой диаграммы средствами SVG, в нем просто SVG_примитивы рисова_ ния заменены VML_примитивами. Для простоты в этом примере объединены функции makeVMLCanvas(), pieChart() и программный код, который вызывает эти функции для вывода диаграммы. Результат работы это сценария здесь не пока_ зан, поскольку он ничем не отличается от диаграммы, полученной средствами SVG и представленной на рис. 22.5.

Пример 22.10. Рисование круговой диаграммы средствами JavaScript и VML

<!__

HTML_документ, использующий VML, должен объявить это пространство имен __>

<!__

Так связывается VML_поведение с пространством имен VML __>

* Создает и возвращает VML_элемент <v:group>, в котором будет размещен рисунок.

* Обратите внимание: возвращаемый элемент не добавляется в документ.

function makeVMLCanvas(id, pixelWidth, pixelHeight) { var vml = document.createElement("v:group"); vml.setAttribute("id", id);

vml.style.width = pixelWidth + "px"; vml.style.height = pixelHeight + "px";

vml.setAttribute("coordsize", pixelWidth + " " + pixelHeight);

// Для начала нарисовать белый прямоугольник с черной рамкой. var rect = document.createElement("v:rect");

22.4. VML – векторный язык разметки

rect.style.width = pixelWidth +	"px";
rect.style.height = pixelHeight	+ "px";
vml.appendChild(rect);
return vml;
}
/* Рисует диаграмму на "холсте" VML	*/
function pieChart(canvas, data, cx,	cy, r, colors, labels, lx, ly) {
// Отыскать	элемент canvas, если он задан значением атрибута id
if (typeof canvas == "string") canvas = document.getElementById(canvas);
// Получить	сумму значений всех	данных
var total =	0;
for(var i =	0; i < data.length;	i++) total += data[i];

// Рассчитать размер каждого сектора (в градусах) var angles = []

for(var i = 0; i < data.length; i++) angles[i] = data[i]/total*360;

// Цикл по всем секторам.

// Углы в VML измеряются в градусах/65535, отсчет начинается от крайней правой

// точки окружности (3 часа) и продолжается против часовой стрелки

startangle = 90; // Начало в 12часов. for(var i = 0; i < data.length; i++) {

// Подправить углы так, чтобы отсчет секторов начинался от крайней

// верхней точки окружности и продолжался по часовой стрелке.

var sa = Math.round(startangle * 65535); var a = _Math.round(angles[i] * 65536);

// Создать VML_элемент shape

var wedge = document.createElement("v:shape");

// В VML путь пера при рисовании фигуры описывается похожим

// на SVG образом

var path = "M " + cx + " "	+ cy +	// Перейти в	точку (cx,cy)
" AE " + cx + " " + cy	+ " " +	// Дуга с	центром	в (cx,cy)
r + " " + r + " " +		// Горизонтальный	и вертикальный радиусы
sa + " " + a +		// Начальный	угол	и общий угол
" X E";		// Закончить	линию в центре окружн.
wedge.setAttribute("path",	path); // Установить фигуру	сектора
wedge.setAttribute("fillcolor", colors[i]); //	Установить цвет
wedge.setAttribute("strokeweight", "2px"); //	Рамка

// Позиционировать сектор с помощью CSS_стилей. Координаты точек

// пути интерпретируются относительно размеров, поэтому каждой

// фигуре мы задаем размеры всего "холста".

wedge.style.position = "absolute"; wedge.style.width = canvas.style.width; wedge.style.height = canvas.style.height;

// Добавить фигуру в элемент canvas canvas.appendChild(wedge);

// Следующий сектор начинается там, где закончился предыдущий startangle _= angles[i];

// Создать VML_элемент <rect> для легенды

var icon = document.createElement("v:rect");

	Глава 22. Работа с графикой на стороне клиента

icon.style.left = lx + "px"; // CSS_позиционирование
icon.style.top = (ly+i*30) + "px";
icon.style.width = "20px";	// CSS_размеры
icon.style.height = "20px";
icon.setAttribute("fillcolor", colors[i]);	// Цвет сектора
icon.setAttribute("stroke", "black");	// Цвет рамки
icon.setAttribute("strokeweight", "2");	// Толщина рамки
canvas.appendChild(icon);		// Добавить в "холст"

// VML обладает широкими возможностями для работы с текстом,

// но большая часть текста – это просто HTML_код, который непосредственно

// добавляется в VML_рисунок с использованием координат рисунка

var label = document.createElement("div"); // <div> для текста label.appendChild(document.createTextNode(labels[i])); // Текст label.style.position = "absolute"; // CSS_позиционирование label.style.left = (lx + 30) + "px";

label.style.top = (ly + 30*i + 5) + "px"; label.style.fontFamily = "sans_serif"; // Стили текста label.style.fontSize = "16px"; canvas.appendChild(label); // Добавить текст в рисунок

}

function init() {

var canvas = makeVMLCanvas("canvas", 600, 400); document.body.appendChild(canvas); pieChart(canvas, [12, 23, 34, 45], 200, 200, 150,

["red", "blue", "yellow", "green"], ["Север", "Юг", "Восток", "Запад"], 400, 100);

}

</script>

</head>

</html>

22.5. Создание графики с помощью тега <canvas>

Следующая остановка в нашем путешествии по технологиям создания вектор_ ной графики на стороне клиента – тег <canvas>. Этот нестандартный HTML_тег специально предназначен для создания векторной графики на стороне клиента. Сам он не имеет визуального представления, но предоставляет JavaScript_сцена_ риям интерфейс для создания рисунков внутри тега <canvas>. Впервые тег <can_ vas> был введен компанией Apple в веб_броузере Safari 1.3. (Причина такого ра_ дикального расширения HTML кроется в том, что HTML_средства визуализации Safari использовались также в компоненте Dashboard (инструментальная па_ нель) рабочего стола Mac OS X, и компании Apple требовался механизм управле_ ния графикой в Dashboard.)

Броузеры Firefox 1.5 и Opera 9 последовали за Safari – оба также поддерживают тег <canvas>. Существует даже возможность использовать тег <canvas> в IE совме_ стно со свободно распространяемым JavaScript_кодом (изначально разработан_

22.5. Создание графики с помощью тега <canvas>

ным в Google), который обеспечивает работу тега <canvas> поверх VML (http://ex' canvas.sourceforge.net). Неофициальный консорциум производителей веб_бро_узеров продолжает прикладывать усилия по стандартизации тега <canvas>, предва_ рительные спецификации можно найти по адресу http://www.whatwg.org/specs/ web'apps/current'work.

Существенное отличие между тегом <canvas> и технологиями SVG и VML заклю_ чается в том, что тег <canvas> предоставляет прикладной интерфейс Canvas на базе JavaScript, предназначенный для создания изображений, в то время как SVG и VML описывают изображение в виде XML_документов. Функционально эти два подхода эквивалентны: любой из них может моделироваться с использованием другого. Однако внешне они совершенно отличаются, и каждый из них имеет свои сильные и слабые стороны. Например, из SVG_рисунков легко можно уда_ лять элементы. Чтобы удалить элемент из аналогичного рисунка, созданного в теге <canvas>, обычно требуется полностью ликвидировать рисунок, а затем соз_ дать его заново. Поскольку прикладной интерфейс Canvas основан на синтаксисе JavaScript, а рисунки, созданные с его помощью, получаются более компактны_ ми (чем SVG_ и VML_рисунки), я решил описать его в этой книге. Подробные све_ дения вы найдете в соответствующих разделах четвертой части книги.

Большая часть прикладного интерфейса Canvas определена не в элементе <can_ vas>, а в объекте «контекста рисования», получить который можно методом get_ Context() элемента, играющего роль «холста».¹ Этот сценарий рисует маленький красный квадрат и голубой круг, что является типичным для рисования в теге

<canvas>.

<head>

window.onload = function() { // Создает рисунок после загрузки документа

var canvas = document.getElementById("square"); //	Получить элемент холста
var context = canvas.getContext("2d");	//	Получить 2D_контекст
context.fillStyle = "#f00";	//	Цвет заливки _ красный
context.fillRect(0,0,10,10);	//	Залить квадрат
canvas = document.getElementById("circle");	//	Новый элемент холста
context = canvas.getContext("2d");	//	Получить его контекст
context.fillStyle = "#00f";	//	Цвет заливки _ голубой
context.beginPath();	//	Начать рисование
// Добавить в рисунок полную окружность с радиусом	5 и с центром в точке (5,5)
context.arc(5, 5, 5, 0, 2*Math.PI, true);
context.fill( );	//	Залить фигуру

}

</script>

</head>

<body>

Это красный квадрат: <canvas id="square" width=10 height=10></canvas>.

¹Этот метод требует единственный аргумент – строку "2d" – и возвращает контекст рисования, который реализует прикладной интерфейс для создания двухмерных изображений. В будущем если тег <canvas> будет расширен для создания трехмерных изображений, этот метод, по всей видимости, будет получать в виде аргумента строку "3d".

574 Глава 22. Работа с графикой на стороне клиента

Это голубой круг: <canvas id="circle" width=10 height=10></canvas>. </body>

В предыдущих разделах вы видели, что при использовании SVG и VML сложные фигуры описываются как «путь» пера, состоящий из линий и кривых, которые могут быть нарисованы или залиты цветом. В прикладном интерфейсе Canvas также используется нотация пути перемещения пера, только путь описывается не как строка символов и чисел, а как последовательность вызовов методов, та_ ких как beginPath() и arc() в данном примере. После того как описание пути за_ вершается, вызывается другой метод, такой как fill(), который обрабатывет этот путь. Порядок обработки определяется различными свойствами объекта контекста рисунка, такими как fillStyle.

Одна из причин, объясняющих такую компактность прикладного интерфейса Canvas, заключается в том, что он никак не поддерживает работу с текстом. Что_ бы вставить текст в графическое изображение тега <canvas>, вам придется вруч_ ную вставлять текст в рисунок в виде растрового изображения либо наклады_ вать текст в формате HTML поверх тега <canvas>, используя возможности пози_ ционирования CSS.

В примере 22.11 демонстрируется, как нарисовать круговую диаграмму в теге <canvas>. Большая часть этого кода покажется знакомой по примерам использова_ ния SVG и VML. Новый программный код в этом примере – это методы приклад_ ного интерфейса Canvas, описание которых вы найдете в четвертой части книги.

Пример 22.11. Рисование круговой диаграммы в теге <canvas>

<html>

<head>

// Создает и возвращает новый тег <canvas> с заданным id и размерами.

// Обратите внимание: этот метод не добавляет тег <canvas> в документ function makeCanvas(id, width, height) {

var canvas = document.createElement("canvas"); canvas.id = id;

canvas.width = width; canvas.height = height; return canvas;

}

/**

* Рисует круговую диаграмму в указанном теге <canvas>, который передается

* либо в виде ссылки на элемент, либо в виде id.

* Аргумент data _ это массив чисел: каждое число представляет

* отдельный сектор в диаграмме.

* Центр диаграммы определяется значениями cx и cy, а радиус _ r.

* Цвета секторов _ это HTML_строки цветов в массиве colors[].

* Легенда размещается в координатах (lx,ly), метки легенды _ в массиве labels[].

function pieChart(canvas, data, cx, cy, r, colors, labels, lx, ly) { // Получить объект canvas по id

if (typeof canvas == "string") canvas = document.getElementById(canvas);

// Рисование производится с использованием объекта контекста var g = canvas.getContext("2d");

22.5. Создание графики с помощью тега <canvas>

// Все линии будут иметь черный цвет и толщину 2 пиксела g.lineWidth = 2;

g.strokeStyle = "black";

// Сумма всех значений var total = 0;

for(var i = 0; i < data.length; i++) total += data[i];

// Рассчитать угловые размеры каждого сектора (в радианах) var angles = []

for(var i = 0; i < data.length; i++) angles[i] = data[i]/total*Math.PI*2;

// Цикл по всем секторам диаграммы

startangle = _Math.PI/2; // Начать с крайней верхней, а не с крайней

		// правой точки окружности
for(var i = 0; i <	data.length;	i++) {
// Это угол конца сектора
var endangle =	startangle +	angles[i];
// Нарисовать сектор
g.beginPath();		//	Начать новую фигуру
g.moveTo(cx,cy);	//	Переместиться в центр
	// Нарисовать линию до точки startangle и	дугу до точки endangle
	g.arc(cx,cy,r,startangle, endangle, false);
	g.closePath();	// Вернуться в центр фигуры и закончить рисование фигуры
	g.fillStyle = colors[i]; // Определить цвет заливки
	g.fill();	// Залить сектор
	g.stroke();	// Рамка сектора	(штриховая)

// Следующий сектор начинается там, где заканчивается предыдущий. startangle = endangle;

// Нарисовать прямоугольник в легенде g.fillRect(lx, ly+30*i, 20, 20); g.strokeRect(lx, ly+30*i, 20, 20);

// И вставить метку правее прямоугольника. Прикладной интерфейс Canvas

// не поддерживает работу с текстом, поэтому здесь просто добавляется

// обычный HTML_текст. Чтобы разместить текст правее прямоугольника

// поверх элемента canvas, используются возможности позиционирования CSS.

// Это было бы понятнее, если бы сам тег <canvas> позиционировался абсолютно var label = document.createElement("div");

label.style.position = "absolute";

label.style.left = (canvas.offsetLeft + lx+30)+"px"; label.style.top = (canvas.offsetTop+ly+30*i_4) + "px"; label.style.fontFamily = "sans_serif"; label.style.fontSize = "16px"; label.appendChild(document.createTextNode(labels[i])); document.body.appendChild(label);

}

function init() {

// Создать элемент canvas

var canvas = makeCanvas("canvas", 600, 400);

// Добавить в документ document.body.appendChild(canvas);

576 Глава 22. Работа с графикой на стороне клиента

// И нарисовать в нем круговую диаграмму pieChart("canvas", [12, 23, 34, 45], 200, 200, 150,

["red", "blue", "yellow", "green"], ["Север", "Юг", "Восток", "Запад"], 400, 100);

}

</script>

</head>