Глава 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 и графических примитивах для задания рамки фигуры. Его атрибуты имеют следующее назначение:

Атрибут Тип По умолчанию Описание
on boolean true Разрешает или запрещает вывод рамки. Этот атрибут перекрывает атрибут stroked родительского элемента.
weight number 1pt Толщина рамки. Этот атрибут перекрывает атрибут strokeweight родительского элемента.
color цвет "black" Цвет рамки. Этот атрибут перекрывает атрибут strokecolor родительского элемента.
opacity number 1.0 Прозрачность рамки в диапазоне от 0 до 1.
linestyle string "single" Тип линии рамки. Возможные значения: "single" (одна обычная линия), "thinthin" (две тонкие линии), "thinthick" (тонкая и жирная линии), "thickthin" (жирная и тонкая линии), "thickbetweenthin" (жирная линия между двух тонких).
joinstyle string "round" Способ соединения отрезков рамки. Возможные значения: "round" (скругленное соединение), "bevel" (косоугольное соединение), "miter" (соединение в ус).
miterlimit number 8.0 Максимальное расстояние между внутренней и внешней точками соединения отрезков. Имеет смысл, когда joinstyle равно "miter".
endcap string "round" Форма концов отрезков рамки. Возможные значения: "flat" (плоские), "square" (квадратные), "round" (скругленные).
dashstyle string "solid" Стиль линии рамки. Возможные значения: "solid" (сплошная), "dot" (пунктир), "dash" (штрих), "dashdot" (штрих-пунктир), "longdash" (длинный штрих), "longdashdot" (длинный штрих-пунктир), "longdashdotdot" (длинный штрих-пунктир-пунктир), "shortdash" (короткий штрих), "shortdashdot" (короткий штрих-пунктир), "shortdashdotdot" (короткий штрих-пунктир-пунктир). Возможно также задание собственных стилей, описанное ниже.
startarrow, endarrow string "none" Форма стрелок в начале и конце линии. Возможные значения: "none" (нет стрелки), "block" (блочная), "classic" (классическая), "diamond" (ромбическая), "oval" (овальная), "open" (линейная).
startarrowlength, endarrowlength string "medium" Длина стрелок в начале и конце линии. Возможные значения: "short" (короткая), "medium" (средняя), "long" (длинная).
startarrowwidth, endarrowwidth string "medium" Толщина стрелок в начале и конце линии. Возможные значения: "narrow" (узкая), "medium" (средняя), "wide" (широкая).
filltype string "solid" Тип заливки рамки. Возможные значения: "solid", "tile", "pattern", "frame" (см. атрибут type элемента fill).
src string null Гиперссылка на графический файл, содержащий изображение заливки.
imagesize vector2d фактический размер Размер изображения заливки (см. атрибут size элемента fill).
imageaspect string "ignore" Сохранение пропорций изображения (см. атрибут aspect элемента fill).
imagealignshape boolean true Выравнивание изображения заливки (см. атрибут alignshape элемента fill).
color2 цвет null Второй цвет заливки. Имеет смысл для типа заливки pattern.

При желании мы можем определить свой стиль рамки. Пользовательские стили задаются как наборы пар чисел; первое число определяет длину штриха, а второе — длину пробела после него. Все длины задаются относительно толщины линии рамки. Штрих длины 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 и большинстве графических примитивов для задания тени фигуры. Он имеет следующие атрибуты:

Атрибут Тип По умолчанию Описание
on boolean false Разрешает или запрещает вывод тени.
type string "single" Тип тени. Возможные значения: "single" (одинарная), "double" (двойная), "emboss" (рельефная), "perspective" (перспективная).
obscured boolean false Если true, то фигура видна сквозь тень (если нет заливки).
color цвет rgb(128,128,128) Основной цвет тени.
color2 цвет rgb(203,203,203) Второй цвет тени или высвечивание для рельефной тени.
opacity number 1.0 Прозрачность тени в диапазоне от 0 до 1.
offset vector2d 2pt,2pt Смещение тени от фигуры в абсолютных единицах или в процентах от ширины и высоты фигуры (от -0.5 до 0.5).
offset2 vector2d 0,0 Второе смещение тени от фигуры в абсолютных единицах или в процентах от ширины и высоты фигуры (от -0.5 до 0.5).
origin vector2d 0,0 Центр тени относительно фигуры в процентах от ширины и высоты фигуры (от -0.5 до 0.5).
matrix string null Матрица преобразования перспективной тени вида "sxx,sxy,syx,syy,px,py", где s=scale (масштаб), p=perspective (перспектива). Если offset задан в абсолютных единицах, то px и py задаются в 1/EMU; в противном случае они являются обратными дробями от размера фигуры.

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

single double emboss perspective

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

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

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

Атрибут Тип По умолчанию Описание
on boolean false Разрешает или запрещает вывод преобразования.
offset vector2d 2pt,2pt Смещение преобразования от фигуры в абсолютных единицах или в процентах от ширины и высоты фигуры (от -0.5 до 0.5).
origin vector2d 0,0 Начальная точка преобразования относительно фигуры в процентах от ширины и высоты фигуры (от -0.5 до 0.5).
matrix string null Матрица перспективного преобразования вида "sxx,sxy,syx,syy,px,py", где s=scale (масштаб), p=perspective (перспектива). Если offset задан в абсолютных единицах, то px и py задаются в 1/EMU; в противном случае они являются обратными дробями от размера фигуры.

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

<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 и собственными свойствами данного элемента, а именно:

Свойство Тип По умолчанию Описание
trim boolean false Если true, то неиспользованное пространство над и под текстом, выделенное для элементов букв, выступающих за пределы основного шрифта, освобождается.
v-rotate-letters boolean false Если true, то буквы текста поворачиваются на 90°.
v-same-letter-heights boolean false Если true, то строчные буквы вытягиваются до высоты прописных.
v-text-align string "left" Выравнивание текста. Аналогично свойству text-align, но имеет два дополнительных значения: "letter-justify" (вытягивание промежутков между буквами) и "stretch-justify" (вытягивание букв).
v-text-kern boolean false Если true, то включается кернинг текста, т. е. выравнивание промежутков между буквами разной ширины.
v-text-reverse boolean false Если true, то строки выводятся в обратном порядке. Используется при вертикальном выводе теста.
v-text-spacing-mode string "tightening" Режим вывода промежутков между буквами. Возможные значения: "tightening" (удаление промежутков) и "tracking" (добавление промежутков). Величина изменения промежутков задается свойством v-text-spacing.
v-text-spacing number 100 Величина изменения промежутков между буквами в свойстве v-text-spacing-mode.
xscale boolean false Если true, то текст выводится горизонтально вдоль нижнего края фигуры. По умолчанию, вывод текста следует форме фигуры.

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

Атрибут Тип По умолчанию Описание
on boolean false Разрешает или запрещает вывод текста.
fitpath boolean false Если true, то вывод текста следует форме фигуры.
fitshape boolean false Если true, то текст масштабируется так, чтобы заполнить всю фигуру.

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

<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 и большинстве графических примитивов для задания экструзии фигуры, т. е. для придания ей трехмерности путем растяжения по третьему измерению. Он имеет следующие атрибуты:

Атрибут Тип По умолчанию Описание
on boolean false Разрешает или запрещает вывод экструзии.
type string "parallel" Тип проекции. Возможные значения: "parallel" (параллельные проекция) и "perspective" (перспективная проекция).
render string "solid" Режим отображения. Возможные значения: "solid" (заливка цветом), "wireframe" (проволочная рамка фигуры) и "boundingcube" (проволочная рамка объемлющего куба).
plane string "xy" Плоскость, перпендикулярная экструзии. Возможные значения: "xy", "zx" и "yz".
backdepth number 36pt Глубина экструзии позади объекта.
foredepth number 0 Глубина экструзии перед объектом.
skewamt number 50% Величина наклона экструзии в диапазоне от 0 до 100%. Имеет смысл только для параллельной проекции
skewangle угол 45deg Угол наклона экструзии. Имеет смысл только для параллельной проекции
colormode string "auto" Цветовой режим экструзии. Возможные значения: "auto" (использовать fillcolor фигуры) и "custom" (использовать color экструзии).
color цвет цвет заливки Цвет экструзии. Используется, если colormode равен "custom".
edge number 1pt Видимый скос углов экструзии.
facet number 30000 Количество граней, аппроксимирующих поверхность экструзии.
brightness number 20000 Общая яркость сцены.
diffusity number 0 Степень рассеяния света, отраженного от поверхности экструзии. Обычно ее значение лежит между 0 и 1.
shininess number 5 Концентрация отраженного света на поверхности экструзии. Типичные значения от 4 до 7. Большие значения (8 - 10) создают эффект зеркальной поверхности, а меньшие (2 - 3) — эффект неоднородной поверхности.
specularity number 0 Отражающая способность поверхности экструзии. Обычно ее значение лежит между 0 и 1.
metal boolean false Если true, то поверхность экструзии имитирует металлическую поверхность. Для большей достоверности рекомендуется увеличить specularity (примерно до 1.2) и уменьшить diffusity (примерно до 0.6).
lightface boolean true Если false, то лицевая поверхность экструзии не реагирует на изменения освещенности.
lightharsh boolean true Если false, то границы тени от основного источника света размываются.
lightharsh2 boolean true Если false, то границы тени от вторичного источника света размываются.
lightlevel number 38000 Интенсивность основного источника света.
lightlevel2 number 38000 Интенсивность вторичного источника света.
lightposition vector3d 50000,0,10000 Положение основного источника света.
lightposition2 vector3d -50000,0,10000 Положение вторичного источника света.
viewpoint vector3d 0,0,0 Положение наблюдателя.
viewpointorigin vector2d 0,0 Положение наблюдателя в объемлющем прямоугольнике фигуры. Координаты меняются от -50% до 50%.
autorotationcenter boolean false Если true, то центром вращения будет геометрический центр экструзии. По умолчанию, центр вращения задается атрибутом rotationcenter.
lockrotationcenter boolean true Если true, то вращение задается атрибутом rotationangle. Если false, то вращение задается атрибутами orientation и orientationangle. Примечание: <v:extrusion lockrotationcenter="false" orientationangle="45" orientation="(0,1,0)"/> эквивалентно <v:extrusion lockrotationcenter="true" rotationangle="45"/>.
orientation vector3d 100,0,0 Вектор, вокруг которого вращается фигура.
orientationangle угол 0 Угол вращения фигуры вокруг вектора orientation.
rotationcenter vector3d 0,0,0 Вектор, вокруг которого вращается фигура, в процентах от размера фигуры.
rotationangle vector2d 0, 0 Угол вращения фигуры вокруг вектора rotationcenter по осям y и x. Угол вращения по оси z задается атрибутом стилей rotation.

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

<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>