DirectAnimation, 2.část: Structured Graphics - Builder.cz - Informacni server o programovani

Navigace:  » Úvodní stránka  » Rubriky  » JavaScript  

29. června 2001, 00.00 | Po teoretickém úvodu do technologie DirectAnimation se dnes již podíváme na konkrétní prvek - Structured Graphics. Ten umožňuje pomocí HTML kódu vytvářet na stránce vektorové obrázky a poté je velmi zajímavě ovládat pomocí skriptů.

Jaké jsou výhody Structured Graphics?
Mezi hlavní výhody Structured Graphics patří především minimální velikost přenášených dat směrem k uživateli. Odesílají se totiž pouze jakési instrukce k vykreslení obrázku a o samotné vykreslení se potom již postará Internet Explorer. S obrázky Structured Graphics se dá také velmi jednoduše manipulovat pomocí skriptů - zmenšovat, zvětšovat, překreslovat, posouvat, otáčet... Hlavně možnost otočení obrázku o libovolný počet stupňů pomocí klientského skriptu je v oblasti tvorby WWW stránek výjimečná.

Začínáme se Structured Graphics
Nejdříve se podívejte na ukázku, na ní si všechno vysvětlíme:

<OBJECT ID="da" STYLE="width:202px; height:202px;" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <PARAM NAME="Line0001" VALUE="SetLineColor(255,155,150)"> <PARAM NAME="Line0002" VALUE="SetLineStyle(1,2)"> <PARAM NAME="Line0003" VALUE="SetFillStyle(12)"> <PARAM NAME="Line0004" VALUE="SetFillColor(255,155,150,0,0,0)"> <PARAM NAME="Line0005" VALUE="Polygon(3,50,30,30,200,200,180,10)"> <PARAM NAME="ExtentTop" VALUE=0> <PARAM NAME="ExtentLeft" VALUE=0> </OBJECT>

Prvky Structured Graphics vkládáme na stránku pomocí tagu OBJECT. Pro ovládání ve skriptech jim dáváme jméno pomocí parametru ID. Jak už jsem říkal minule, každý prvek DirectAnimation má své CLASSID - šestnáctkové číslo říkající prohlížeči, který prvek, nenáležící do HTML, má použít. Pomocí stylů můžeme nastavit šířku a výšku celého prvku. Pokud ji specifikujeme, tak jednotlivé útvary (celý prvek je tvořen geometrickými útvary - ještě se k tomu dostaneme) prvku přesahující nastavené rozměry jednoduše nebudou vidět.

Nyní se již můžeme podívat na samotné vytvoření obrázku. Ten vytváříme pomocí metod. Ty můžeme použít v JavaScriptu pomocí zápisu jméno_prvku.metoda(parametry); a také přímo v HTML - tak jsme to udělali v našem příkladě. Každou metodu aplikujeme pomocí jednoho tagu PARAM. V jeho parametru NAME specifikujeme číslo řádku (metody jsou aplikovány popořadě podle řádků) a v parametru VALUE potom samotnou metodu i s jejími parametry. Zde si je třeba dát pozor na to, že parametr NAME musí mít vždy osmi-místnou hodnotu tvořenou tak, jak to vidíte v příkladě.

Jak to tedy funguje?
Celý prvek je tvořen geometrickými útvary. Ty mají různé vlastnosti, které ovlivňují jejich vykreslování. Jsou to například barva rámečku (nastavujeme ji pomocí metody SetLineColor), styl, kterým je rámeček vykreslen (metoda SetLineStyle), styl výplně (metoda SetFillStyle) nebo barva výplně (metoda SetFillColor). Tyto vlastnosti se specifikují dříve než samotný útvar (můžete si toho všimnout i v našem příkladě, kde voláme metodu Polygon pro vykreslení n-úhelníku až jako poslední). Prvek může být tvořen libovolným počtem takovýchto útvarů. K jednotlivým metodám se vrátíme v příštím díle našeho seriálu.

Parametry ExtentTop a ExtentLeft
V našem příkladě jsme navíc pomocí tagu PARAM aplikovali ještě dva parametry - ExtentTop a ExtentLeft. Ty specifikují umístění všech útvarů tvořících daný prvek vzhledem k levému hornímu rohu celého prvku (specifikovaného pomocí tagu OBJECT). Pokud nejsou tyto parametry zadány, jsou použity hodnoty náležící prostředku prvku (v našem případě by to byly hodnoty 101px). Oba tyto parametry se dají nastavit pouze v HTML.

Závěrem
V dnešním článku jsme si ukázali základní práci s prvkem Structured Graphics. Příště si představíme jednotlivé metody a řekneme si něco o programu na vytváření prvků Structured Graphics.