WDH: VML - Графические примитивы

Глава 10.3. Графические примитивы

Графические примитивы — это конкретные фигуры, чаще всего употребляющиеся при рисовании. Они имеют все атрибуты элемента shape, за исключением атрибута type. При этом атрибуты shape, не имеющие смысла для данного примитива, игнорируются. Кроме того, каждый из графических примитивов имеет собственные атрибуты в зависимости от создаваемой им фигуры. Графические примитивы могут содержать те же внутренние элементы, что и элемент shape.

Синтаксис: <v:line>…</v:line> Стили: flip, left, position, rotation, top, visibility, z-index Атрибуты: id, class, style, title, alt, href, target, coordsize, coordorigin from = vector2d (начальная точка) strokecolor = цвет (цвет линии) stroked = boolean (вывод линии) strokeweight = размер (толщина линии) to = vector2d (конечная точка)

Элемент line выводит отрезок прямой. Начальная и конечная точка отрезка задаются соответственно атрибутами from и to, а цвет и толщина линии — атрибутами strokecolor и strokeweight. Пример:

<v:line style='position:relative; left:3em; top:0'
   strokecolor="red" strokeweight="2px" from="0 0" to="100 0"
/>

10.3.2. Ломаные: элемент polyline

Синтаксис: <v:polyline>…</v:polyline>
Стили:     flip, left, position, rotation, top, visibility, z-index
Атрибуты:  id, class, style, title, alt, href, target, coordsize, coordorigin
           fillcolor = цвет (цвет заливки)
           filled = boolean (заливка цветом)
           points = string (массив координат ломаной)
           strokecolor = цвет (цвет линии)
           stroked = boolean (вывод линии)
           strokeweight = размер (толщина линии)

Элемент polyline выводит ломаную, т. е. серию соединенных отрезков. Координаты точек задаются атрибутом points, который имеет вид "x1 y1 … xN yN", а цвет и толщина линий — атрибутами strokecolor и strokeweight. Если задан атрибут fillcolor, то производится заливка полученной фигуры. Пример:

<v:polyline style='position:relative; left:3em; top:0' fillcolor="blue"
  strokecolor="red" strokeweight="2px" points="0 0 20 20 40 0 60 20" 
/>

10.3.3. Кривые Безье: элемент curve

Синтаксис: <v:curve>…</v:curve>
Стили:     flip, left, position, rotation, top, visibility, z-index
Атрибуты:  id, class, style, title, alt, href, target, coordsize, coordorigin
           control1 = vector2d (первая управляющая точка)
           control2 = vector2d (вторая управляющая точка)
           fillcolor = цвет (цвет заливки)
           filled = boolean (заливка цветом)
           from = vector2d (начальная точка)
           strokecolor = цвет (цвет линии)
           stroked = boolean (вывод линии)
           strokeweight = размер (толщина линии)
           to = vector2d (конечная точка)

Элемент curve выводит кубическую кривую Безье. Кривая задается четырьмя точками from, control1, control2 и to. Цвет и толщина линии задаются атрибутами strokecolor и strokeweight. Если задан атрибут fillcolor, то производится заливка полученной фигуры. Пример:

<v:curve style='position:relative; left:3em; top:0'
  fillcolor="blue" strokecolor="red" strokeweight="2px"
  from="10pt,10pt" to="100pt,10pt" control1="40pt,30pt" control2="70pt,30pt"
/>

10.3.4. Прямоугольники: элемент rect

Синтаксис: <v:rect>…</v:rect>
Стили:     flip, height, left, margin-bottom, margin-left, margin-right, margin-top,
           position, rotation, top, visibility, width, z-index
Атрибуты:  id, class, style, title, alt, href, target, coordsize, coordorigin
           fillcolor = цвет (цвет заливки фигуры)
           filled = boolean (заливка цветом)
           strokecolor = цвет (цвет рамки фигуры)
           stroked = boolean (вывод рамки фигуры)
           strokeweight = размер (ширина рамки фигуры)

Элемент rect выводит прямоугольник. Положение и размер прямоугольника задаются стилями CSS. Цвет и толщина рамки задаются атрибутами strokecolor и strokeweight. Если задан атрибут fillcolor, то производится заливка полученной фигуры. Пример:

<v:rect style='position:relative; left:3em; top:0; height:100px; width:100px'
  strokecolor="red" strokeweight="2px" fillcolor="blue"
/>

10.3.5. Прямоугольники со скругленными углами: элемент roundrect

Синтаксис: <v:roundrect>…</v:roundrect>
Стили:     flip, height, left, margin-bottom, margin-left, margin-right, margin-top,
           position, rotation, top, visibility, width, z-index
Атрибуты:  id, class, style, title, alt, href, target, coordsize, coordorigin
           arcsize = number (скругление)
           fillcolor = цвет (цвет заливки фигуры)
           filled = boolean (заливка цветом)
           strokecolor = цвет (цвет рамки фигуры)
           stroked = boolean (вывод рамки фигуры)
           strokeweight = размер (ширина рамки фигуры)

Элемент roundrect выводит прямоугольник со скругленными углами. Положение и размер прямоугольника задаются стилями CSS. Скругление улов задается атрибутом arcsize, который должен быть числом от 0 до 1 и понимается как процент от половины меньшей стороны прямоугольника. Если его значение равно 0, то углы будут квадратными, если он равен 1, то меньшая сторона образует полукруг. Цвет и толщина рамки задаются атрибутами strokecolor и strokeweight. Если задан атрибут fillcolor, то производится заливка полученной фигуры. Пример:

<v:roundrect style='position:relative; left:3em; top:0; height:50px; width:100px'
  strokecolor="red" strokeweight="2px" fillcolor="blue" arcsize="30%"
/>

10.3.6. Эллипсы: элемент oval

Синтаксис: <v:oval>…</v:oval>
Стили:     flip, height, left, margin-bottom, margin-left, margin-right, margin-top,
           position, rotation, top, visibility, width, z-index
Атрибуты:  id, class, style, title, alt, href, target, coordsize, coordorigin
           fillcolor = цвет (цвет заливки фигуры)
           filled = boolean (заливка цветом)
           strokecolor = цвет (цвет рамки фигуры)
           stroked = boolean (вывод рамки фигуры)
           strokeweight = размер (ширина рамки фигуры)

Элемент oval выводит эллипс. Положение и размер эллипса задаются стилями CSS. Цвет и толщина рамки задаются атрибутами strokecolor и strokeweight. Если задан атрибут fillcolor, то производится заливка полученной фигуры. Пример:

<v:oval style='position:relative; left:3em; top:0; height:50px; width:100px'
  strokecolor="red" strokeweight="2px" fillcolor="blue"
/>

10.3.7. Эллиптические дуги: элемент arc

Синтаксис: <v:arc>…</v:arc>
Стили:     flip, height, left, margin-bottom, margin-left, margin-right, margin-top,
           position, rotation, top, visibility, width, z-index
Атрибуты:  id, class, style, title, alt, href, target, coordsize, coordorigin
           endangle = number (конечный угол)
           fillcolor = цвет (цвет заливки фигуры)
           filled = boolean (заливка цветом)
           startangle = number (начальный угол)
           strokecolor = цвет (цвет рамки фигуры)
           stroked = boolean (вывод рамки фигуры)
           strokeweight = размер (ширина рамки фигуры)

Элемент arc выводит дугу эллипса. Положение и размер эллипса задаются стилями CSS, а начало и конец дуги задаются атрибутами startangle и endangle. Цвет и толщина рамки задаются атрибутами strokecolor и strokeweight. Если задан атрибут fillcolor, то производится заливка полученной фигуры. Пример:

<v:arc style='position:relative; left:3em; top:0; height:50px; width:100px'
  strokecolor="red" strokeweight="2px" fillcolor="blue" startangle="-90" endangle="90"
/>

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

Синтаксис: <v:image>…</v:image>
Стили:     flip, height, left, margin-bottom, margin-left, margin-right, margin-top,
           position, rotation, top, visibility, width, z-index
Атрибуты:  id, class, style, title, alt, href, target, coordsize, coordorigin
           bilevel = boolean (черно-белое изображение)
           blacklevel = number (интенсивность черного цвета)
           chromakey = цвет (прозрачный цвет)
           cropbottom = number (обрезка снизу)
           cropleft = number (обрезка слева)
           cropright = number (обрезка справа)
           croptop = number (обрезка сверху)
           fillcolor = цвет (цвет заливки фигуры)
           filled = boolean (заливка цветом)
           gain = number (интенсивность белого цвета)
           gamma = number (контрастность)
           grayscale = boolean (изображение в серой гамме)
           src = string (гиперссылка на графический файл)
           strokecolor = цвет (цвет рамки фигуры)
           stroked = boolean (вывод рамки фигуры)
           strokeweight = размер (ширина рамки фигуры)

Элемент image выводит графический образ из внешнего графического файла, заданного атрибутом src. Положение и размер образа задаются стилями CSS. Цвет и толщина рамки задаются атрибутами strokecolor и strokeweight (stroked должно быть установлено в true). Если filled равно true и задан атрибут fillcolor, то прозрачные точки заливаются заданным цветом. Пример:

<v:image style='position:relative; left:3em; top:0; height:50px; width:35px'
  src="images/leaf.gif"
/>

Остальные атрибуты имеют следующее назначение.

Если bilevel равно true, то изображение преобразуется в черно-белое.
Атрибут blacklevel задает интенсивность черного цвета. По умолчанию он равен 0. Значение -0.5 преобразует все цвета в черный, а значение +0.5 в белый.
Атрибут chromakey указывает, какой цвет должен считаться прозрачным.
Атрибуты cropbottom, cropleft, cropright и croptop принимают значение от -1 до 1 и по умолчанию равны 0. Положительные значения этих атрибутов означают обрезку соответствующего процента изображения снизу, слева, справа или сверху. Отрицательные значения сжимают изображение, добавляя к нему пустое пространство соответствующего размера.
Атрибут gain управляет яркостью белого цвета в диапазоне от 0 до бесконечности. По умолчанию он равен 1; значения, меньшие 1, делают изображение более серым, а большие 1 — более светлым.
Атрибут gamma управляет контрастностью изображения в диапазоне от 0 до бесконечности. По умолчанию он равен 0; значения, меньшие 1, повышают контрастность, а большие 1 ее понижают. Осмысленные значения этого атрибута варьируются от 0.3 до 3.
Если grayscale равно true, то изображение преобразуется в серую гамму.