Глава 10.4. Вспомогательные элементы

Описанные в этой главе элементы VML употребляются внутри элементов shape, shapetype и графических примитивов и определяют их графическое содержимое.

10.4.1. Форма фигуры: элемент path

Синтаксис: <v:path>…</v:path>
Атрибуты:  id
           arrowok = boolean (вывод стрелок)
           fillok = boolean (заливка фигуры)
           gradientshapeok = boolean (градиентная заливка)
           limo = vector2d (точка вытягивания фигуры)
           shadowok = boolean (вывод тени)
           strokeok = boolean (вывод рамки)
           textboxrect = string (текстовый прямоугольник)
           textpathok = boolean (вывод текста)
           v = string (форма фигуры)

Элемент path может употребляться в элементах shape и shapetype для задания формы фигуры. Форма фигуры задается атрибутом v, который эквивалентен атрибуту path базовых элементов. Этот атрибут является строкой, содержащей следующие команды движения пера по экрану (cpx и cpy обозначают координаты текущей точки):

Команда Название Параметры Описание
m moveto 2 Начинает новый подпуть с заданной точки (x,y).
l lineto 2* Рисует отрезок от текущей точки до заданной точки (x,y), которая становится новой текущей точкой. Может содержать несколько пар (x,y), задавая рисование ломаной.
c curveto 6* Рисует кубическую кривую Безье от текущей точки. Параметры имеют вид: первая управляющая точка, вторая управляющая точка, конечная точка. Конечная точка становится новой текущей точкой.
x close 0 Замыкает текущий подпуть, проводя отрезок из текущей точки в начальную точку, заданную командой moveto.
e end 0 Заканчивает текущий набор подпутей и заливает его. Последующие наборы подпутей заливаются независимо от данного.
t rmoveto 2* Начинает новый подпуть с точки (cpx+x,cpy+y).
r rlineto 2* Рисует отрезок от текущей точки до точки (cpx+x,cpy+y), которая становится новой текущей точкой. Может содержать несколько пар относительных координат, задавая рисование ломаной.
v rcurveto 6* Рисует кубическую кривую Безье от текущей точки. Параметры задают координаты относительно (cpx,cpy).
nf nofill 0 Текущий набор путей не будет заливаться.
ns nostroke 0 Текущий набор путей не будет иметь рамки.
ae angleellipseto 6* Рисует сегмент эллипса. Параметры имеют вид: центр (x,y), ширина, высота, начальный угол, конечный угол. Из текущей точки в начальную точку сегмента проводится отрезок.
al angleellipse 6* То же, что angleellipseto, но без рисования отрезка.
at arcto 8* Рисует дугу эллипса. Первые четыре параметра задают описанный прямоугольник эллипса, а вторые четыре — начальный и конечный радиальные вектора. Из текущей точки в начальную точку дуги проводится отрезок. Дуга рисуется против часовой стрелки.
ar arc 8* То же, что arcto, но без рисования отрезка.
wa clockwisearcto 8* То же, что arcto, но дуга рисуется по часовой стрелке.
wr clockwisearc 8* То же, что arc, но дуга рисуется по часовой стрелке.
qx ellipticalqaudrantx 2* Рисует квадрант эллипса из текущей точки в заданную, начиная с горизонтального направления.
qy ellipticalquadranty 2* Рисует квадрант эллипса из текущей точки в заданную, начиная с вертикального направления.
qb quadraticbezier 2+2* Определяет одну или несколько квадратичных кривых Безье. Параметры имеют вид: управляющая точка*, конечная точка. Промежуточные точки на кривой получаются интерполяцией между управляющими точками, как в спецификации шрифтов OpenType.

Параметры могут отделяться пробелами или запятыми. Пример:

<v:shape coordorigin="0 0" coordsize="200 200"  fillcolor="green"
  strokecolor="red" style='position:relative; left:3em; top:0; width:50; height:50'>
  <v:path v="m 1,1 l 1,200, 200,200, 200,1 x e"/>
</v:shape>

Опишем назначение остальных атрибутов.

  • Если arrowok равно true и рамка имеет стрелки, то стрелки будут рисоваться. Этот атрибут перекрывает все атрибуты, связанные со стрелками, в родительском элементе и элементе stroke. По умолчанию он равен false. Пример:
  • <v:line from="40 0" to="200 0" strokecolor="black">
      <v:stroke startarrow="block" endarrow="block"/>
      <v:path arrowok="true"/>
    </v:line>
  • Если fillok равно false, то заливка фигуры не производится. Этот атрибут перекрывает все атрибуты, связанные с заливкой, в родительском элементе и элементе fill. По умолчанию он равен true.
  • Если gradientshapeok равно true, то производится концентрическая градиентная заливка фигуры. По умолчанию этот атрибут равен false. Он имеет смысл только для элемента fill, имеющего type, равный gradientradial. Пример:
  • <v:rect strokecolor="red"
      style='position:relative; top:0; left:3em; width:50; height:50'>
      <v:fill type="gradientradial" color="blue" color2="yellow"/>
      <v:path gradientshapeok="true"/>
    </v:rect>
  • Атрибут limo определяет точку вытягивания на границе фигуры; по умолчанию он равен (0, 0). Точка вытягивания указывает, где и как пользователь может вытягивать фигуру в графическом редакторе.
  • Если shadowok равно true и фигура имеет тень, то тень выводится. Этот атрибут перекрывает все атрибуты, связанные с тенью, в родительском элементе и элементе shadow. По умолчанию он равен true. Пример:
  • <v:rect strokecolor="red" fillcolor="green"
      style='position:relative; top:0; left:3em; width:50; height:50'>
      <v:shadow on="true" offset="5pt,5pt" color="blue"/>
      <v:path shadowok="true"/>
     </v:rect>
     
  • Если strokeok равно true, то будет рисоваться рамка фигуры. Этот атрибут перекрывает все атрибуты, связанные с рамкой, в родительском элементе и элементе stroke. По умолчанию он равен true.
  • Атрибут textboxrect определяет текстовые прямоугольники для использования элементом textbox. Каждый прямоугольник задается четырьмя координатами; определения прямоугольников разделяются точкой с запятой.
  • <v:shape strokecolor="red" coordorigin="0 0" coordsize="200 200"
      style='position:relative; top:0; left:3em; width:50; height:50'>
      <v:path v="m 1,1 l 1,200, 200,200, 200,1 x e" textboxrect="10 70 190 190"/>
      <v:textbox>VML</v:textbox>
    </v:shape>
    VML
  • Если textpathok равно true и родительский элемент содержит textpath, то он будет рисоваться. По умолчанию этот атрибут равен false.

10.4.2. Формулы: элемент formulas

Синтаксис: <v:formulas>…</v:formulas>

Элемент formulas может употребляться в элементах shape и shapetype для задания формул. Он не имеет атрибутов и состоит из набора подэлементов вида <v:f eqn="operation v p1 p2"/>. Каждый такой подэлемент задает одну формулу, которая состоит из названия операции и аргументов (от 1 до 3), которые принято обозначать v, p1 и p2.

Операция Параметры Результат Описание
val 1 v Определяет одно значение через другое.
sum 3 v + p1 - p2 Используется для сложения и вычитания.
product 3 v * p1 / p2 Используется для умножения и деления.
mid 2 (v + p1) / 2 Среднее значение.
abs 1 abs(v) Абсолютное значение.
min 2 min(v, p1) Наименьшее из двух чисел.
max 2 max(v, p1) Наибольшее из двух чисел.
if 3 v > 0 ? p1 : p2 Проверка условия.
mod 3 sqrt(v^2 + p1^2 + p2^2) Длина вектора.
atan2 2 atan2(p1, v) Полярный угол. Результат в градусах·216.
sin 2 v * sin(p1) Синус, аргумент в градусах·216.
cos 2 v * cos(p1) Косинус, аргумент в градусах·216.
cosatan2 3 v * cos(atan2(p2, p1) Операция с повышенной точностью в промежуточных вычислениях.
sinatan2 3 v * sin(atan2(p2, p1) Операция с повышенной точностью в промежуточных вычислениях.
sqrt 1 sqrt(v) Положительное значение квадратного корня.
sumangle 3 v + p1*216 + p2*216 v — угол в градусах (умноженный на 216),
p1 и p2 — углы в градусах.
ellipse 3 p2 * sqrt(1-(v/p1)^2) Эллипс.
tan 2 v * tan(p1) Тангенс, аргумент в градусах·216.

Результатом вычисления формулы всегда является 32-битовое целое число. Аргументами формул могут быть либо целые числа в диапазоне от 0 до 65535 (т. е. беззнаковые 16-битовые числа), либо результаты предыдущих формул, либо выравнивающие значения, заданные в атрибуте adj элемента shape, либо предопределенные константы. Синтаксис аргументов следует следующим правилам:

Аргумент Описание
@n Значение формулы n, где n должно быть меньше номера текущей формулы, считая с 0. Общее число формул в элементе не более 128.
#n Выравнивающее значение n, где n должно быть числом от 0 до 7.
width Ширина, заданная атрибутом coordsize.
height Высота, заданная атрибутом coordsize.
xcenter Абсцисса центра локальных координат, coordorigin.x + coordsize.w/2.
ycenter Ордината центра локальных координат, coordorigin.y + coordsize.h/2.
xlimo Абсцисса атрибута limo.
ylimo Ордината атрибута limo.
hasstroke 1, если образ имеет рамку, и 0 в противном случае. (Значение атрибута on элемента stroke.)
hasfill 1, если образ имеет заливку, и 0 в противном случае. (Значение атрибута on элемента fill.)
pixellinewidth Толщина линии в пикселях.
pixelwidth Ширина фигуры в пикселях.
pixelheight Высота фигуры в пикселях.
emuwidth Ширина coordsize в EMU.
emuheight Высота coordsize в EMU.
emuwidth2 Половина ширины coordsize в EMU.
emuheight2 Половина высоты coordsize в EMU.

Здесь EMU (English Metrical Unit) — наименьшая единица измерения, используемая в VML для внутреннего хранения данных. Она определяется так: 1 сантиметр = 360000 EMU.

Пример использования формул:

<v:shape style='position:relative; top:0; left:3em; width:1in; height:1in'
  strokecolor="red" strokeweight="2pt" coordsize="21600,21600" adj="17520"
  path="m 10800,0 qx 0,10800, 10800,21600, 21600,10800, 10800,0 x e
        m 7340,6445 qx 6215,7570, 7340,8695, 8465,7570, 7340,6445 x nf e
        m 14260,6445 qx 13135,7570, 14260,8695, 15385,7570, 14260,6445 x nf e
        m 4960,@0 c 8853,@3, 12747,@3, 16640,@0 nf e">
  <v:formulas>
    <v:f eqn="sum 33030 0 #0"/>
    <v:f eqn="prod #0 4 3"/>
    <v:f eqn="prod @0 1 3"/>
    <v:f eqn="sum @1 0 @2"/>
  </v:formulas>
</v:shape>

10.4.3. Настройки: элемент handles

Синтаксис: <v:handles>…</v:handles>

Элемент handles может употребляться в элементах shape и shapetype для задания пользовательских настроек. Точнее говоря, он позволяет определить несколько участков фигуры, за которые пользователь может потянуть в графическом редакторе, чтобы изменить значения атрибута adj. Этот элемент не имеет атрибутов и состоит из набора подэлементов h (от одного до четырех), каждый из которых описывает один участок настройки.

Синтаксис: <v:h/>
Атрибуты:  invx = boolean (инвертировать абсциссу)
           invy = boolean (инвертировать ординату)
           map = vector2d (область отображения)
           polar = vector2d (центр полярных координат)
           position = vector2d (координаты настройки)
           radiusrange = vector2d (диапазон полярного радиуса)
           switch = boolean (обмен координат)
           xrange = vector2d (диапазон абсцисс)
           yrange = vector2d (диапазон ординат)

Опишем подробно назначение этих атрибутов.

Атрибут Тип По умолчанию Описание
position vector2d 0, 0 Позиция настройки (x,y). Значения могут быть константами, формулами, выравнивающими значениями или ключевыми словами center, topleft, bottomright. Если значение задано константой, формулой или ключевым словом, то позиция настройки в данном измерении фиксирована. Если же значение задано выравнивающим значением (например, #2), то настройка может двигаться в данном измерении, и соответствующее настроечное значение определяется позицией настройки. Если задан атрибут polar, то данный атрибут содержит радиус и угол вместо x и y.
polar vector2d   Этот атрибут указывает, что настройка имеет полярные координаты и задает их центр.
map vector2d 0, 1000 Позиция (x,y) настройки отображается из диапазона coordsize в данный диапазон.
invx boolean false Позиция настройки по оси x инвертируется, т. е. x = coordorigin.x + coordsize.x - x.
invy boolean false Позиция настройки по оси y инвертируется, т. е. y = coordorigin.y + coordsize.y - y.
switch boolean false Если высота фигуры больше ее ширины, то координаты (x,y) позиции настройки меняются местами. Это полезно для фигур, имеющих атрибут limo.
xrange vector2d 0,0 Диапазон значений, в которых может меняться настройка по оси x. Каждое значение может быть константой или формулой. Если значение опущено, то настройка может двигаться в данном направлении без ограничений.
yrange vector2d 0,0 Диапазон значений, в которых может меняться настройка по оси y. Каждое значение может быть константой или формулой. Если значение опущено, то настройка может двигаться в данном направлении без ограничений.
radiusrange vector2d 0,0 Диапазон значений, в которых может меняться радиус настройки. Каждое значение может быть константой или формулой. Если значение опущено, то настройка может двигаться в данном направлении без ограничений. Этот атрибут имеет смысл только при заданном атрибуте polar.

Пример использования настроек:

<v:shape style='position:relative; top:0; left:3em; width:90pt; height:54pt'
  strokecolor="red" strokeweight="2pt" coordsize="21600,21600" adj="16200,5400"
  path="m @0,0 l @0,@1, 0,@1, 0,@2, @0,@2, @0,21600, 21600,10800 x e">
  <v:formulas>
     <v:f eqn="val #0"/>
     <v:f eqn="val #1"/>
     <v:f eqn="sum height 0 #1"/>
     <v:f eqn="sum 10800 0 #1"/>
     <v:f eqn="sum width 0 #0"/>
     <v:f eqn="prod @4 @3 10800"/>
     <v:f eqn="sum width 0 @5"/>
   </v:formulas>
   <v:handles>
     <v:h position="#0,#1" xrange="0,21600" yrange="0,10800"/>
   </v:handles>
</v:shape>

10.4.4. Заливка фигуры: элемент fill

Синтаксис: <v:fill>…</v:fill>
Атрибуты:  id
           alignshape = boolean (выравнивание заливки)
           angle = number (угол градиентной заливки)
           aspect = string (сохранение пропорций)
           color = цвет (цвет заливки)
           color2 = цвет (второй цвет заливки)
           colors = string (массив цветов для градиентной заливки)
           focus = number (центр линейной градиентной заливки)
           focusposition = vector2d (центр радиальной градиентной заливки)
           focussize = vector2d (размер фокуса радиальной градиентной заливки)
           method = string (метод градиентной заливки)
           on = boolean (вывод заливки)
           opacity = number (прозрачность цвета заливки)
           origin = vector2d (центр образа заливки)
           position = vector2d (позиция образа заливки)
           size = vector2d (размер образа заливки)
           src = string (гиперссылка на графический файл)
           type = string (тип заливки)

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

Значение Описание Пример
solid Сплошная заливка цветом. Принято по умолчанию.
gradient Линейная градиентная заливка.
gradientradial Радиальная градиентная заливка.
tile Заполнение фигуры изображением.
pattern Заполнение изображением с учетом цветов заливки.
frame Изображение растягивается для заполнения фигуры.

Все типы заливки делятся на три группы: сплошная заливка (solid), градиентная заливка (gradient и gradientradial) и заливка изображением (tile, pattern и frame). Атрибуты, определяющие заливку, соответственно можно также разбить на три группы: общие для всех типов, относящиеся к градиентной заливке и относящиеся к заливке изображением.

Общими атрибутами являются:

Атрибут Тип По умолчанию Описание
on boolean true Разрешает или запрещает вывод заливки. Этот атрибут перекрывает атрибут filled родительского элемента.
color цвет "white" Основной цвет заливки. Этот атрибут перекрывает атрибут fillcolor родительского элемента.
opacity number 1.0 Прозрачность заливки в диапазоне от 0 до 1.
color2 цвет "white" Второй цвет заливки. Имеет смысл для градиентной заливки и для типа pattern.

Атрибуты градиентной заливки:

Атрибут Тип По умолчанию Описание
colors string null Массив промежуточных цветов заливки и их относительные позиций вдоль градиента, например "30% red, 70% blue, 90% green". Цвет color соответствует 0%, color2 соответствует 100%.
angle number 0 Угол градиента. 0 соответствует горизонтали слева направо, положительные углы отсчитываются против часовой стрелки.
focus number 0 Центр линейной заливки в диапазоне от -100% до 100%. Значение 100% (или -100%) меняет местами color и color2, значение 50% означает цвет color на обоих концах и color2 в середине, а значение -50% означает цвет color2 на обоих концах и color в середине.
focusposition vector2d 0,0 Центр фокуса радиальной заливки в процентах от ширины и высоты фигуры. 50%,50% соответствуют центру фигуры.
focussize vector2d 0,0 Размер фокуса радиальной заливки в процентах от ширины и высоты фигуры.
method string "sigma" Способ генерации градиентной заливки. Принимает значения "none", "linear", "sigma" и "any".

Атрибуты заливки изображением:

Атрибут Тип По умолчанию Описание
src string null Гиперссылка на графический файл, содержащий изображение.
size vector2d фактический размер Размер изображения.
origin vector2d центр изображения Центр изображения относительно его верхнего левого угла в процентах от его размеров.
position vector2d центр фигуры Позиция изображения внутри фигуры в процентах от его размеров.
aspect string "ignore" Сохранение пропорций изображения. Принимает значения "ignore" (игнорировать пропорции), "atleast" (изображение не меньше, чем size) и "atmost" (изображение не больше, чем size).
alignshape boolean true true означает выравнивание изображения вдоль фигуры, false — выравнивание вдоль окна.