Создание графики средствами Flash

Каждая из обсуждавшихся до сих пор в этой главе технологий создания вектор_ ной графики имеет ограниченный круг применения: тег <canvas> доступен толь_ ко в броузерах Safari 1.3, Firefox 1.5 и Opera 9; технология VML может (и всегда будет) применяться только в IE, а встроенной поддержкой SVG обладает только броузер Firefox 1.5. Конечно, существуют модули поддержки SVG и для других броузеров, но эти модули пока не получили широкого распространения.

Один из мощнейших модулей векторной графики, который у многих (практиче_ ски у всех) установлен, – это Flash_плеер компании Adobe (прежде – Macrome_ dia). Flash_плеер имеет собственный язык сценариев, который называется Acti_ onScript (фактически – диалект JavaScript). Начиная с версии 6 Flash_плеер пре_ доставляет простой, но мощный прикладной интерфейс создания изображений в виде ActionScript_кода. Кроме того, Flash версий 6 и 7 предоставляет ограничен_ ные средства взаимодействия между клиентским JavaScript_кодом и Action_ Script_кодом, что дает возможность из JavaScript_сценариев посылать подклю_ чаемому Flash_модулю команды рисования, которые исполняются интерпрета_ тором ActionScript.

Материал этой главы ориентирован на Flash 8, к моменту написания этих строк данная версия была самой новой. Flash 8 включает прикладной интерфейс Exter_ nalInterface, который существенно упрощает экспорт ActionScript_методов, так что они могут совершенно прозрачно вызываться из JavaScript_сценариев. В гла_ ве 23 продемонстрировано, как вызывать методы рисования Flash 6 и 7.

Для рисования средствами Flash необходим файл с расширением .swf, который сам по себе не выполняет рисование, но экспортирует в JavaScript_сценарий прикладной интерфейс для работы с графикой.¹ Мы начнем рассмотрение с Ac_ tionScript_файла, содержимое которого приводится в примере 22.12.

Пример 22.12. Canvas.as

import flash.external.ExternalInterface;

class Canvas {

// Свободно распространяемый компилятор mtasc автоматически вставит

// вызов метода main() в скомпилированный SWF_файл. Если для создания

¹ Программный код примера 22.13, создающий круговую диаграмму, использует этот прикладной интерфейс рисования, но я не буду описывать его здесь. Всю необходимую документацию можно найти на веб_сайте компании Adobe.

// файла Canvas.swf вы используете Flash IDE, вам потребуется вызвать

// метод Canvas.main() из первого кадра ролика.

static function main( ) { var canvas = new Canvas( ); }

// Этот конструктор содержит код инициализации нашего Flash_класса Canvas function Canvas() {

// Определить поведение холста при изменении размеров Stage.scaleMode = "noScale";

Stage.align = "TL";

// Импортировать функции рисования Flash API ExternalInterface.addCallback("beginFill", _root, _root.beginFill); ExternalInterface.addCallback("beginGradientFill", _root,

_root.beginGradientFill); ExternalInterface.addCallback("clear", _root, _root.clear); ExternalInterface.addCallback("curveTo", _root, _root.curveTo); ExternalInterface.addCallback("endFill", _root, _root.endFill); ExternalInterface.addCallback("lineTo", _root, _root.lineTo); ExternalInterface.addCallback("lineStyle", _root, _root.lineStyle); ExternalInterface.addCallback("moveTo", _root, _root.moveTo);

// А также экспортировать функцию addText(), представленную далее ExternalInterface.addCallback("addText", null, addText);

}

static function addText(text, x, y, w, h, depth, font, size) {

// Создать объект TextField для визуализации текста

// в заданных координатах

var tf = _root.createTextField("tf", depth, x, y, w, h);

// Представить выводимый текст tf.text = text;

// Установить параметры шрифта текста var format = new TextFormat(); format.font = font;

format.size = size; tf.setTextFormat(format);

}

}

Программный код файла Canvas.as, представленный в примере 22.12, должен быть скомпилирован в файл Canvas.swf, прежде чем его можно будет использо_ вать в Flash_плеере. Подробное описание того, как это делается, выходит за рам_ ки темы данной книги, но вы можете воспользоваться коммерческой версией Flash IDE компании Adobe или свободно распространяемым компилятором Acti_ onScript.¹

К сожалению, Flash предоставляет лишь низкоуровневый прикладной интер_ фейс. В частности, curveTo() – это единственная функция, рисующая кривые (точнее, кривые Безье второго порядка). Все окружности, эллипсы и кривые Бе_

¹ Я пользуюсь свободно распространяемым компилятором mtasc (http://www. mtasc.org) и компилировал файл командойmtasc_swf Canvas.swf_main_version 8_header 500:500:1 Canvas.as. После компиляции получившийся файл имел размер всего 578 байт – много меньше, чем большинство растровых изображений.

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

зье третьего порядка приходится аппроксимировать простейшими кривыми вто_ рого порядка. Этот низкоуровневый прикладной интерфейс отлично подходит для создания Flash_роликов в скомпилированном формате SWF: все вычисле_ ния, необходимые для создания более сложных кривых, можно выполнить на этапе компиляции, и Flash_плееру достаточно уметь рисовать простейшие кри_ вые. Высокоуровневый прикладной интерфейс можно выстроить поверх прими_ тивов, предоставляемых Flash_плеером, и его вполне можно реализовать средст_ вами ActionScript или JavaScript (пример 22.13 написан на языке JavaScript).

Пример 22.13 начинается с вспомогательной функции, выполняющей внедре_ ние файла Canvas.swf в HTML_документ. В разных броузерах эта операция вы_ полняется по_разному, а функция insertCanvas() скрывает эти различия. Вслед за ней идет функция wedge(), использующая прикладной интерфейс Flash для рисования сектора круговой диаграммы. Вслед за ней идет функция pieChart(), вызывающая функцию wedge() для рисования отдельного сектора. Заканчивает_ ся пример определением обработчика события onload, который вставляет Flash_ холст в документ и создает на нем рисунок.

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

<html>

<head>

<script>

// Встраивает Flash_холст заданного размера в виде единственного

// потомка указанного контейнерного элемента. Для переносимости функция

// использует тег <embed> в Netscape_совместимых броузерах и тег <object> _ в остальных

// Идея взята из FlashObject, автор Джеф Стернс (Geoff Stearns).

// http://blog.deconcept.com/flashobject/

function insertCanvas(containerid, canvasid, width, height) { var container = document.getElementById(containerid);

if (navigator.plugins && navigator.mimeTypes&&navigator.mimeTypes.length){ container.innerHTML =

"<embed src='Canvas.swf' type='application/x_shockwave_flash' " + "width='" + width +

"' height='" + height + "' bgcolor='#ffffff' " + "id='" + canvasid +

"' name='" + canvasid + "'>";

}

else { container.innerHTML =

"<object classid='clsid:D27CDB6E_AE6D_11cf_96B8_444553540000' "+ "width='" + width +

"' height='" + height +

"' id='"+ canvasid + "'>" +

" <param name='movie' value='Canvas.swf'>" +

" <param name='bgcolor' value='#ffffff'>" + "</object>";

}

}

// Прикладной интерфейс Flash еще более низкоуровневый, чем другие, в нем

// имеется возможность создания лишь простейших кривых Безье.

// Данный метод рисует сектор, используя этот интерфейс.

// Обратите внимание: углы должны задаваться в радианах. function wedge(canvas, cx, cy, r, startangle, endangle, color) {

// Вычислить начальную точку сектора var x1 = cx + r*Math.sin(startangle); var y1 = cy _ r*Math.cos(startangle);

canvas.beginFill(color, 100); // Заливать указанным непрозрачным цветом

// Разбить дугу на части меньше 45 градусов и рисовать каждую часть

// отдельным вызовом вложенного метода arc() method while(startangle < endangle) {

var theta;

if (endangle_startangle > Math.PI/4) theta = startangle+Math.PI/4; else theta = endangle;

arc(canvas,cx,cy,r,startangle,theta); startangle += Math.PI/4;

}

canvas.lineTo(cx, cy); // Завершить рисование линией к центру canvas.endFill(); // Залить сектор

// Данная вложенная функция рисует часть окружности с помощью кривых Безье.

// Разность endangle _ startangle не должна превышать 45 градусов.

// Текущей должна быть позиция в точке startangle.

// Можете принять реализацию функции на веру, если вам сложно

// понять математику, лежащую в ее основе.

function arc(canvas, cx, cy, r, startangle, endangle) { // Вычислить конечную точку кривой

var x2 = cx + r*Math.sin(endangle); var y2 = cy _ r*Math.cos(endangle);

var theta = (endangle _ startangle)/2;

// Это расстояние от центра до контрольной точки var l = r/Math.cos(theta);

// Угол между центром дуги и контрольной точкой: var alpha = (startangle + endangle)/2;

// Вычислить контрольную точку для кривой

var controlX = cx + l * Math.sin(alpha); var controlY = cy _ l * Math.cos(alpha);

// Обратиться к Flash API, чтобы нарисовать дугу как кривую Безье. canvas.curveTo(controlX, controlY, x2, y2);

}

}

/**

* Рисует круговую диаграмму на Flash_холсте, заданном в виде ссылки

* на элемент или в виде значения атрибута id.

* data _ массив чисел: каждое число соответствует сектору диаграммы.

* Центр диаграммы находится в точке с координатами (cx, cy),

* радиус задается аргументом r.

* Аргумент colors _ это Flash_значения цветов в виде массива colors[].

* Легенда размещается, начиная с координат (lx,ly),

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

* с метками из массива labels[]. */

function pieChart(canvas, data, cx, cy, r, colors, labels, lx, ly) {

// Получить элемент холста по id if (typeof canvas == "string")

canvas = document.getElementById(canvas);

// Все линии будут черного цвета, непрозрачные, толщиной 2 пиксела. canvas.lineStyle(2, 0x000000, 100);

// Найти сумму всех значений данных 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 = 0;

for(var i = 0; i < data.length; i++) {

// Это угол, где сектор заканчивается var endangle = startangle + angles[i];

// Нарисовать сектор: эта функция была определена ранее wedge(canvas, cx, cy, r, startangle, endangle, colors[i]);

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

// Нарисовать прямоугольник в легенде canvas.beginFill(colors[i], 100); canvas.moveTo(lx, ly+30*i); canvas.lineTo(lx+20, ly+30*i); canvas.lineTo(lx+20, ly+30*i+20); canvas.lineTo(lx, ly+30*i+20); canvas.lineTo(lx, ly+30*i); canvas.endFill();

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

}

}

// Когда документ загрузится, вставить Flash_холст и создать на нем рисунок.

// Обратите внимание: Flash_значения цветов _ это целые числа, а не строки window.onload = function() {

insertCanvas("placeholder", "canvas", 600, 400); pieChart("canvas", [12, 23, 34, 45], 200, 200, 150,

[0xff0000, 0x0000ff, 0xffff00, 0x00ff00], ["Север", "Юг", "Восток", "Запад"],

400, 100);

}

</script>

</head>

<body>

<div id="placeholder"></div> </body>

</html>