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

Rubriky
Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



JavaScript

DirectAnimation, 3.část: Structured Graphics podruhé

19. července 2001, 00.00 | V minulém článku jsme si představili prvek Structured Graphics. Dnes si popíšeme metody, kterými se prvek tvoří a v závěru článku si budete moct sami vyzkoušet vytvoření takového prvku.

V minulém článku jsme si představili prvek Structured Graphics. Dnes si popíšeme metody, kterými se prvek tvoří a v závěru článku si budete moct sami vyzkoušet vytvoření takového prvku.

Metody pro vykreslování prvku Structured Graphics

Začneme metodami, pomocí kterých se vytváří nejrůznější útvary. Tyto metody se používají až po metodách, které tento útvar formátují:

Arc(x, y, šířka, výška, počáteční úhel, úhel oblouku, rotace) Vytvoří oblouk, jehož střed je udáván souřadnicemi x a y. Tento oblouk je umístěn uvnitř pomyslného obdelníka o šířce a výšce a ovládá se pomocí počátečního úhlu a úhlu oblouku. Pokud chceme útvar otočit, můžeme k tomu použít parametr rotace (všechny úhly se udávají ve stupních).
FillSpline(počet bodů, akce1, x1, y1, akce2, x2, y2..., rotace) Vytvoří křivku tvořenou počtem bodů. Pro každý bod musíme definovat tři parametry - x a y udávají souřadnice bodu a akce udává, co se má v daném bodu s křivkou udělat (0 pro nespojení s předchozím bodem, 1 pro spojení s předchozím bodem, 2 pro spojení s předchozím bodem pomocí "bezier line", 3 pro spojení s prvním bodem a 4 pro spojení s prvním bodem pomocí "bezier line"). Bohužel se mi nepodařilo přijít na to, co znamená bezier line - pokud budete úspěšnější, můžete se zmínit v diskusi pod článkem. Úplně poslední parametr je rotace a můžeme pomocí něj celý útvar otočit.
Oval(x, y, šířka, výška, rotace) Vytvoří elipsu uprostřed pomyslného obdelníka. Tento obdelník je definován pomocí souřadnic x, y a pomocí šířky a výšky. Celý útvar je možné otočit pomocí parametru rotace.
Pie(x, y, šířka, výška, počáteční úhel, úhel oblouku, rotace) Tato metoda je totožná s metodou Arc s jediným rozdílem - oblouky vytvořené metodou Pie lze vyplňovat pomocí metody SetFillColor.
Polygon(počet bodů, x1, y1, x2, y2..., rotace ) Vytvoří uzavřený n-úhelník o počtu bodů, jejich souřadnice následují za sebou tak, jak vidíte vlevo. Pomocí parametru rotace je možné útvar otočit.
PolyLine(počet bodů, x1, y1, x2, y2..., rotace ) Vytvoří otevřený nevyplněný n-úhelník o počtu bodů, jejich souřadnice následují za sebou tak, jak vidíte vlevo. Pomocí parametru rotace je možné útvar otočit.
PolySpline(počet bodů, akce1, x1, y1, akce2, x2, y2..., rotace) Tato metoda je totožná s metodou FillSpline s jediným rozdílem - oblouky vytvořené metodou PolySpline jsou uzavřené útvary tvořené pomocí křivek a lze je vyplňovat pomocí metody SetFillColor.
Rect(x, y, šířka, výška, rotace) Vytvoří pravoúhlý útvar definovaný souřadnicemi levého horního rohu x, y, šířkou a výškou. Útvar je možné otočit pomocí parametru rotace.
RoundRect(x, y, šířka, výška, šířka oblouku, výška oblouku, rotace) Vytvoří pravoúhlý útvar se zakulacenými rohy definovaný souřadnicemi levého horního rohu x, y, šířkou a výškou. V rozích je elipsa definovaná šířkou oblouku a výškou oblouku. Útvar je možné otočit pomocí parametru rotace.
SetGradientShape(počet bodů, x0, y0, x1, y1...) Specifikuje útvar vyplněný barevným přechodem (gradientem). Tvar tohoto útvaru je specifikován počtem bodů a jejich souřadnicemi.
Text(string, x, y, rotace) Vytvoří text specifikovaný parametrem string (musí se uvést v uvozovkách či apostrofech!) na souřadnicích x, y. Útvar je možné otočit pomocí parametru rotace.

Nyní si představíme metody, s jejichž pomocí je možné útvary formátovat. Tyto metody se definují ještě před útvarem:

SetFillColor(intenzita červené v barvě popředí, intenzita zelené v barvě popředí, intenzita modré v barvě popředí, intenzita červené v barvě pozadí, intenzita zelené v barvě pozadí, intenzita modré v barvě pozadí) Definuje barvu výplně útvaru. Pokud je třeba uvést dvě barvy (např. u útvaru vytvořeného pomocí metody SetGradientShape), uvádějí se v tomto pořadí. Barvy se udávají v hodnotách 0 - 255.
SetFillStyle(styl) Definuje styl výplně útvaru. Hodnoty 0 (bez výplně), 1 (plná výplň), 3 (vodorovné šrafování), 4 (svislé šrafování), 5 (šikmé šrafování), 6 (obrácené šikmé šrafování), 7 (křížové šrafování), 8 (šikmé křížové šrafování), 9 (vodorovný přechod), 10 (svislý přechod), 11 (kruhový přechod), 12 (lineární přechod), 13 (pravoúhelníkový přechod), 14 (tvarovaný přechod).
SetFont(jméno fontu, velikost písma, tučnost písma, kurzíva, podtržení, přeškrtnutí) Udává font k vykreslení textu pomocí metody Text. Jméno fontu se musí uvést v uvozovkách či apostrofech. Velikost písma se udává v bodech a pokud je hodnota záporná, vykreslí se písmo pozpátku a vzhůru nohama. Tučnost písma se udává od 0 do 700, kde 300 je normální a 700 maximální tučnost. Poslední tři parametry mají hodnotu True (pro ano) nebo False (pro ne).
SetHatchFill(průhlednost) Tuto metodu lze použít jen pokud má styl výplně hodnotu 3 nebo 8. Pokud je True, pak je výplň průhledná, pokud je False, pak není výplň průhledná.
SetLineColor(intenzita červené, intenzita zelené, intenzita modré) Udává barvu rámečku kolem útvaru, hodnoty 0 - 255.
SetLineStyle(styl,šířka) Udává styl a šířku rámečku kolem prvku. Styl může být 0 (žádný rámeček), 1 (normální rámeček) a 2 (čárkovaný rámeček).
SetTextureFill(x, y, cesta k obrázku, typ) Použije jako výplň útvaru obrázek. V prvních dvou parametrech uvádíme souřadnice útvaru, který má být vyplněn. Jako typ můžeme uvést buď 0 (aby se obrázek podle potřeby roztáhl) nebo 1 (pro dlaždicovitou výplň).

Nyní bych vám rád popsal ještě jednu zajímavou metodu. Je to metoda SourceURL a jako její parametr se uvádí cesta k souboru se strukturovanou grafikou. Takový soubor je tvořen posloupností metod, jaké jsme si teď popsali. Jednoduché vytváření těchto souborů je možné pomocí nástroje Windows Metafile Converter, který si můžete stáhnout ze stránek Microsoftu. Tento program umí konvertovat soubory ve formátu WMF na textové soubory Structured Graphics. Soubory WMF je možné vytvářet např. v programech CorelDRAW!, Adobe Illustrator nebo Microsoft PowerPoint.

Metody pro manipulaci s prvkem Structured Graphics

Až do teď jsme si popisovali možnosti, jak lze strukturovanou grafiku vytvářet. Hlavní výhoda této technologie ale spočívá ve snadné manipulaci s touto grafikou. To je možné pomocí metod, které si nyní popíšeme. Všechny tyto metody je z logických důvodů možno používat pouze ve skriptech:

Clear() Odstraní z prvku všechny útvary.
Rotate(x,y,z) Otočí prvkem kolem osy x, y a z. Jako parametry zadáváme nové hodnoty umístění v těchto osách (ve stupních od 0 do 360).
Scale(x,y,z) Zvětší či zmenší prvek v příslušné ose. Příklad: pokud zadáme 0.5, zmenší se prvek v příslušné ose na 50% své původní velikosti; pokud zadáme 2, zvětší se prvek v příslušné ose na 200% své původní velikosti.
SetIdentity() Uvede prvek do původního stavu (jako po nahrání stránky).
Translate(x,y,z) Posune prvek na nové souřadnice.

Nyní, když už znáte všechny potřebné náležitosti pro tvorbu strukturované grafiky, jsem si pro vás připravil takový editor - nahoře můžete zadávat jednotlivé metody s jejich parametry a vpravo dole se podle toho bude měnit prvek Structured Graphics, zatímco kompletní zdrojový kód se bude vypisovat vedle vlevo. A tím se s vámi také pro dnešek loučím. V příštím díle našeho seriálu se podíváme na prvek Sprite, který umožňuje ovládat animované obrázky ve formátu GIF.

<OBJECT ID="DA" STYLE="width:202px; height:202px;" CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
<PARAM NAME="ExtentTop" VALUE=0>
<PARAM NAME="ExtentLeft" VALUE=0>
</OBJECT>

Obsah seriálu (více o seriálu):

Tématické zařazení:

 » Rubriky  » JavaScript  

 » Rubriky  » Web  

Poslat článek Diskuse (0) Tisk Přečteno: 1989x

www.builder.cz/rubriky/javascript/directanimation-3-cast-structured-graphics-podruhe-155831cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Krátké zprávy

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: