воскресенье, 25 апреля 2010 г.

SVGScripting: Обработка действий указателя мыши


В этом уроке мы рассмотрим один из способов оживления наших SVG-изображений.





Как видно на верхнем рисунке, при наведении на точку карты в текстовом поле выводится название города, при щелчке появляется окно с сообщением. Реализуем эти функции при помощи Inkscape.


1. Создайте новый документ размером 400х400. Нарисуйте несколько фигур. В нашем примере это круг, прямоугольник и звезда. Далее создайте текстовый объект, в текстовое поле введите любой текст.




2. Выделите текстовый объект. Перейдите в меню Объект > Свойства объекта (Ctrl+Shift+O). Откроется окно свойств объекта. Измените ID текстового объекта на varLabel .



3. Откройте редактор XML (в меню Правка > Редактор XML или комбинация клавиш Shift+Ctrl+X). В основной ветви документа создайте новую подветвь, дайте ей имя svg:script. Будет создана новая ветвь, идентификатор для неё определится автоматически. В новой ветви создайте атрибут type со значением text/javascript.



4. Далее создайте текстовую подветвь в которую вставьте следующий скрипт:


//объявление глобальной переменной
var svgLabelText;

function init(evt) {
 //делаем привязку переменной к полю объекта с текстом
 svgLabelText = document.getElementById("varLabel").firstChild.firstChild;
}

function showLabel(LabelText) {
 //меняем текст в объекте
 svgLabelText.nodeValue = LabelText;
}

function cleanLabel() {
 //очищаем текстовое поле
 svgLabelText.nodeValue = " ";
}

function AlertClick(AlertText) {
 //показываем окно с сообщением
 alert(AlertText);
}



5. Чтобы наш конечный документ исправно функционировал, необходимо проинициализировать скрипт во время загрузки. Для этого в главной ветви документа создайте новый атрибут onload со значением init(evt). После редактор XML можно закрыть, он нам больше не понадобится.




6. Выберите инструмент создания и редактирования текстовых объектов (F8). Выделите на рисунке объект с текстом (он был создан на шаге 2) и удалите текст. Важно! Нельзя оставлять текстовое поле пустым, конечный документ при этом не будет функционировать. Чтобы этого избежать, введите один пробел.


7. Выделите круг. Перейдите в меню Объект > Свойства объекта (Shift+Ctrl+O). Откроется окно свойств объекта. Нажмите на кнопку Интерактивность (она находится в самом низу окна). Далее следует настроить вызов функций с необходимыми аргументами:
  • onclick AlertClick('Красный!!!') - при клике на объекте запускаем функцию, которая отобразит окно с сообщением
  • onmouseover showLabel('Круг') - при прохождении указателя мыши над объектом запускаем функцию, которая отобразит текст в текстовом поле
  • onmouseout cleanLabel() - при покидании указателя мыши объекта запускаем функцию, которая очистит текстовое поле.


8. Естественно вы можете комбинировать вызов функций с желаемыми действиями. Повторите операции, описанные в шаге 7, с прямоугольником и звездой, соответственно изменив текст в одинарных кавычках.


9. Когда закончите, сохраните документ и откройте его в браузере, который поддерживает SVG-графику. Если вы сделали всё правильно, то рисунок должен функционировать.

Комментариев нет:

Отправить комментарий