Innhold
Bare nylig har vi kunnet vurdere JavaScript for grafisk arbeid, for eksempel å tegne diagrammer eller kanskje til og med HTML5-spill. Bedre JavaScript-motorer og stadig forbedret nettleserstøtte (spesielt arbeidet som gjøres i Chrome V8-motor) gjør JavaScript til et levedyktig alternativ for mye grafisk arbeid. I dag vil jeg se på fem biblioteker der ute som er designet for å hjelpe deg i dette området, så vel som de som gjør det lettere å jobbe med HTML5-lerretselementet.
Hvis du ikke er kjent med lerretelementet, anbefaler jeg at du blir kjent med det før du bruker et bibliotek for å gjøre det lettere. Å vite hvordan du gjør noe på den harde måten vil få deg til å skrive bedre kode, selv når du bruker et bibliotek. Remy Sharp skrev en god introduksjon på HTML5 Doctor som burde komme i gang, og lenker til flere ressurser når du har jobbet gjennom introduksjonen.
D3.js
Den første er D3.js, som beskriver seg selv som et "JavaScript-bibliotek for å manipulere dokumenter basert på data". Noen av eksemplene er veldig imponerende; fra et kart over USA til detaljerte punkttegn. D3 er designet slik at du kan bruke datadrevne transformasjoner til et dokument. Det brukes ofte til datavisualiseringer, og det er skrevet mange opplæringsprogrammer om det. D3 er ikke spesifikt et grafbibliotek, men gir deg bare verktøyene for å lage grafer, blant annet. Eksemplet nedenfor viser et stablet søylediagram.Ikke overraskende har biblioteker vokst opp rundt D3 for å gjøre det lettere å lage grafer, hvorav den mest populære er NVD3, et bibliotek som er avhengig av D3 som gjør det veldig enkelt å lage komplekse grafer. Jeg vil oppfordre deg til å først prøve å tegne graf med D3 før du prøver et bibliotek som NVD3. NVD3 er flott, men å gjøre grafer med ren D3 tillater større grad av tilpasning og selvfølgelig mer kontroll.
BonsaiJS
Deretter er BonsaiJS, et JS-grafikkbibliotek som har imponerende demoer som et fungerende Pong-spill og et interaktivt sektordiagram. Bonsai er annerledes enn D3 ved at det ikke fungerer ved å samhandle med HTML, det hele gjøres via JavaScript. Det som også er bra med Bonsai er redaktøren på nettet, som lar deg enkelt leke med Bonsai og umiddelbart se resultatene. Mens D3s syntaks ofte vil ligne noe som ligner på jQuery når det gjelder samhandling med elementer, oppretter du med Bonsai elementer gjennom JavaScript, og Bonsai legger dem automatisk til siden for deg. Både Bonsai og D3 er veldig kraftige, men nærmer seg ting på litt forskjellige måter.
Raphael
Raphael er et lite bibliotek designet for å forenkle arbeidet med vektorgrafikk på nettet. Det gir også mulighet for komplekse diagrammer og visualiseringer og arbeider ved å tegne SVG-elementer. Et pluss for Raphael er at den har bedre nettleserstøtte, som støtter IE6 og nyere, mens Bonsai og D3 ikke støtter eldre versjoner av Internet Explorer. Et negativt for Raphael er imidlertid at kildekoden ble sist oppdatert for 11 måneder siden, så den er litt utdatert. Raphael er fortsatt et veldig dyktig bibliotek og er absolutt verdt å se over. En av favorittdemoene mine er Ben Barnett’s Tube Map, som gjenskaper det berømte London Underground tube-kartet med Raphael, med virkelig demonstrerer kraften til biblioteket (skjermbilde nedenfor).
Three.js
Three.js er noe helt annet enn de tre bibliotekene jeg har diskutert så langt. Three.js brukes til å lage 3D-grafikk, ofte gjennom WebGL. Den er i stand til utrolige ting, for eksempel denne sportsbilen (bildet nedenfor), men siden den er ressurskrevende og bruker WebGL, er nettleserstøtten åpenbart begrenset akkurat nå. Du trenger god kunnskap om 3D-grafikk for å fungere effektivt med Three.js. Imidlertid er det gode opplæringer der ute, inkludert en god introduksjon til biblioteket. Three.js implementerer shaders, kameraer, animasjoner og mye mer.
EaselJS
Hvis du er ute etter et bibliotek som fungerer mer som et omslag rundt å jobbe med lerretelementet, kan EaselJS være mer oppe i gaten din, spesielt hvis du vil bygge noen spill. Det er i stand til å gjenskape det klassiske Asteroids-spillet eller la brukerne tegne på et lerret. Easel kommer med omfattende API-dokumentasjon. EaselJS hentet mye inspirasjon til klassens navn fra Flash, så hvis du er kjent med Flash, vil du finne Easel enda enklere å hente.
Når det gjelder innledende veiledninger, gir denne videoen på YouTube en god introduksjon, og det er også lenker på Easel-wiki til mer. Easel er ikke som D3 eller Bonsai - det er tydelig designet med tanke på mer interaksjon - spill, dra og slipp-grensesnitt, og så videre, i stedet for datavisualisering. Det er også verdt å sjekke ut hele CreateJS-pakken, som Easel tilhører. Dette inkluderer TweenJS, et bibliotek for å interpolere (eller animere) HTML5- og JavaScript-egenskaper, SoundJS for å jobbe med lyd i JavaScript og PreloadJS, et bibliotek for å administrere forhåndslastingen av eiendeler. Skjermbildet over viser EaselJS-versjonen av asteroider.
Velge riktig verktøy
Med den nye funksjonaliteten som er tilgjengelig for oss som JavaScript-utviklere, utvides brukssakene for JavaScript hele tiden, og utviklere utnytter dette ved å opprette disse bibliotekene, slik som de fem nevnte tidligere, for å gjøre det enda enklere. Noen av demoene til disse bibliotekene, særlig ThreeJS, er absolutt oppmerksomme; det er ikke så lenge siden at noe av dette var mulig.
Som med de andre artiklene i denne "Top JavaScript" -serien, oppfordrer jeg deg til å prøve noen biblioteker før du setter deg på en som skal brukes til applikasjonen din. Hvert bibliotek har noen ting det gjør bra, og kanskje et par svake punkter, og å velge den rette for jobben er noe du bør bruke tid på.
