Глава 10.2. Базовые элементы

10.2.1. Фигуры общего вида: элемент shape

Синтаксис: <v:shape>…</v:shape>
Стили:     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
           adj = string (список выравнивающих значений)
           fillcolor = цвет (цвет заливки фигуры)
           filled = boolean (заливка цветом)
           path = string (описание формы фигуры)
           strokecolor = цвет (цвет рамки фигуры)
           stroked = boolean (вывод рамки фигуры)
           strokeweight = размер (ширина рамки фигуры)
           type = string (указатель на shapetype)

Элемент shape описывает геометрическую фигуру общего вида. Он может использоваться самостоятельно или внутри элемента group. Для отображения фигуры мы должны, как минимум, задать позицию и размер ее объемлющего прямоугольника (свойства стилей position, left, top, height и width) и форму фигуры (атрибут path). Пример простой фигуры без внутренних элементов:

<v:shape style='position: relative; top: 0; left: 3em; width: 175; height: 175'
  strokecolor="red" strokeweight="2px" fillcolor="blue"
  coordorigin="0 0" coordsize="175 175"
  path="m 8,65 l 72,65,92,11,112,65,174,65,122,100,142,155,92,121,42,155,60,100 x e"
/>

Поясним назначение атрибутов этого элемента.

  • Атрибут path определяет форму фигуры. Он подробно описан в п. 10.4.1 (атрибут v элемента path).
  • Атрибут type является закладкой и указывает на id элемента shapetype, определяющего свойства данной фигуры (см. пример в п. 10.2.2).
  • Атрибут adj задает список выравнивающих значений для формул. Он подробно описан в п. 10.4.2.
  • Если атрибут filled равен true, то fillcolor задает цвет заливки фигуры. Если он равен false, то заливка не производится.
  • Если атрибут stroked равен true, то strokecolor задает цвет рамки фигуры, а strokeweight — ее ширину. Если он равен false, то фигура выводится без рамки.

Элемент shape может содержать графические примитивы и следующие внутренние элементы: extrusion, fill, formulas, handles, imagedata, path, shadow, skew, stroke, textbox и textpath. При этом элементы fill, path и stroke переопределяют значения соответствующих атрибутов shape.

10.2.2. Заготовка фигуры: элемент shapetype

Синтаксис: <v:shapetype>…</v:shapetype>
Атрибуты:  id, class, style, title, alt, href, target, coordsize, coordorigin
           adj = string (список выравниваний для формул)
           fillcolor = цвет (цвет заливки фигуры)
           filled = boolean (заливка цветом)
           path = string (описание формы фигуры)
           strokecolor = цвет (цвет рамки фигуры)
           stroked = boolean (вывод рамки фигуры)
           strokeweight = размер (ширина рамки фигуры)

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

<v:shapetype id="star"
  strokecolor="red" strokeweight="2px" fillcolor="blue"
  coordorigin="0 0" coordsize="175 175"
  path="m 8,65 l 72,65,92,11,112,65,174,65,122,100,142,155,92,121,42,155,60,100 x e"
/>
<v:shape style='position: relative; top: 0; left: 3em; width: 175; height: 175'
  type="#star" />
<v:shape style='position: relative; top: 0; left: 3em; width: 100; height: 100'
  type="#star" />

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

Элемент shape использует значения тех атрибутов заготовки, которые в нем явно не переопределены.

10.2.3. Группы фигур: элемент group

Синтаксис: <v:group>…</v:group>
Стили:     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

Элемент group предназначен для группировки фигур. Созданная таким образом группа фигур позиционируется и преобразуется единым образом. В состав группы могут входить элементы group, shape, shapetype и графические примитивы. Пример группы:

<v:group style='position:relative; left:3em; top:0; width:200pt; height:200pt'
  coordsize="1000,1000" coordorigin="-500,-500">
  <v:oval style='position:absolute; left:0; top:0; width:400; height:300'
    fillcolor="red" />
  <v:roundrect style='position:absolute; left:0; top:0; width:250; height:200'
    fillcolor="green" />
</v:group>

10.2.4. Фреймы: элемент vmlframe

Синтаксис: <v:vmlframe>…</v:vmlframe>
Атрибуты:  id, class, style, title
           clip = boolean (обрезка графического образа)
           origin = vector2d (начало координат)
           size = vector2d (размер фрейма)
           src = string (гиперссылка на содержимое фрейма)

Элемент vmlframe определяет фрейм в окне обозревателя. Содержимое фрейма задается атрибутом src, который должен содержать гиперссылку. Гиперссылка может быть либо закладкой, указывающей на объект, содержащийся в текущем HTML-документе, либо указателем на внешний файл. В последнем случае внешний файл должен быть XML-файлом, например:

<v:vmlframe src="ext.vml#img01"
  style='position:relative; top:0; left:0; width:50; height:50'>
/>

EXT.VML:

<xml xmlns:v = "urn:schemas-microsoft-com:vml">
<v:image id="img01" src="photo.jpg"
  style='height:100; width:100; top:50; left:50'
/>
</xml>

Способ отображения объекта во фрейме задается атрибутом clip. Если clip равно true, то объект отображается без масштабирования, а его части, выходящие за пределы фрейма обрезаются. В этом случае начало координат задается атрибутом origin, а размер фрейма атрибутом size. Если же clip равно false, то производится масштабирование объекта так, чтобы он целиком поместился во фрейм. В этом случае атрибуты origin и size игнорируются. По умолчанию clip равно false.В следующем примере мы сначала рисуем овал, а затем отображаем его в двух фреймах: первый раз с обрезкой, второй раз с масштабированием.

<!-- исходная фигура -->
<v:oval id="oval01"
   style='width:100pt; height:50pt'
   fillcolor="green" strokecolor="red" strokeweight="2pt"
/>
<!-- фрейм с обрезкой -->
<v:vmlframe src="#oval01" clip="true" size="50pt,50pt" origin="0,0"
  style='border:2pt solid; width:50pt; height:50pt'
/>
<!-- фрейм с масштабированием -->
<v:vmlframe src="#oval01" clip="false"
  style='border:2pt solid; width:50pt; height:50pt'
/>
   

10.2.5. Фон: элемент background

Синтаксис: <v:background>…</v:background>
Атрибуты:  id
           fillcolor = цвет (цвет заливки фигуры)
           filled = boolean (заливка цветом)

Элемент background предназначен для заливки фона страницы. Атрибуты filled и fillcolor задают заливку фона и имеют тот же смысл, что в элементе shape. Кроме того, этот элемент может содержать подэлемент fill, задающий более сложные варианты заливки. Пример:

<v:background fillcolor="red">
  <v:fill type="gradient" />
</v:background>