Použití místního prostoru souřadnic

Toto téma popisuje VML, což je funkce, která je zastaralá jako Windows Internet Explorer 9. Webové stránky a aplikace, které spoléhají na VML, by se měly migrovat do SVG nebo jiných široce podporovaných standardů.

Poznámka

Od prosince 2011 se toto téma archivovalo. V důsledku toho se už aktivně neudržuje. Další informace naleznete v tématu Archivovaný obsah. Informace, doporučení a pokyny týkající se aktuální verze aplikace Windows Internet Explorer naleznete v tématu Centrum pro vývojáře aplikace Internet Explorer.

 

Jak jste se dozvěděli, můžete určit šířku a výšku atributy stylu, abyste definovali velikost pole, ve kterém se bude vykreslovat obsah obrazce nebo skupiny. V tomto tématu vysvětlíme, co je místní souřadnicový prostor a jak se používá ve VML ke škálování obrazců.

Pokud jste byli požádáni, abyste na kus mřížkového papíru nakreslili jednostranný obdélník o dva palce, je první věc, kterou byste zjistili, kde začít (původní bod). Pak byste zjistili, jak namapovat jeden palce na buňky mřížkového papíru (souřadnice).

Podobně platí, že když se obsah obrazce nebo skupiny vykreslí uvnitř jeho pole obsahujícího na webové stránce, musí být definován původní bod a souřadnice. VML poskytuje místní souřadnicový prostor, který umožňuje každému obrazci nebo skupině definovat vlastní původní bod a souřadnici. Pokud nezadáte souřadnicový prostor, použije se výchozí prostor. Ve výchozím nastavení začátek je v levém horním rohu obsahujícího pole.

Například reprezentace VML pro červený ovál zobrazený níže neurčuje atributy vlastností coordsize a coordorigin. Proto se používá výchozí místní souřadnicový prostor. Velikost oválu je 100 bodů (šířka) o 75 bodů (výška). Velikost oválu můžete změnit zadáním jiné šířky nebo výšky, jak jste se dozvěděli v tématu Měřítko obrazců.

<v:oval style='width:100pt;height:75pt' fillcolor="red">
</v:oval>

Když se obrazec zkomplikuje nebo když chcete seskupit několik obrazců a zvětšovat je dohromady, měli byste použít funkci Místní souřadnicový prostor poskytovanou v jazyce VML.

Pro každý obrazec nebo skupinu můžete použít atributy vlastností coordsize a coordorigin k definování místního souřadnicového prostoru obrazce nebo skupiny. Atribut coordsize určuje počet jednotek ve směru šířky a výšky obsahujícího rámečku. Atribut coordorigin definuje souřadnici v levém horním rohu obsahového pole. Všechny informace související s polohou (například šířka, výška, vlevo, nahoře, cesta atd.) se vyjadřují z hlediska jednotky v místním souřadnicovém prostoru.

Například, jak je znázorněno v následující reprezentaci VML, width: 100pt; height: 100pt; definuje velikost pole obsahujícího obrazec na 100 bodů x 100 bodů.

<v:shape style='position:relative;left:10pt;top:5pt; width:100pt; height:100pt;'
coordsize="21600,21600" path="m10800,0l0,10800,10800,21600,21600,10800xe"
fillcolor="red" strokecolor="blue" strokeweight="2pt">
</v:shape>

• coordsize="21600,21600" definuje velikost místního souřadnicového prostoru obrazce na 21600 jednotek krát 21600 jednotek. Proto jedna jednotka v místním souřadnicovém prostoru je ekvivalentní 1/216 bodu.
• path="m10800,0l0,10800,10800,21600,21600,10800xe" definuje obrys obrazce jako tvar kosočtverce. Jak jsme se dozvěděli, všechny informace související s polohou (například šířka, výška, vlevo, horní, cesta atd.) se vyjadřují z hlediska jednotky v místním souřadnicovém prostoru. Proto 10800 v <path> znamená 10800 jednotek, což odpovídá 50 bodům.

Pokud chcete změnit velikost tohoto kosočtverce, jednoduše zadejte jinou šířku nebo výšku – to je to; v <path>nemusíte měnit žádnou hodnotu. Pokud byste u tohoto složitého obrazce nepoužili funkci Místní souřadnicový prostor, museli byste změnit každou hodnotu v <path> pokaždé, když chcete změnit velikost.

Tvar kosočtverce můžete například změnit tak, že jednoduše zadáte jinou šířku nebo výšku, jak je znázorněno v následujícím znázornění VML:

<v:shape style='position:relative;left:10pt;top:5pt;width:200pt; height:200pt;'
coordsize="21600,21600" path="m10800,0l0,10800,10800,21600,21600,10800xe"
fillcolor="red" strokecolor="blue" strokeweight="2pt">
</v:shape>

V elementu <group> můžete také použít místní souřadnicový prostor, aby se obsah všech obrazců ve skupině škáloval podle stejné souřadnice. Pokaždé, když chcete škálovat nebo přesunout skupinu obrazců, jednoduše změňte šířku a výšku nebo nastavení coordsize a coordorigin skupiny.

Například v následujícím vyjádření VML <v:group style='... width:200pt;height:200pt;'> určuje velikost obsahujícího pole pro skupinu na 200 bodů krát 200 bodů.

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

• coordsize="1000,1000" definuje velikost místního souřadnicového prostoru pro skupinu na 1 000 jednotek krát 1 000 jednotek. Proto je 1 jednotka v místním souřadnicovém prostoru ekvivalentní 1/5 bodu.
• coordorigin="-500,-500" definuje levý horní roh ohraničujícího boxu jako "-500, -500". Proto souřadnicový systém uvnitř obsahujícího rámečku se pohybuje od -500 do 500 podél osy x a -500 až 500 podél osy y. Jinými slovy, střed obsahujícího pole je "0, 0".
• <v:oval style='... width:400;height:300;'> definuje velikost boxu pro červený ovál o šířce 400 jednotek a výšce 300 jednotek. Vzhledem k tomu, že jedna jednotka v místním souřadnicovém prostoru je ekvivalentní 1/5 bodu, velikost obsahujícího rámečku pro červený ovál je 80 bodů (šířka) o 60 bodů (výška).

Podobně velikost rámečku obsahujícího zelený zaoblený obdélník je 50 bodů (šířka) na 40 bodů (výška).

Pokud chcete změnit velikost jak červeného oválu, tak zeleného zaobleného obdélníku, jednoduše změňte <v:group style='... width:200pt;height:200pt;'>. To je to – nemusíte měnit velikost dvou obrazců jednotlivě.

Pokud například změníte <v:group style='... width:200pt;height:200pt;'> na <v:group style='... width:300pt;height:300pt;'>, obrazce se zvětší, jak je znázorněno na následujícím obrázku:

Také byste si všimli, že obrazce jsou umístěny odlišně. Je to proto, že obrazce jsou nakresleny od "0, 0", které se nachází uprostřed obsahové krabice. Protože zvětšíte obsahující rámeček, střed tohoto rámečku se také posune.

Pokud změníte coordorigin="-500,-500" na coordorigin="0,0", jak je znázorněno na následujícím obrázku, všimnete si, že červené ovál i zelené zaokrouhlování se posunou nahoru na nové místo. Důvodem je to, že "0, 0" se nyní nachází v levém horním rohu obsahující krabice.

Je také důležité si uvědomit, že obsahující rámec neustanovuje oblast oříznutí. Grafika může být vykreslena mimo hranice obsahujícího rámečku. Obsahující rámeček slouží pouze k namapování místního souřadnicového prostoru na stránky.

Další informace o tomto prvku naleznete ve specifikaci VML .