Forum

Введение в VML - язык описания векторной графики

Дата: Суббота, 10.Янв.2009, 22:52 | Сообщение # 1

Admin

Сообщений: 554

« 3 »

Статус:

Обзор

Наверняка мало кто из вас слышал о VML (Vector Markup Language). Этот удобный и мощный язык был незаслуженно забыт по трем причинам:

- выполнение его предполагало наличие специального plug-in в IE у пользователя
- FLASH во многих случаях оказался удобней
- SVG (альтернативный язык, применяемых для сходных целей) вытеснил его

Но VML привлекателен своей простотой (достаточно базового знания HTML) и безопасностью (в нем не было обнаружено "дырок", таких как во Флеше). С помощью него можно рисовать графики и много других нужных вещей. Вот, например, один из примитивов VML:

Итак, с чего начать? Начать нужно с понимания того, что этот язык является подмножеством XML и, следовательно, все тэги должны быть обязательно закрыты. Теперь нам нужно немного изменить начало нашей странички, а точнее, аттрибуты тэга html:

С этой строки начинается любой VML-документ.
Далее нам нужно сделать следующее объявление:

Ну вот, теперь в любом месте между тэгами <body> и </body> мы можем использовать тэги VML, например:

<v:roundrect style="width:150pt;height:50pt"/>

(нарисует прямоугольник со скругленными углами, ширина 150б высота 50)

Подробнее

Так в чем же фишка? А фишка в том, что мы можем делать с нашими объектами после загрузки все, что пожелаем - ведь, как вы заметили, параметры фигур описываются точно так же, как и в стилях. Кроме того, мы можем менять параметры и положение объектов VML при помощи скриптов. Например, нарисовать линию в VML очень просто:
<v:line from="10,10" to="100,100"/>
Еще можно нарисовать, например, овал - это для сравнения:
<v:oval style="position:absolute;top:100;left:100; width:150pt;height:50pt" fillcolor="green"/>
А вот пример с использованием многих разных фигур:

<v:line strokecolor="red" strokeweight="2pt" from="100pt,100pt" to="200pt,150pt">
<v:stroke endarrow="diamond"/>
</v:line>

<v:line strokecolor="yellow"strokeweight="2pt" from="100pt,100pt" to="50pt,100pt" >
<v:stroke endarrow="classic"/>
</v:line>

<v:line strokecolor="blue" strokeweight="2pt" from="100pt,100pt" to="120pt,120pt" >
<v:stroke endarrow="block"/>
</v:line>

<v:line strokecolor="black" strokeweight="2pt" from="100pt,100pt" to="150pt,200pt">
<v:stroke endarrow="none"/>
</v:line>

<v:line strokecolor="green" strokeweight="2pt" from="100pt,100pt" to="200pt,85pt">
<v:stroke endarrow="oval"/>
</v:line>

<v:line strokecolor="green" strokeweight="2pt" from="100pt,100pt" to="200pt,100pt">
<v:stroke endarrow="open"/>
</v:line>

<v:oval style="width:100pt; height: 50pt" fillcolor="pink" />
<v:curve from="10pt,10pt" to="100pt,10pt" control1="40pt,30pt" control2="70pt,30pt">
</v:curve>

<v:rect id=myrect fillcolor="red" style="position:relative;top:100;left:100;width:20;height:20;rotation:10">
</v:rect>
<>

Для удобства можно включать в этот код комментарии HTML.
Фигуры VML при этом являются такими же объектами для скриптовых языков типа JavaScript, как и объекты HTML, таким образом, мы имеем к ним полный доступ и можем динамически модифицировать. И еще одно хорошее преимущество: можно значительно уменьшить размер Вашей странички, заменяя несложные рисунки и графики тэгами VML, например кривую такого графика:

можно заменить такой строкой
<v:polyline points="5pt,10pt 15pt,20pt 100pt,50pt 50pt,100pt 5pt,10pt"/>

В следующей соей статье я постараюсь осветить SVG, а пока - поэкспериментируйте с VML.
Успехов!

Заработок для веб-мастеров