Глава 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" /> Поясним назначение атрибутов этого элемента.
Элемент 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> |