Размещение фигур

В этом разделе описывается VML, функция, которая устарела по состоянию на Windows Internet Explorer 9. Веб-страницы и приложения, использующие VML, следует перенести в SVG или другие широко поддерживаемые стандарты.

Примечание

По состоянию на декабрь 2011 года этот раздел был архивирован. В результате он больше не поддерживается. Дополнительные сведения см. в разделе "Архивированное содержимое". Сведения, рекомендации и рекомендации по текущей версии Windows Internet Explorer см. в Центре разработчиков Internet Explorer.

 

Вы узнали, как рисовать и цветные фигуры на веб-странице с помощью VML. В этом разделе вы будете использовать VML для точного размещения графики на веб-странице.

VML использует тот же синтаксис, который определен в разделах модели Box и визуальной отрисовкиCSS2 для размещения фигур на веб-странице. Для определения расположения базовой точки на веб-странице можно использовать статический, относительный или абсолютный . Затем можно использовать атрибуты верхнего и левого стилей, чтобы указать смещение от базовой точки, в которой будет располагаться содержащий прямоугольник для фигуры.

Можно также использовать z-индекс для указания z-порядка фигур на веб-странице.

Кроме того, VML обеспечивает поворот и отражение для поворота или переворачивания фигур.

В этом разделе:

static

Стиль позиции по умолчанию является статическим, который предписывает браузерам размещать фигуру в текущей точке (базовой точке) в текстовом потоке и игнорировать параметры в атрибутах верхнего и левого стилей.

Например, в следующем представлении VML красный овал располагается сразу после текста "Начало фигуры:", как показано на следующем рисунке:

shape1-ps.gif (2123 bytes)

<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>

back to top Назад к началу

relative

Если задать для атрибута стиля положения значение "relative", вы можете разместить в текстовом потоке вложенное поле со смещением от текущей точки (базовой точки). Смещение определяется параметрами в атрибутах верхнего и левого стилей. Имейте в виду, что содержащее поле, позиционируется как относительное, занимает место в текстовом потоке.

Например, в следующем представлении VML красный овал располагается 20 точек слева и 10 точек сверху относительно текущей точки текстового потока, как показано на следующем рисунке:

shape3.gif (2048 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;width:80pt;
height:90pt;' fillcolor="red" />
End.
</body>

back to top Назад к началу

absolute

Если задать для атрибута стиля положения значение "absolute", можно разместить содержащее поле точное расстояние от левого верхнего угла (базовой точки) родительского элемента (позиционированного элемента, содержащего фигуру). Имейте в виду, что в текстовом потоке содержится поле, позиционированного как абсолютное, не занимает место.

Например, в следующем представлении VML красный овал содержится в <body> элементе (вся веб-страница); поэтому базовая точка находится в левом верхнем углу веб-страницы. Содержащее поле для овала располагается ровно 20 точек слева и 10 точек сверху относительно левого левого угла веб-страницы, как показано на следующем рисунке:

shape2.gif (2006 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt
width:80pt; height:90pt;' fillcolor="red" />
End.
</body>

back to top Назад к началу

z-index

Можно разместить фигуру, перекрывающую другую фигуру. Как правило, рисунок, указанный последним в HTML-коде, отображается сверху.

В VML можно управлять z-порядком с помощью атрибута стиля z-индекса . Значение этого атрибута может быть нулевым, положительным целым числом или отрицательным целым числом. Рисунок, имеющий большее значение z-индекса, отображается поверх рисунка с меньшим значением z-индекса. Если оба рисунка имеют одно и то же значение z-индекса, рисунок, указанный последним в HTML-коде, появляется сверху.

Например, в следующем представлении VML красный овал отображается поверх синего прямоугольника. Это связано с тем, что значение z-индекса красного овала больше значения z-индекса синего прямоугольника.

shape4.gif (572 bytes)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index: 1'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt; z-index:0' fillcolor="blue" />

Если изменить z-индекс, как показано в следующем представлении VML, красный овал будет перемещаться за синим прямоугольником.

shape5.gif (469 bytes)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index:0'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt;z-index:1'
fillcolor="blue" />

При указании отрицательного целого числа можно использовать z-индекс для размещения графики за обычным текстовым потоком, как показано в следующем представлении VML.

shape6.gif (2125 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;z-index:-1;
width:80pt;height:90pt;' fillcolor="red" />
End.
</body>

back to top Назад к началу

Поворот

С помощью атрибута стиля поворота можно указать, сколько градусов фигура будет включать ее ось. Положительное значение указывает на поворот по часовой стрелке; отрицательное значение указывает на поворот по часовой стрелке.

Например, если указать style='... поворот:90', можно повернуть фигуру на 90 градусов по часовой стрелке.

back to top Назад к началу

flip

Атрибут стиля пролистывания можно использовать для переворачивания фигуры на оси X или Y в соответствии со следующей таблицей:

Значение Описание:
x Переворачивать повернутую фигуру вокруг оси Y (инвертированные координаты x)
да Переворачивать повернутую фигуру вокруг оси x (инвертированные координаты)

 

Оба значения x и y могут быть указаны в свойстве flip.

Например, если ввести style='... Flip:x y', фигура будет переворачиваться как на оси x, так и на оси Y.

back to top Назад к началу

Итоги

На основе изученных сведений вы можете точно разместить фигуру на веб-странице, выполнив следующие действия.

  1. Определите, где фигура будет отображаться на веб-странице, и размер фигуры.
  2. Укажите style='position:relative (или relative)', чтобы определить базовую точку.
  3. Используйте левую и верхнюю части , чтобы указать смещение от базовой точки.
  4. Используйте ширину и высоту , чтобы указать размер содержащего прямоугольник для фигуры.
  5. Используйте z-индекс , чтобы указать z-порядок фигуры.