Sisältö
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 kanvas-elementti on sinulle uusi, suosittelen, että tutustut siihen ennen kirjaston käyttöä sen helpottamiseksi. Tietäen kuinka tehdä jotain kovalla tavalla, kirjoitat paremman koodin, jopa kirjastoa käytettäessä. Remy Sharp kirjoitti hyvän johdannon HTML5 Doctoriin, jonka pitäisi auttaa sinua aloittamaan, ja linkit muihin resursseihin, kun olet tutustunut esittelyyn.
D3.js
Ensimmäinen on D3.js, joka kuvaa itseään "JavaScript-kirjastoksi dataan perustuvien asiakirjojen manipuloimiseksi". Jotkut esimerkit ovat erittäin vaikuttavia; Yhdysvaltojen kartasta yksityiskohtaisiin luettelokaavioihin. D3 on suunniteltu mahdollistamaan dataan perustuvien muunnosten tekeminen asiakirjaan. Sitä käytetään yleisesti tietojen visualisointiin, ja siitä on kirjoitettu paljon opetusohjelmia. 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 sinua 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 toimiva Pong-peli ja interaktiivinen ympyräkaavio. Bonsai eroaa D3: sta, koska se ei toimi vuorovaikutuksessa HTML: n kanssa, vaan kaikki tehdään JavaScriptin kautta. Mikä on hienoa Bonsaissa, on myös online-editori, 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 avulla, 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 mahdollistaa 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 Tube Map, joka luo uudelleen kuuluisan Lontoon maanalaisen putkikartan Raphaelin kanssa ja 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 WebGL: n kautta. Se pystyy uskomattomiin asioihin, kuten tämä urheiluauto (alla oleva kuva), mutta koska se on resursseja kuluttava 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 hyvä johdatus kirjastoon. Three.js toteuttaa varjostimia, kameroita, animaatioita ja lataa enemmän.
EaselJS
Jos pidät kirjastosta, joka toimii enemmän kääreenä kangaselementin kanssa työskentelyssä, EaselJS saattaa olla enemmän kadulla, varsinkin jos haluat rakentaa joitain pelejä. Se pystyy luomaan klassisen Asteroids-pelin tai antamaan käyttäjien piirtää kankaalle. Easelin mukana tulee kattava API-dokumentaatio. EaselJS otti paljon inspiraatiota luokkanimiinsä Flashista, joten jos olet perehtynyt Flashiin, löydät Easelin entistäkin helpommin.
Johdanto-oppaiden osalta tämä YouTube-video antaa hyvän johdannon, ja Easel-wikissä on linkkejä muuhun. Easel ei ole kuin D3 tai Bonsai - se on selvästi suunniteltu enemmän vuorovaikutusta ajatellen - pelit, vedä ja pudota -liitännät ja niin edelleen kuin tietojen visualisointi. 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 JavaScriptissä 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 laajenevat 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 niin kauan sitten mikään näistä ei ollut mahdollista.
Kuten muidenkin tämän "Suosituimmat JavaScript" -sarjan 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ä pari heikkoa kohtaa, ja oikean valitseminen työhön on jotain, jonka pitäisi viettää aikaa.
