Udostępnij za pośrednictwem

Pozycjonowanie kształtów

W tym temacie opisano VML — funkcję przestarzałą w programie Windows Internet Explorer 9. Strony internetowe i aplikacje, które opierają się na języku VML, powinny być migrowane do formatu SVG lub innych powszechnie obsługiwanych standardów.

Notatka

Od grudnia 2011 r. ten temat został zarchiwizowany. W rezultacie nie jest już aktywnie utrzymywany. Aby uzyskać więcej informacji, zobacz zarchiwizowaną zawartość. Aby uzyskać informacje, zalecenia i wskazówki dotyczące bieżącej wersji programu Windows Internet Explorer, zobacz Centrum deweloperów programu Internet Explorer.

 

Wiesz już, jak rysować i kolorować kształty na stronie internetowej przy użyciu języka VML. W tym temacie użyjesz języka VML do precyzyjnego pozycjonowania grafiki na stronie sieci Web.

VML używa tej samej składni zdefiniowanej w Box Model i Visual Rendering Model sekcjach CSS2 do umieszczania kształtów na stronie internetowej. Możesz użyć statyczne, względnelub bezwzględne, aby określić, gdzie punkt podstawowy znajduje się na stronie internetowej. Następnie można użyć górnej i lewej atrybutów stylu, aby określić przesunięcie od punktu podstawowego, w którym zostanie umieszczone pole zawierające dla kształtu.

Można również użyć z-index, aby określić kolejność kształtów na stronie internetowej.

Ponadto VML umożliwia wykonywanie obrotu i przerzucania w celu obracania lub przerzucania kształtów.

W tym temacie:

statyczny

Domyślny styl położenia jest statyczny, co oznacza dla przeglądarek, aby umieściły kształt w bieżącym punkcie (punkt podstawowy) w przepływie tekstu, i zignorowały ustawienia w atrybutach stylu górnej i lewej.

Na przykład w następującej reprezentacji VML czerwony owalny jest umieszczony natychmiast po tekście "Początek kształtu:", jak pokazano na poniższej ilustracji:

shape1-ps.gif (2123 bajtów)

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

z powrotem do góry Wstecz do góry

ktoś z rodziny

Ustawienie właściwości stylu pozycji na "relatywne" umożliwia umieszczenie kontenera z przesunięciem względem bieżącego punktu (punktu bazowego) w przepływie tekstu. Przesunięcie jest określane przez ustawienia w atrybutach stylu górnym i lewym. Należy pamiętać, że pole zawierające, które jest ustawione jako względne zajmuje miejsce w przepływie tekstu.

Na przykład w poniższej reprezentacji VML czerwony owal jest umieszczony 20 punktów od lewej i 10 punktów od góry względem obecnego punktu w układzie tekstu, jak pokazano na poniższym obrazku.

shape3.gif (2048 bajtów)

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

z powrotem do góry Wstecz do góry

absolutny

Ustawienie atrybutu stylu położenia na "absolutne" umożliwia umieszczenie pola w dokładnej odległości od lewego górnego rogu (punktu podstawowego) elementu nadrzędnego (pozycjonowanego elementu, który zawiera kształt). Należy pamiętać, że pole zawierające, które jest ustawione jako bezwzględne, nie zajmuje miejsca w przepływie tekstu.

Na przykład w poniższej reprezentacji VML czerwony owal jest zawarty w elemencie <body> (całej strony internetowej); dlatego punkt podstawowy znajduje się w lewym górnym rogu strony internetowej. Pole zawierające owal znajduje się dokładnie 20 punktów od lewej i 10 punktów od góry względem lewego górnego rogu strony internetowej, jak pokazano na poniższej ilustracji.

shape2.gif (2006 bajtów)

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

z powrotem do góry Wstecz do góry

indeks z

Można ustawić kształt nakładający się na inny kształt. Zwykle grafika wymieniona na końcu w kodzie HTML jest wyświetlana u góry.

W VML można kontrolować kolejność warstw przy użyciu atrybutu stylu z-index. Wartość tego atrybutu może być równa zero, dodatnia liczba całkowita lub ujemna liczba całkowita. Grafika o większej wartości indeksu z jest wyświetlana na wierzchu grafiki, która ma mniejszą wartość indeksu z. Gdy obie grafiki mają tę samą wartość indeksu z, grafika wyświetlana na końcu w kodzie HTML jest wyświetlana u góry.

Na przykład w poniższej reprezentacji VML czerwony owalny jest wyświetlany na górze niebieskiego prostokąta. Dzieje się tak, ponieważ wartość indeksu czerwonego owalu jest większa niż wartość indeksu niebieskiego prostokąta.

shape4.gif (572 bajty) 

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

Jeśli zmienisz indeks z, jak pokazano w poniższej reprezentacji języka VML, czerwony owal zostanie przeniesiony za niebieski prostokąt.

shape5.gif (469 bajtów) 

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

Jeśli podasz ujemną liczbę całkowitą, możesz użyć indeksu z, aby umieścić grafikę za normalnym przepływem tekstu, jak pokazano w poniższej reprezentacji VML.

shape6.gif (2125 bajtów)

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

z powrotem do góry Wstecz do góry

rotacja

Możesz użyć atrybutu stylu obrotu, aby określić, o ile stopni chcesz, aby kształt obrócił się wokół swojej osi. Wartość dodatnia wskazuje obrót zgodnie z ruchem wskazówek zegara; wartość ujemna wskazuje obrót w kierunku odwrotnym od obrotu zgodnie z ruchem wskazówek zegara.

Jeśli na przykład określisz styl ='... rotation:90', można obrócić kształt 90 stopni zgodnie z ruchem wskazówek zegara.

z powrotem do góry Wstecz do góry

obracać

Możesz użyć atrybutu stylu odbicia, aby odbić kształt wzdłuż jego osi x lub y zgodnie z poniższą tabelą:

Wartość Opis
x Przerzuć obrócony kształt wokół osi y (odwróć współrzędne x)
y Odwróć obrócony kształt względem osi x (odwróć współrzędne y)

 

Zarówno x, jak i y można określić we właściwości "flip".

Jeśli na przykład wpiszesz styl ='... flip:x y', przerzucisz kształt zarówno na osi x, jak i y.

z powrotem do góry Wstecz do góry

Streszczenie

Na podstawie poznanych informacji możesz dokładnie umieścić kształt na stronie sieci Web, wykonując następujące kroki:

  1. Zdecyduj, gdzie kształt ma być wyświetlany na stronie sieci Web, oraz rozmiar kształtu.
  2. Określ styl ='position:relative (lub względny)", aby określić punkt odniesienia.
  3. Użyj lewej i górnej, aby określić przesunięcie od punktu podstawowego.
  4. Użyj szerokości i wysokości , aby określić rozmiar pola zawierającego kształt.
  5. Użyj indeksu Z , aby określić kolejność warstw kształtu.