Essential JavaScript: graafisen kirjaston viisi suosituinta kirjastoa

Vasta äskettäin olemme voineet harkita JavaScriptiä graafisessa työssä, kuten kaavioiden piirtämisessä tai ehkä jopa HTML5-peleissä. Paremmat JavaScript-moottorit ja jatkuvasti parantuva selaintuki (erityisesti Chromen V8-moottorissa tehtävä työ) tekevät JavaScriptistä kannattavan vaihtoehdon paljon graafista työtä varten. Tänään tarkastelen viittä kirjastoa, jotka on suunniteltu auttamaan sinua tällä alueella, samoin kuin niitä, jotka helpottavat HTML5-kangaselementin käyttöä.

Jos olet uusi kankaalle -elementti, suosittelen, että tutustut siihen ennen kirjaston käyttöä sen helpottamiseksi. Tietäen kuinka tehdä jotain kovalla tavalla saa sinut kirjoittamaan paremman koodin, jopa kirjastoa käytettäessä. Remy Sharp kirjoitti hyvän esittely HTML5-tohtorista Tämän pitäisi auttaa sinua aloittamaan ja linkit muihin resursseihin, kun olet tutustunut esittelyyn.



ero luovan johtajan ja taiteellisen johtajan välillä

D3.js

Ensimmäinen on D3.js , joka kuvaa itseään '' JavaScript-kirjastoksi tietojen perusteella olevien asiakirjojen manipuloimiseksi ''. Jotkut esimerkit ovat erittäin vaikuttavia; alkaen a Yhdysvaltojen kartta yksityiskohtaiseen luettelomerkkejä . D3 on suunniteltu mahdollistamaan datavetoisten muunnosten tekeminen asiakirjaan. Sitä käytetään yleisesti tietojen visualisointiin ja paljon opetusohjelmia siitä on kirjoitettu. D3 ei ole nimenomaan graafinen kirjasto, vaan tarjoaa yksinkertaisesti työkalut muun muassa kaavioiden luomiseen. Alla olevassa esimerkissä on pinottu pylväsdiagrammi. Ei ole yllättävää, että D3: n ympärille on syntynyt kirjastoja helpottamaan kaavioiden luomista, joista suosituin on NVD3 , D3: sta riippuva kirjasto, jonka avulla monimutkaisten kaavioiden luominen on erittäin helppoa. Kehotan teitä kokeilemaan ensin piirtämistä D3: lla ennen kuin kokeilet kirjastoa, kuten NVD3. NVD3 on hieno, mutta kuvaajien tekeminen puhtaalla D3: lla mahdollistaa suuremman mukautuksen ja tietysti paremman hallinnan.



BonsaiJS

Seuraava on BonsaiJS , JS-grafiikkakirjasto, jossa on vaikuttavia demoja, kuten a toimiva Pong-peli ja interaktiivinen ympyräkaavio . Bonsai eroaa D3: sta, koska se ei toimi vuorovaikutuksessa HTML: n kanssa, kaikki tehdään JavaScriptin kautta. Mikä on myös hienoa Bonsaissa, on online-toimittaja , jonka avulla voit helposti leikkiä Bonsain kanssa ja nähdä tulokset heti. Vaikka D3: n syntaksit muistuttavat usein jotain, joka muistuttaa jQueryä vuorovaikutuksessa elementtien kanssa, Bonsain kanssa luot elementtejä JavaScriptin kautta, ja Bonsai lisää ne automaattisesti sivulle puolestasi. Sekä Bonsai että D3 ovat erittäin voimakkaita, mutta lähestyvät asioita hieman eri tavoin.



Raphael

Raphael on pieni kirjasto, joka on suunniteltu yksinkertaistamaan vektorigrafiikan käyttöä verkossa. Se sallii myös monimutkaiset kaaviot ja visualisoinnit ja toimii piirtämällä SVG-elementtejä. Yksi plus Raphaelille on, että sillä on parempi selaintuki, joka tukee IE6: ta ja uudempia, kun taas Bonsai ja D3 eivät tue Internet Explorerin vanhempia versioita. Yksi negatiivinen Raphaelille on kuitenkin se, että lähdekoodi päivitettiin viimeksi 11 kuukautta sitten, joten se on hieman vanhentunut. Raphael on edelleen erittäin kykenevä kirjasto, ja kannattaa ehdottomasti katsoa sitä. Yksi suosikkidemoistani on Ben Barnettin putkikartta , joka luo uudelleen kuuluisan Lontoon metrokartan Raphaelin kanssa, osoittaa todella kirjaston voiman (kuvakaappaus alla).



Three.js

Three.js on jotain hyvin erilaista kolmelle tähän mennessä keskustellulle kirjastolle. Three.js: ää käytetään 3D-grafiikan luomiseen, usein läpi WebGL . Se kykenee uskomattomiin asioihin, kuten tämä urheiluauto (kuvassa alla) mutta koska se on resurssiintensiivinen ja käyttää WebGL: ää, selaintuki on tällä hetkellä ilmeisesti rajallinen. Tarvitset hyvän 3D-grafiikan tuntemuksen, jotta voit työskennellä tehokkaasti Three.js: n kanssa. Siellä on kuitenkin hyviä opetusohjelmia, mukaan lukien a hyvä esittely kirjastoon. Three.js toteuttaa varjostimia, kameroita, animaatioita ja lataa enemmän.

EaselJS

Jos pidät kirjastosta, joka toimii enemmän kääreenä kankaas-elementin kanssa työskentelemisen kanssa, EaselJS voi olla enemmän kadulla, varsinkin jos haluat rakentaa pelejä. Se pystyy luodaan klassinen asteroidipeli tai jolloin käyttäjät voivat piirtää kankaalle . Easel mukana kattava API-dokumentaatio . EaselJS otti paljon inspiraatiota luokkanimiinsä Flashista, joten jos olet perehtynyt Flashiin, löydät Easelin entistäkin helpommin.

Mitä tulee johdantokursseihin, tämä video YouTubessa antaa hyvän johdannon ja siellä on myös linkit Easel-wikiin enemmän. Easel ei ole kuin D3 tai Bonsai - se on selvästi suunniteltu enemmän vuorovaikutusta ajatellen - pelit, vedä ja pudota -rajapinnat ja niin edelleen tietojen visualisoinnin sijaan. On myös syytä tarkistaa koko CreateJS-paketti , johon Easel kuuluu. Tämä sisältää TweenJS-kirjaston HTML5: n ja JavaScript-ominaisuuksien tweenointiin (tai animointiin), SoundJS: n äänen kanssa työskentelyyn JavaScript: ssä ja PreloadJS: n, kirjaston omaisuuden esilatauksen hallintaan. Yllä oleva kuvakaappaus näyttää Asteroidien EaselJS-version.

Oikean työkalun valitseminen

Koska JavaScript-kehittäjinä meillä on uusi toiminto, JavaScriptin käyttötapaukset kasvavat koko ajan, ja kehittäjät hyödyntävät tätä luomalla nämä kirjastot, kuten aiemmin mainitut viisi, helpottaakseen sitä. Jotkut näiden kirjastojen demoista, erityisesti ThreeJS, ovat ehdottomasti mielenrauhaa; ei ole niin kauan sitten, että mikään näistä ei ollut mahdollista.

kuinka tehdä toimistosta mukavampaa

Kuten muidenkin tämän 'Top JavaScript' -sarjan muiden artikkelien kohdalla, kehotan teitä kokeilemaan muutamia kirjastoja, ennen kuin valitset yhden sovelluksessasi käytettäväksi. Jokaisessa kirjastossa on joitain asioita, jotka se toimii hyvin, ja ehkä muutama heikko kohta, ja oikean valitseminen työhön on jotain, mitä sinun pitäisi viettää aikaa.