Масштабируемая векторная графика
[+]
Опубликован: 07.11.2007 | Доступ: свободный | Студентов: 1750 / 331 | Оценка: 4.29 / 4.14 | Длительность: 25:09:00
Тема: Компьютерная графика
Специальности: Программист
Теги: arc, baseline, css, flash, glyph, html, marker, stroke, SVG, sweep, x-axis, анимация, браузеры, графика, паттерн, паттерны, поддержка, радиальный градиент, форматы, цвета, шрифты, элементы
Лекция 12:

Интерактивность
A
|
версия для печати
< Лекция 11 || Лекция 12: 1234

Использование скриптов

SVG - документы поддерживают скриптовые языки (в частности, JavaScript), которые позволяют создавать сложные веб-интерфейсы и приложения. Скрипт может выполняться в момент загрузки документа или в результате выполнения пользователем какого-либо события, например, щелчка мыши. Различают следующие события:

  • onload - происходит в момент загрузки документа.
  • onclick - происходит при нажатии и отпускании кнопки мыши в одной и той же области экрана.
  • onactivate - происходит при переключении фокуса ввода на элемент.

Все события мыши, рассмотренные нами ранее, сохраняют свое значение, в их названиях лишь добавляется приставка on: onmousedown, onmouseover, onmousemove, onmouseup, onmouseout.

Для работы с элементами и атрибутами используются следующие методы:

  • getElementById - обращение к элементу по его id
  • getStyle - получение содержимого атрибута style.
  • setProperty - установка отдельного свойства атрибута style.
  • getAttribute - получение значения атрибута данного элемента.
  • setAttribute - установка значения атрибута.
  • cloneNode - создание нового узла документа на основании существующего.

Для помещения кода в SVG - документ применяется элемент script:

.......
<script>
 <![CDATA[
   <!--Код  находится здесь-->
 ]>
</script >
.........

Допускается применение внешних файлов с кодом. Для помещения такого файла в SVG - документ используется следующий синтаксис:

.......
< script xlink:href="myScript.js" language="JavaScript"/>
..........

Здесь помещена ссылка на файл myScript.js.

Все остальные свойства скриптового языка - переменные, операторы, функции, поддерживаются SVG - графикой в полной мере. По сути, можно абстрагироваться от SVG -основы документа и работать с его содержимым как с обычной HTML - страницей. В таблице 12.4 приводятся примеры скриптов2Если вы не знакомы с JavaScript, то понимать эти примеры будет сложно. Для быстрого вникания в суть можно проработать небольшие пособия по JavaScript и DOM: (http://www.xml.nsu.ru/) .

Таблица 12.4. Интерактивность со скриптами.
№ Код Вид в браузере
12.4.1 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="250"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 12. Интерактивность</title>
     <desc>
          Пример script1.svg
     </desc>
      <!-- Определение ECMAScript для изменения размера окружности по щелчку -->
  <script type="text/ecmascript"> <![CDATA[
    function circle_click(evt) {
      var circle = evt.target;
      var currentRadius = circle.getAttribute("r");
      if (currentRadius == 50)
        circle.setAttribute("r", currentRadius*2);
      else
        circle.setAttribute("r", currentRadius*0.5);
    }
  ]]> </script>
  <!-- Окружность с обработчиком события -->
  <circle onclick="circle_click(evt)" cx="150" cy="125" r="50"
          fill="red"/>
</svg>
Листинг 12.4.1. Пример script1.svg
Описание
Изменение размера окружности по щелчку. ECMAScript - это интерпретируемый язык программирования, стандартизированный международной организацией ECMA. JavaScript, JScript и ActionScript являются расширением стандарта ECMA-262.
№ Код Вид в браузере
12.4.2 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 12. Интерактивность</title>
     <desc>
          Пример script2.svg
     </desc>
<!-- Вставка JavaScript -->
<script type="text/javascript">
<![CDATA[
function changeColor(evt)
{
var redValue,greenValue,blueValue;
var targetshape= evt.getTarget();
redValue = Math.round(Math.random()*255);
greenValue = Math.round(Math.random()*255);
blueValue = Math.round(Math.random()*255);
targetshape.setAttribute("fill",
                         "rgb(" + redValue + 
                         "," + greenValue + 
                         "," + blueValue + 
                         ")");
}
// ]]></script>
<rect x="5" y="5" width="190" height="190"
         fill="none" stroke="green" stroke-width="2"/>
<!-- Окружность, цвет которой будет меняться случайным образом -->
<circle cx="100" cy="100" r="75" fill="blue" onclick="changeColor(evt)" />
</svg>
Листинг 12.4.2. Пример script2.svg
Описание
Изменение случайным образом цвета окружности при щелчке на ней мышью.
№ Код Вид в браузере
12.4.3 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="240"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 12. Интерактивность</title>
     <desc>
          Пример script3.svg
     </desc>
<!-- Вставка JavaScript -->
<script type="text/javascript">
<![CDATA[
 function ChangeColor()
      {
          var redValue,greenValue,blueValue,rgb;
          redValue = Math.round(Math.random()*255);
          greenValue = Math.round(Math.random()*255);
          blueValue = Math.round(Math.random()*255);
        rgb="rgb("+redValue +","+greenValue+","+blueValue +")";
        return rgb;
      }
   function ValueColor(click_evt)
      {
        var svgdoc,ValueRGB,HexValueRGB,
            hex,hredValue,hgreenValue,
            hgblueValue,DataOutput;
        svgdoc=click_evt.target.ownerDocument;
        // Вызываем функцию ChangeColor:
        ValueRGB=ChangeColor();
        // Вычисляем шестнадцатеричные значения цвета:
        hex=ValueRGB.substring(4,ValueRGB.length-1);
        hex=hex.split(",");
        hredValue=parseInt(hex[0]).toString(16).toUpperCase();
        hredValue=(hredValue.length==1)?"0"+hredValue:hredValue;
        hgreenValue=parseInt(hex[1]).toString(16).toUpperCase();
        hgreenValue=(hgreenValue.length==1)?"0"+hgreenValue:hgreenValue;
        hgblueValue=parseInt(hex[2]).toString(16).toUpperCase();
        hgblueValue=(hgblueValue.length==1)?"0"+hgblueValue:hgblueValue;
        HexValueRGB="#"+hredValue+hgreenValue+hgblueValue;
        DataOutput=ValueRGB+" | "+HexValueRGB;
        // Изменяем цвет окружности и выводим надпись:
        click_evt.target.style.setProperty("fill",ValueRGB,"");
        svgdoc.getElementById("Output").firstChild.data=DataOutput;
      }
// ]]></script>
<rect x="5" y="5" width="190" height="230"
         fill="none" stroke="green" stroke-width="2"/>
<!-- Окружность, цвет которой будет меняться случайным образом -->
<circle cx="100" cy="100" r="75" 
        fill="blue" onclick="ValueColor(evt)" />
<text id="Output" x="10" y="200" class="t2" 
      fill="green" font-size="14px">
       </text>
</svg>
Листинг 12.4.3. Пример script3.svg
Описание
Изменение случайным образом цвета окружности при щелчке на ней мышью. Индекс цвета в десятичной и шестнадцатеричной формах выводятся в текстовое поле.
№ Код Вид в браузере
12.4.4 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="250"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
      Лекция 12. Интерактивность</title>
     <desc>
          Пример DragAndDrop.svg
     </desc>
  <script type="text/ecmascript"> <![CDATA[
    var click = false, object =""
var x_obj = 0, y_obj = 0, x_trans = 0, y_trans = 0
var appui=false
//Установка новых координат объекта при щелчке.
function clicked(evt)
{
      click = true
      object = evt.target
      trans = evt.target.getAttributeNS(null , "transform")
      trans = trans.substring(10,trans.length - 1)
      trans = trans.split(",")
      x_trans = trans[0] - 0
      y_trans = trans[1] - 0
      x_obj = evt.screenX - 0
      y_obj = evt.screenY - 0
}
//Перемещение объекта
function move_object(evt)
{
if (click)
     {
        xm = evt.screenX - 0
        ym = evt.screenY - 0
       object.setAttributeNS(null,
                            "transform",
                            "translate("+( x_trans + xm - x_obj) + ",
                            " + ( y_trans + ym - y_obj) +")")
     }
}
  ]]> </script>
<g onmousedown="clicked(evt)" onmousemove="move_object(evt)" 
   onmouseup="click=false">
<rect transform="translate(20,20)" x="10" y="10" 
      width="180" height="80" fill="green"/>
<polygon transform="translate(20,20)" points="20,20 180,20 20,90" 
         fill="blue"/>
<circle transform="translate(20,20)" cx="90" cy="60"  
        r="25" fill="red" />
<text transform="translate(150,150)" font-family="Comic Sans MS" fill="red" 
      font-size="16">
    Drag and drop</text>
</g>
</svg>
Листинг 12.4.4. Пример DragAndDrop.svg
Описание

Операция Drag and Drop - перетаскивание объектов. Надпись можно выделять и перетаскивать. На диске, прилагаемом к книге, вы найдете пример перетаскивания объектов с возможностью изменения размера изображений (рис. 12.2):

Пример "sydney.svg"

Рис. 12.2. Пример "sydney.svg"
№ Код Описание
12.4.5 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
      Лекция 12. Интерактивность</title>
     <desc>
          Пример Menu.svg
     </desc>
 <a xlink:href="">
    <text x="30" y="30" style="fill:red"
      onclick="svgDocument.rootElement.setAttribute('zoomAndPan','disable')">
      Отключить масштаб
      <set attributeName="fill" attributeType="CSS" to="blue"
      begin="mouseover"/>
      <set attributeName="fill" attributeType="CSS" to="red"
      begin="mouseout"/>
    </text>
  </a>
  <a xlink:href="">
    <text x="30" y="60" style="fill: red"
      onclick="svgDocument.rootElement.setAttribute('zoomAndPan','magnify')">
      Включить масштаб
      <set attributeName="fill" attributeType="CSS" to="blue"
      begin="mouseover"/>
      <set attributeName="fill" attributeType="CSS" to="red"
      begin="mouseout"/>
    </text>
  </a>
</svg>
Листинг 12.4.5. Пример Menu.svg
Управление контекстным меню, отображаемым для данного документа плагином "Adobe SVG Viewer". Отключение и включение доступности масштаба.
Вид в браузере

Мы рассмотрели простые примеры, демонстрирующие возможности SVG. Сложность приложений, использующих SVG - графику, ограничена лишь рамками JavaScript, DOM, а также фантазией и знаниями разработчика.

Дальше >>
< Лекция 11 || Лекция 12: 1234

Вопросы и ответы

вопросов: 0