Глава 10.5. Вспомогательные элементы (продолжение)

10.5.1. Рамка фигуры: элемент stroke

Синтаксис: <v:stroke>…</v:stroke>
Атрибуты:  id
           color = цвет (цвет рамки)
           color2 = цвет (второй цвет рамки)
           dashstyle = string (стиль линии рамки)
           endarrow = string (начальная стрелка)
           endarrowlength = string (длина начальной стрелки)
           endarrowwidth = string (толщина начальной стрелки)
           endcap = string (форма конца отрезков)
           fill = string (тип заливки)
           imagealignshape = boolean (выравнивание изображения при заливке)
           imageaspect = string (сохранение пропорций изображения)
           imagesize = vector2d (размер изображения заливки)
           joinstyle = string (способ соединения отрезков рамки)
           linestyle = string (тип линии рамки)
           miterlimit = number (сглаживание соединений отрезков)
           on = boolean (вывод рамки)
           opacity = number (прозрачность рамки)
           src = string (гиперссылка на графический файл)
           startarrow = string (конечная стрелка)
           startarrowlength = string (длина конечной стрелки)
           startarrowwidth = string (толщина конечной стрелки)
           weight = number (толщина рамки)

Элемент stroke может употребляться в элементах shape, shapetype и графических примитивах для задания рамки фигуры. Его атрибуты имеют следующее назначение:

При желании мы можем определить свой стиль рамки. Пользовательские стили задаются как наборы пар чисел; первое число определяет длину штриха, а второе — длину пробела после него. Все длины задаются относительно толщины линии рамки. Штрих длины 0 означает точку. К каждому штриху и точке применяется атрибут endcap. Приведем пример:

<v:rect style='position:relative; left:3em; top:0; height:100px; width:100px'
  strokecolor="black" strokeweight="3pt">
  <v:stroke endcap="flat" dashstyle="2 2 0 2"/>
</v:rect>

10.5.2. Тени: элемент shadow

Синтаксис: <v:shadow/>
Атрибуты:  id
           color = цвет (цвет тени)
           color2 = цвет (второй цвет тени)
           matrix = string (преобразование тени)
           obscured = boolean (дымка тени)
           offset = vector2d (смещение тени)
           offset2 = vector2d (второе смещение тени)
           on = boolean (вывод тени)
           opacity = number (прозрачность тени)
           origin = vector2d (центр тени)
           type = string (тип тени)

Элемент shadow может употребляться в элементах shape, shapetype и большинстве графических примитивов для задания тени фигуры. Он имеет следующие атрибуты:

Примеры теней всех четырех типов:

10.5.3. Искажение фигуры: элемент skew

Синтаксис: <v:skew/>
Атрибуты:  id
           matrix = string (матрица преобразования фигуры)
           offset = vector2d (смещение преобразования от фигуры)
           on = boolean (вывод рамки)
           origin = vector2d (начальная точка преобразования)

Элемент skew может употребляться в элементах shape, shapetype и графических примитивах для искажения формы фигуры. Его атрибуты имеют следующее назначение:

Пример искажения прямоугольника:

<v:rect style='position:relative; left:3em; top:0; height:50px; width:50px'>
  <v:skew on="true" matrix="1,-0.5,0,0.75,0,0"/>
</v:rect>

10.5.4. Внешние графические образы: элемент imagedata

Синтаксис: <v:imagedata/>
Атрибуты:  id
           bilevel = boolean (черно-белое изображение)
           blacklevel = number (интенсивность черного цвета)
           chromakey = цвет (прозрачный цвет)
           cropbottom = number (обрезка снизу)
           cropleft = number (обрезка слева)
           cropright = number (обрезка справа)
           croptop = number (обрезка сверху)
           gain = number (интенсивность белого цвета)
           gamma = number (контрастность)
           grayscale = boolean (изображение в серой гамме)
           src = string (гиперссылка на графический файл)

Элемент imagedata может употребляться в элементах shape, shapetype и графических примитивах для вывода графического образа из внешнего графического файла, заданного атрибутом src. Его атрибуты совпадают с атрибутами элемента image. Пример:

<v:rect style='position:relative; left:3em; top:0; height:60px; width:40px'
  strokecolor="blue" strokeweight="2pt">
  <v:imagedata src="images/leaf.gif" />
</v:rect>

10.5.5. Текст: элемент textbox

Синтаксис: <v:textbox>текст</v:textbox>
Атрибуты:  id, style
           inset = string (отступы от границ прямоугольника)

Элемент textbox выводит заданный текст в прямогольник, заданный атрибутом textboxrect элемента path. Расположение и формат текста задается стилями CSS. Кроме того, отступ текста от границ прямоугольника может быть задан атрибутом inset вида "x1,y1,x2,y2", который содержит отступы от левой, верхней, правой и нижней границ прямоугольника.

Если textboxrect не задан, то текст выводится в объемлющий прямоугольник фигуры. Пример:

<v:rect style='position:relative; left:3em; top:0; width:200px; height:30px'
  fillcolor="yellow">
  <v:textbox style="text-align: center">Это мой текст!</v:textbox>
</v:rect>

Спецификация VML содержит ряд дополнительных стилей для этого элемента, но они пока не поддержаны Веб-обозревателем.

10.5.6. Фигурный текст: элемент textpath

Синтаксис: <v:textpath/>
Стили:     font-family, font-size, font-style, font-variant, font-weight, font,
           text-align, text-decoration, trim, v-rotate-letters, v-same-letter-heights,
           v-text-align, v-text-kern, v-text-reverse, v-text-spacing-mode,
           v-text-spacing, xscale
Атрибуты:  id
           fitpath = boolean (следовать форме фигуры)
           fitshape = boolean (заполнять всю фигуру)
           on = boolean (вывод текста)
           string = string (выводимый текст)

Элемент textpath может употребляться в элементах shape, shapetype и графических примитивах для вывода фигурного текста. Строка текста задается атрибутом string, стили отображения текста задаются свойствами CSS и собственными свойствами данного элемента, а именно:

Кроме того, данный элемент имеет следующие атрибуты:

Пример вывода фигурного текста:

<v:arc style='position:relative; left:3em; top:0; height:50px; width:200px'
  strokecolor="blue" strokeweight="1px" fillcolor="blue" startangle="-90" endangle="90">
  <v:path textpathok="true"/>
  <v:textpath on="true" string="Фигурный текст" style='v-text-align: letter-justify'/>
</v:arc>

10.5.7. Экструзия фигуры: элемент extrusion

Синтаксис: <v:extrusion/>
Атрибуты:  id
           autorotationcenter = boolean (геометрический центр экструзии)
           backdepth = number (глубина экструзии позади объекта)
           brightness = number (яркость сцены)
           color = цвет (цвет экструзии)
           colormode = string (цветовой режим)
           diffusity = number (рассеяние отраженного света)
           edge = number (скос углов экструзии)
           facet = number (число аппроксимирующих граней)
           foredepth = number (глубина экструзии перед объектом)
           lightface = boolean (реакция фаса на смену освещенности)
           lightharsh = boolean (размытость основного источника света)
           lightharsh2 = boolean (размытость вторичного источника света)
           lightlevel = number (интенсивность основного источника света)
           lightlevel2 = number (интенсивность вторичного источника света)
           lightposition = vector3d (положение основного источника света)
           lightposition2 = vector3d (положение вторичного источника света)
           lockrotationcenter = boolean (использовать угол вращения)
           metal = boolean (имитация металлической поверхности)
           on = boolean (вывод экструзии)
           orientation = vector3d (вектор вращения фигуры)
           orientationangle = number (угол вращения)
           plane = string (плоскость, перпендикулярная экструзии)
           render = string (режим отображения экструзии)
           rotationangle = vector2d (угол вращения по осям x и y)
           rotationcenter = vector3d (вектор вращения фигуры)
           shininess = number (концентрация отраженного света на поверхности экструзии)
           skewamt = number (величина наклона экструзии)
           skewangle = number (угол наклона экструзии)
           specularity = number (отражающая способность экструзии)
           type = string (тип проекции)
           viewpoint = vector3d (позиция наблюдателя)
           viewpointorigin = vector2d (позиция наблюдателя относительно фигуры)

Элемент extrusion может употребляться в элементах shape, shapetype и большинстве графических примитивов для задания экструзии фигуры, т. е. для придания ей трехмерности путем растяжения по третьему измерению. Он имеет следующие атрибуты:

Типичные примеры экструзии:

<v:oval fillcolor="lime" style="position:relative; top:0; left:3em; width:50; height:50">
  <v:extrusion on="true"/>
</v:oval>

<v:oval fillcolor="lime" style="position:relative; top:0; left:3em; width:50; height:50">
  <v:extrusion on="true" render="wireframe"/>
</v:oval>

<v:oval fillcolor="lime" style="position:relative; top:0; left:3em; width:50; height:50">
  <v:extrusion on="true" render="boundingcube"/>
</v:oval>

<v:oval fillcolor="lime" style="position:relative; top:0; left:3em; width:50; height:50">
  <v:extrusion on="true" type="perspective"/>
</v:oval>

<v:oval fillcolor="lime" style="position:relative; top:0; left:3em; width:50; height:50">
  <v:extrusion on="true" render="wireframe" type="perspective"/>
</v:oval>

<v:oval fillcolor="lime" style="position:relative; top:0; left:3em; width:50; height:50">
  <v:extrusion on="true" render="boundingcube" type="perspective"/>
</v:oval>