Væsentlig JavaScript: de fem bedste grafiske biblioteker

Først for nylig har vi været i stand til at overveje JavaScript til grafisk arbejde, såsom at tegne diagrammer eller måske endda HTML5-spil. Bedre JavaScript-motorer og stadigt forbedret browsersupport (især arbejdet i Chromes V8-motor) gør JavaScript til en levedygtig mulighed for meget grafisk arbejde. I dag vil jeg se på fem biblioteker derude, der er designet til at hjælpe dig i dette område, såvel som dem, der også gør det lettere at arbejde med HTML5-lærredselementet.

Hvis du er ny på lærredselementet, anbefaler jeg stærkt, at du bliver fortrolig med det, før du bruger et bibliotek for at gøre det lettere. At vide, hvordan man gør noget på den hårde måde, får dig til at skrive bedre kode, selv når du bruger et bibliotek. Remy Sharp skrev en god introduktion til HTML5 Doctor det skulle komme i gang og links til flere ressourcer, når du først har gennemgået introduktionen.



D3.js

Den første er D3.js , der beskriver sig selv som et 'JavaScript-bibliotek til manipulation af dokumenter baseret på data'. Nogle af eksemplerne er meget imponerende; fra en kort over USA til detaljeret punkttegn . D3 er designet til at give dig mulighed for at anvende datadrevne transformationer til et dokument. Det bruges ofte til datavisualiseringer og masser af tutorials er blevet skrevet om det. D3 er ikke specifikt et grafbibliotek, men giver dig simpelthen værktøjerne til at oprette grafer blandt andet. Eksemplet nedenfor viser et stablet søjlediagram. Ikke overraskende er der opstået biblioteker omkring D3 for at gøre det lettere at oprette grafer, hvoraf den mest populære er NVD3 , et bibliotek, der afhænger af D3, der gør det meget let at oprette komplekse grafer. Jeg vil opfordre dig til først at prøve at tegne graf med D3, før du prøver et bibliotek som NVD3. NVD3 er fantastisk, men at lave grafer med ren D3 giver mulighed for en større grad af tilpasning og selvfølgelig mere kontrol.



iphone 11 pro max vs iphone 8 plus

BonsaiJS

Næste er BonsaiJS , et JS-grafikbibliotek, der har imponerende demoer som f.eks arbejder Pong spil og en interaktivt cirkeldiagram . Bonsai er anderledes end D3, fordi det ikke virker ved at interagere med HTML, det hele gøres via JavaScript. Hvad der også er godt ved Bonsai er online editor , som giver dig mulighed for let at lege med Bonsai og straks se resultaterne. Mens D3s syntaks ofte ligner noget, der ligner jQuery med hensyn til at interagere med elementer, opretter du med Bonsai elementer gennem JavaScript, og Bonsai føjer dem automatisk til siden for dig. Både Bonsai og D3 er meget kraftfulde, men nærmer sig tingene på lidt forskellige måder.



Raphael

Raphael er et lille bibliotek designet til at forenkle arbejdet med vektorgrafik på nettet. Det giver også mulighed for komplekse diagrammer og visualiseringer og arbejder ved at tegne SVG-elementer. Et plus for Raphael er, at det har bedre browsersupport, der understøtter IE6 og derover, mens Bonsai og D3 ikke understøtter ældre versioner af Internet Explorer. Imidlertid er et negativt over for Raphael, at kildekoden sidst blev opdateret for 11 måneder siden, så den er lidt forældet. Raphael er stadig et meget dygtigt bibliotek og er bestemt værd at kigge over. En af mine yndlingsdemoer er Ben Barnett's Tube Map , der genskaber det berømte London Underground-rørkort med Raphael, med virkelig demonstrerer kraften i biblioteket (skærmbillede nedenfor).



Three.js

Three.js er noget meget andet end de tre biblioteker, jeg hidtil har diskuteret. Three.js bruges til at oprette 3D-grafik, ofte igennem WebGL . Det er i stand til utrolige ting, som denne sportsvogn (billedet nedenfor) men da det er ressourceintensivt og bruger WebGL, er browsersupport naturligvis begrænset lige nu. Du har brug for et godt kendskab til 3D-grafik for at arbejde effektivt med Three.js. Der er dog gode tutorials derude, herunder en god introduktion til biblioteket. Three.js implementerer shaders, kameraer, animationer og meget mere.

begyndere guide til digital maleri i Photoshop

EaselJS

Hvis du leder efter et bibliotek, der fungerer mere som en indpakning omkring arbejdet med lærredselementet, EaselJS kan være mere op ad din gade, især hvis du gerne vil bygge nogle spil. Det er i stand til genskabe det klassiske Asteroids-spil eller giver brugerne mulighed for at tegne på et lærred . Staffel kommer med omfattende API-dokumentation . EaselJS tog meget inspiration til sine klassenavne fra Flash, så hvis du er fortrolig med Flash, finder du Easel endnu lettere at hente.

Med hensyn til indledende tutorials, denne video på YouTube giver en god introduktion, og der er også links på Easel-wiki til mere. Staffel er ikke som D3 eller Bonsai - det er tydeligt designet med mere interaktion i tankerne - spil, træk og slip grænseflader osv. Snarere end datavisualisering. Det er også værd at tjekke det hele OpretJS-suite , som staffel tilhører. Dette inkluderer TweenJS, et bibliotek til at interpolere (eller animere) HTML5- og JavaScript-egenskaber, SoundJS til at arbejde med lyd i JavaScript og PreloadJS, et bibliotek til styring af forudindlæsning af aktiver. Skærmbilledet ovenfor viser EaselJS-versionen af ​​asteroider.

Vælg det rigtige værktøj

Med den nye funktionalitet, der er tilgængelig for os som JavaScript-udviklere, udvides brugen af ​​JavaScript hele tiden, og udviklere drager fordel af dette ved at oprette disse biblioteker, som de tidligere nævnte fem, for at gøre det endnu lettere. Nogle af demoerne i disse biblioteker, især ThreeJS, er helt sindssyge; det er ikke så længe siden, at intet af dette var muligt.

Som med de andre artikler i denne 'Top JavaScript'-serie, opfordrer jeg dig til at prøve et par biblioteker, inden du vælger en til at bruge til din applikation. Hvert bibliotek har nogle ting, det klarer sig godt, og måske et par svage punkter, og det er noget, du skal bruge tid på at vælge den rigtige til jobbet.