Kouzla SVG a VML – použití JavaScriptí knihovny jMGFX

Dneska bych se chtěl podívat na to, jak tuto knihovnu použít pro kreslení základních grafických prvků. Většina se dá vyčíst z dokumentace knihovny, ale příklady jsou přeci jen víceříkající.

Základní představení knihovny

jMGFX

jMGFX je objekt s vlastnostmi a také k němu tak přistupujeme. Veškeré nastavení a zadávání příkazů se děje výhradně (až na jednu výjimku, viz níže) přes tento objekt. Pojďme se ale zaměřit na tvorbu vektorové grafiky pomocí této knihovny.

Postupně si projdeme funkce pro tvorbu jednotlivých grafických prvků, které tato knihovna podporuje, ale také filtrů, díky kterým můžeme grafickým prvkům vdechnout chytlavější vzhled.

init(insertElementParent,width,height)

Nejprve musíme nainicializovat element, se kterým budeme pracovat, a do kterého se budou kreslené prvky vkládat.

• insertElementParent – rodičovský prvek (element), do kterého budeme vkládat kreslené prvky
• width – šířka prvku (elementu), pokud není zadána, bere se původní velikost (tj. co je na prvku nastavé např. pomocí css)
• height – výška prvku (elementu), pokud není zadána, bere se původní velikost (tj. co je na prvku nastavé např. pomocí css)

line(fromXAxis, fromYAxis, toXAxis, toYAxis, options)

Jak už název funkce napovídá, jedná se o vykreslení přímky z bodu [fromXAxis,fromYAxis] do bodu [toXAxis,toYAxis].

příklad: line

polyline(coordinates,options)

Pomocí této funkce můžeme vykreslit křivku na zadaných souřadnicích (coordinates).

příklad: polyline

polygon(coordinates,options)

Podobné, jako předchozí funkce, nicméně tento vykreslovaný objekt musí být vždy uzavřený, což znamená, že vykreslujeme mnohoúhelník.

příklad: polygon

rect(x, y, width, height, options)

Vykreslení čtverce, kde parametry funkce značí, kde čtverec začíná(x), kde končí(y), jakou má šířku(width) a jakou výšku(height).

příklad: rect

circle(left, top, diameter, options)

Funkce nám vykreslí kruh, kde left je hodnota označující, jakou má kruh vzdálenost od levé strany, top je hodnota vzdálenosti od horní strany elementu, do kterého vkládáme a nakonec diameter je průměr vykreslovaného kruhu.

příklad: circle

ellipse(left, top, width, height, options)

Pokud budeme chtít vykreslit elipsu, budeme potřebovat hodnoty, které budou udávat vzdálenost od levé strany(left), vzdálenost od horní strany(top), šířku elipsy(width) a její výšku(height).

příklad: ellipse

path(map,options)

Path umožňuje kombinovat ostatní prvky pomocí Klíčových slov a souřadnic. Aktuálně je v knihovně nastaveno pouze m, l, z, piec. Pro bližší specifikaci doporučuji použít dokumentaci.

příklad: path

filter

Objekt filter obsahuje tři funkce pro gradient lineární, radiální gradient a průhlednost. Filtr se definuje vždy před použitím a k prvku se přiřazuje pomocí id Klíčovým slovem v options: filter.

filter.gradient(id,colors,rotate)

Pokud chceme na objektu gradient, vydefinujeme ho pomocí colors – což je objekt tvořený klíčem(procenta kde má dojít k prolnutí) a vlastnostmi(hexa kod barvy).

příklad: filter gradient

filter.rgradient(id,colors)

Radiální gradient je definován stejně jako gradient lineární.

příklad: filter rgradient

filter.opacity(id,opacity)

Průhlednost je jednoznačně definovaná škálou 1 až 0, kde 1 není žádná průhlednost a 0 opak. Pokud bychom tedy chtěli nastavit průhlednost na 80% zadáme 0.8.

příklad: filter opacity

Jde tedy vidět, že SVG (VML) je velmi přínosný nástroj, a proto se zřejmě W3C rozhodlo, že ho umožní jako markup language do HTML 5.

Ostatní funkce

Knihovna obsahuje i ostatní funkce, které jsou využívány jednotlivými funkcemi a nebo knihovnami, které jsou na této knihovně závislé.

Jedná se o funkce:

• trim – odmazání prázdných míst (jako jediná funkce není přiřazena do objektu jMGFX, ale přímo ke stringu)
• mergeObj() - spojení dvou objektů v jeden výsledný
• checkConsoleFunction() - v mém článku Debugging v javascriptu aneb alert() není to pravé jsme si ukázali, jak lze využívat konzoli ve firebugu, tato funkce objekt rozšiřuje
• css() - úprava css vlastností prvku
• mRound() - zaokrouhlení na určitý počet desetinných míst
• windowLoad() - provedení po načtení stránky
• getEleByClass() - vrací elementy s danou classou
• addClassName() - přidání classy na prvek
• removeClassName() - odebrání classy z prvku
• hasClassName() - vrací, pokud objekt má danou classu
• autoId() - automatické vytvoření ID

Více o funkcích jejich použití a příklady se dozvíte v dokumentaci.

Závěr

Toto je tedy hrubý výpis toho, jak lze knihovnu použít, pro lepší přehlednost funkčnosti knihovny a zadávání parametrů, jako např. options, navštivte dokumentaci na stránkách jmajak.cz.

Příště se podíváme na vlastnosti knihovny jMGraphs, která díky knihovně jMGFX, kterou jsme si dneska představili, umožňuje vytváření základních grafů a práci s nimi.

Další články autora:

2