Створення графіки засобами flash

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

Приклад 22.12. Canvas.as

// Вільно розповсюджуваний компілятор mtasc автоматично вставить

// виклик методу main () в скомпільований SWF_файл. Якщо для створення

1 Програмний код прикладу 22.13, створює кругову діаграму, використовує цей прикладний інтерфейс малювання, але я не буду описувати його тут. Всю необхідну документацію можна знайти на веб_сайте компанії Adobe.

22.6. Створення графіки засобами Flash

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

// Цей конструктор містить код ініціалізації нашого Flash_класса Canvas function Canvas ()

// Визначити поведінку полотна при зміні розмірів Stage.scaleMode = "noScale";

// Імпортувати функції малювання 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. 1

На жаль, Flash надає лише низькорівневий прикладної інтер_ фейс. Зокрема, curveTo () - це єдина функція, яка малює криві (точніше, криві Безьє другого порядку). Всі кола, еліпси і криві Бе_

578 Глава 22. Робота з графікою на стороні клієнта

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

// Вбудовує Flash_холст заданого розміру у вигляді єдиного

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

// використовує тег в Netscape_совместімих броузерах і тег