| Обзор
Наверняка мало кто из вас слышал о VML (Vector Markup Language). Этот удобный и мощный язык был незаслуженно забыт по трем причинам:
- выполнение его предполагало наличие специального plug-in в IE у пользователя
- FLASH во многих случаях оказался удобней
- SVG (альтернативный язык, применяемых для сходных целей) вытеснил его
Но VML привлекателен своей простотой (достаточно базового знания HTML) и безопасностью (в нем не было обнаружено "дырок", таких как во Флеше). С помощью него можно рисовать графики и много других нужных вещей. Вот, например, один из примитивов VML:
Итак, с чего начать? Начать нужно с понимания того, что этот язык является подмножеством XML и, следовательно, все тэги должны быть обязательно закрыты. Теперь нам нужно немного изменить начало нашей странички, а точнее, аттрибуты тэга html:
<html xmlns:v="urn:schemas-microsoft-com:vml">
С этой строки начинается любой VML-документ.
Далее нам нужно сделать следующее объявление:
<style> v:* { behavior: url(#default#VML); } </style>
Ну вот, теперь в любом месте между тэгами <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.
Успехов! |
