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