GraphicsJS Umožňuje vytvoriť akúkoľvek webovú grafiku, ktorú si dokážete predstaviť

Rozhrania API pre vlastné rozhranie JavaScript sú budúcnosť webu. pohyb otvoreného zdroja spolu s SVG grafiku otvorili možnosti vývojárov webu.

GraphicsJS je bezplatná open source knižnica a JS API pre vytváranie vlastnej grafiky vo webových prehliadačoch. Môže sa použiť ako vizualizačný nástroj pre grafovanie dát, alebo môže byť použitý pre výrobu skvelých vecí len na to, aby si to predstavil.

Na domovskej stránke nájdete a veľká časť dema vytvorené pomocou aplikácie GraphicsJS. A tieto príklady len poškriabajú povrch toho, čo je možné.

Knižnica používa vlastný virtuálny DOM čo je abstrakcia DOM prehliadača. To je trochu podobne ako virtuálny DOM React a používa sa to podobným spôsobom.

Keďže táto knižnica používa klon DOM, taktiež potrebuje skutočné prvky HTML na prácu. To je dôvod, prečo to používa SVG / VML namiesto vložených objektov v plátne HTML5.

Tento grafický engine bol pôvodne zabudované do knižnice AnyChart. Odtiaľ to bolo Tweaked a open-source ako vlastný JS API.

GraphicsJS podporuje všetky hlavné prehliadače, dokonca aj z obdobia IE6 a Chrome 1.0.

Všetok zdrojový kód je k dispozícii v GitHub repo, kde si môžete stiahnuť kópiu a poke okolo, ak máte čas. Ale myslím, že najlepší spôsob, ako sa naučiť, je ponoriť sa do hlavy.

Môžete prechádzať cez Dokumenty API ale zvyčajne považujem tieto dokumenty za nadbytočné. Dokumenty sa najlepšie používajú, keď potrebujete nájsť konkrétnu metódu alebo volanie rozhrania API odkazovať.

Ak ste práve začali, môžete navštívte ihrisko hosťované na webových stránkach AnyChart. Toto je pekné miesto na nájdenie vzorky pracovných kódov rozložiť syntax.

Alebo, ak naozaj chcete začať štvorcový jeden potom GraphicsJS sprievodca môžem pomôcť. Toto je skôr ako “úradné” dokumentáciu, takže si držíš ruku za plynulejšou krivkou učenia v porovnaní s dokumentmi API.

Či tak alebo onak, mám rád, že GraphicsJS bol otvorený zdroj a prepustený do vývojárskej komunity. Je to ďaleko od dokonalej knižnice, ale je to jedno z najlepších, ktoré máme pre vytváranie vlastnej grafiky SVG od nuly.

A aby ste sa otáčali, nižšie môžete vidieť vzorku toho, čo môžete vytvoriť s programom Graphics.js.