Позиционирование фигур

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

Примечание

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

 

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

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

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

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

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

static

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

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

-ps.gif shape1 (2123 байт)

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

назад к началу

relative

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

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

shape3.gif (2048 байт)

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

назад к началу

absolute

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

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

shape2.gif (2006 байт)

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

назад к началу

z-index

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

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

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

shape4.gif (572 байт)

<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 байт)

<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 байт)

<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>

назад к началу

Поворот

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

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

назад к началу

flip

Атрибут « перелистывание стиля» можно использовать для отражения фигуры на оси x или y в соответствии со следующей таблицей.

Значение Описание
x Отражение повернутой фигуры относительно оси y (инверсия координат x)
да Отражение повернутой фигуры относительно оси x (обратные координаты y)

 

В свойстве отражения можно указать и x, и y.

Например, если ввести Style= '... отразить: x y. Вы отразите фигуру на обеих осях x и y.

назад к началу

Сводка

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

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