best-of-best.narod.ruРассказывается о том, как средствами VML получить изображение на странице html, аналогичное известным форматам, но без использования внешних файлов. Картинка является частью html кода страницы и выполнена в виде тегов. Эту страницу нужно смотреть в эксплорeре!
Как рисовать тегами VML
Скопируйте в блокнот приведённый ниже код, сохраните его как Name.html и откройте полученный файл эксплорером.
Получим такую картинку. Для создания рисунков VML используйте этот конструктор. Разберём, из чего он состоит.
Оформление страницы html
<xml:namespace prefix="v" ns="urn:schemas-microsoft-com:vml"/>
<style type="text/css">
v\:*{behavior:url(#default#VML)}
</style><body>
Это то что должно быть в начале любой страницы html для того, чтобы отображение VML стало возможным
group
<v:group style="width:1; height:1" coordsize="1,1"> . . .
</v:group> То, что стоит внутри этого тега, и сам этот тег и есть картинка, состоящая из нескольких картинок. Такая картинка аналогична обычной картинке, получаемой с помощью тега <img src="Pic.gif" border=0> и может размещаться в любом месте страницы html, где нужна эта картинка, в том числе и внутри страницы.
Если в место
width:1; height:1" coordsize="1,1"
написать
width:2; height:1" coordsize="1,1"
То ширина картинки станет в два раза больше (при той же высоте)
Если написать
width:1; height:1" coordsize="2,1"
То ширина картинки станет в два раза меньше
Если написать
width:3; height:1" coordsize="2,1"
То ширина картинки станет в 3 / 2 раза больше (в полтора раза)
Аналогично можно поступать и с высотой картинки, но, чтобы в ней сохранились первоначальные пропорции нужно в одинаковое количество раз изменять ширину и высоту. Например, чтобы увеличить картинку в полтора раза пишем
width:3; height:3" coordsize="2,3"
и получаем
Комментарий
<!-- Красный сплошной -->
Надпись Красный сплошной, стоящая внутри такого тега на рисунки никак не отражается и является удобным пояснением к части рисунка около которого она поставлена.
shape первый
<v:shape style="position:absolute; left:0; top:0; width:1; height:1" coordsize="1 1" filled="false" strokecolor="red" strokeweight="2pt" path="
m 0,26 l 0,219 100,264 274,238 274,45 174,0 0,26 100,71 100,264 100,71 274,45
"/>
Это самостоятельный рисунок, который может использоваться сам по себе. При этом нужно убрать: position:absolute; left:0; top:0;
Скопируйте в блокнот приведённый ниже код, сохраните его как Name.html и откройте полученный файл эксплорером.
Тег <v:shape в данном случае закрывается особым образом: "/>
filled="false" - делает рисунок прозрачным
strokecolor="red" - Задаёт цвет линии рисунка
strokeweight="2pt" - Задаёт толщину линии рисунка
Вот, что получится, если убрать
filled="false" strokecolor="red" strokeweight="2pt"
m 0,26 l 0,219 100,264 274,238 274,45 174,0 0,26 100,71 100,264 100,71 274,45 - Это сам рисунок
m - Это команда начать путь построения линии
0,26 - Это координата точки, из которой начинаем рисовать. Начало координат в левом верхнем углу монитора. Ось X идет из левого верхнего угла монитора в правый верхний. Ось Y идет из левого верхнего угла монитора в левый нижний.
l - Это команда, которая говорит о том, что рисоваться будет линия.
0,219 - Точка, в которую эта линия прейдет из точки 0,26
100,264 - Точка, в которую прейдет линия из точки 0,219 и так далее
shape второй
<!-- Красный пунктирный -->
<v:shape style="position:absolute; left:0; top:0; width:1; height:1" coordsize="1 1" filled="false" strokecolor="red" strokeweight="1pt"><v:path v="
m 0,219 l 174,193 274,238
m 174,193 l 174,0
"/><v:stroke DashStyle="Dash"/></v:shape>
Чем отличается этот тег shape от первого
1) Здесь имеются два пути.
m 0,219 l 174,193 274,238 - Линия идёт из точки 0,219 в точку 174,193 затем в точку 274,238 дальше путь прерывается и начинается новый путь
m 174,193 l 174,0
- Линия идёт из точки 174,193 в точку 174,0
2) strokeweight="1pt" - Толщина линии стала меньше
3) Тег shape закрывается обычным способом > . . . </v:shape> 4) Путь path прописан не как атрибут shape, а в виде отдельного тега внутри тега shape. При этом для пути в теге path используется атрибут v:
<v:path v=" . . . "/>
5) Внутрь тега shape добавлен тег stroke и, благодаря DashStyle="Dash" линия становится пунктирной <v:stroke DashStyle="Dash"/>
Во внутрь тега group можно добавлять любое количество тегов shape. Добавим рисунок круга.
<!-- Круг -->
<v:shape style="position:absolute; left:0; top:0; width:1; height:1" coordsize="1 1" fillcolor="lime" path="
m 50,242 c 116,266 116,83 50,48 -16,24 -16,207 50,242
"/>
Здесь вместо команды
l - рисовать линию используется команда
с - рисовать кривую Безе
Используется заливка цветом
fillcolor="lime"
Отсутствует запрет применять заливку
filled="false"
В место имеющейся у VML возможности рисовать окружности здесь окружность нарисована двумя кривыми Безе, что даёт много преимуществ.
Добавим рисунок показывающий размер.
<!-- Чёрный сплошной -->
<v:shape filled="false" style="position:absolute; left:0; top:0; width:1; height:1" coordsize="1 1" path="
m 274,45 l 314,45 307,45 303,55 307,45 311,55 307,45 307,238 314,238 307,238 311,228 307,238 303,228 307,238 274,238
"/>
В место имеющейся у VML возможности рисовать стрелки здесь стрелка нарисована линиями, что даёт много преимуществ.
Добавим надпись размера.
<!-- Буквы -->
<v:shape style="position:absolute; left:0; top:0; width:1; height:1" coordsize="1 1" path="
m 317,138 l 317,135 320,132 326,132 329,135 329,141 317,149 317,152 329,152 329,149
m 339,135 l 342,132 348,132 351,135 351,149 348,152 342,152 339,149 339,135
m 361,135 l 364,132 370,132 373,135 373,149 370,152 364,152 361,149 361,135
m 383,159 l 383,138 383,141 386,138 390,138 393,141 393,149 390,152 386,152 383,149
m 398,152 l 408,138 403,145 398,138 408,152
"/>
Здесь каждая новая буква и цифра начинается с нового пути "m" В место имеющейся у VML возможности писать текст здесь текст нарисован линиями, что, при небольшом количестве текста даёт много преимуществ. И вот всё в сборе.