„Essential JavaScript“: penkios geriausios grafinės bibliotekos

Tik neseniai mes galėjome apsvarstyti „JavaScript“ grafiniams darbams, pvz., Diagramų piešimui ar galbūt net HTML5 žaidimams. Geresni „JavaScript“ varikliai ir nuolat tobulėjantis naršyklės palaikymas (ypač darbas, atliekamas „Chrome“ V8 variklyje) daro „JavaScript“ perspektyvią daugelio grafinių darbų parinktį. Šiandien aš apžvelgsiu penkias bibliotekas, sukurtas padėti jums šioje srityje, ir tas, kurios taip pat palengvina darbą su HTML5 drobės elementu.

Jei dar nesinaudojote drobės elementu, labai rekomenduoju su juo susipažinti prieš naudojant biblioteką, kad būtų lengviau. Žinodami, kaip ką nors padaryti sunkiuoju būdu, turėsite parašyti geresnį kodą, net kai naudojatės biblioteka. Remy Sharp parašė gerą įvadas į HTML5 daktaras tai turėtų padėti jums pradėti ir nuorodas į daugiau išteklių, kai atliksite įvadą.

D3.js

Pirmasis yra D3.js , kuris save apibūdina kaip „JavaScript biblioteką, skirtą manipuliuoti dokumentais, pagrįstais duomenimis“. Kai kurie pavyzdžiai yra labai įspūdingi; iš JAV žemėlapis iki detalių kulkų diagramos . D3 yra sukurtas tam, kad dokumente galėtumėte pritaikyti duomenimis pagrįstas transformacijas. Jis paprastai naudojamas duomenų vizualizavimui ir gausybė vadovėlių buvo apie tai parašyta. D3 nėra specialiai sukurta grafikų biblioteka, bet, be kitų dalykų, paprasčiausiai pateikia įrankius grafikams kurti. Žemiau pateiktame pavyzdyje rodoma sukrauta juostinė diagrama. Nenuostabu, kad bibliotekos atsirado aplink D3, kad būtų lengviau kurti grafikus, iš kurių populiariausias yra NVD3 , biblioteka, kuri priklauso nuo D3, todėl labai lengva kurti sudėtingus grafikus. Norėčiau paraginti pirmiausia išbandyti grafiką su D3 prieš bandant biblioteką, pvz., NVD3. NVD3 yra puikus, tačiau atlikus grafikus su grynu D3, galima labiau pritaikyti ir, žinoma, daugiau kontroliuoti.



„MacBook Pro“ su „Adobe“ kūrybiniu paketu

BonsaiJS

Kitas yra BonsaiJS , JS grafikos biblioteka, kurioje yra įspūdingos demonstracinės versijos, tokios kaip veikiantis Pongo žaidimas ir an interaktyvi skritulinė diagrama . „Bonsai“ skiriasi nuo D3 tuo, kad neveikia sąveikaujant su HTML, visa tai daroma naudojant „JavaScript“. Kas taip pat puiku Bonsai yra internetinis redaktorius , kuris leidžia lengvai žaisti su „Bonsai“ ir iškart pamatyti rezultatus. Nors D3 sintaksė dažnai primena kažką panašesnio į „jQuery“ sąveikaujant su elementais, su „Bonsai“ jūs sukuriate elementus naudodami „JavaScript“, o „Bonsai“ automatiškai juos prideda jums prie puslapio. Tiek „Bonsai“, tiek „D3“ yra labai galingi, tačiau požiūris į reikalus šiek tiek skirtingas.

Rafaelis

Rafaelis yra maža biblioteka, skirta supaprastinti darbą su vektorine grafika internete. Tai taip pat leidžia sudėtingos diagramos ir vizualizacijos ir dirba piešdami SVG elementus. Vienas „Raphael“ pliusas yra tas, kad jis palaiko naršyklę, palaikydamas IE6 ir naujesnes versijas, o „Bonsai“ ir D3 nepalaiko senesnių „Internet Explorer“ versijų. Tačiau vienas neigiamas „Raphael“ yra tai, kad šaltinio kodas paskutinį kartą buvo atnaujintas prieš 11 mėnesių, todėl jis šiek tiek pasenęs. Raphaelis išlieka labai pajėgi biblioteka ir tikrai verta peržvelgti. Vienas iš mano mėgstamiausių demonstracinių versijų yra Beno Barnetto metro žemėlapis , kuris atkuria garsųjį Londono metro vaizdą su Raphaelu, iš tikrųjų parodo bibliotekos galią (ekrano kopija pateikiama žemiau).

Trys.js

Trys.js yra kažkas, kas labai skiriasi nuo trijų iki šiol aptartų bibliotekų. „Three.js“ naudojamas 3D grafikai kurti, dažnai per „WebGL“ . Jis sugeba neįtikėtinų dalykų, pavyzdžiui, šis sportinis automobilis (nuotrauka pateikiama žemiau) bet kadangi tai reikalauja daug išteklių ir naudoja „WebGL“, naršyklės palaikymas šiuo metu akivaizdžiai ribotas. Jums reikės gerų 3D grafikos žinių, kad galėtumėte efektyviai dirbti su „Three.js“. Tačiau yra gerų mokymo programų, įskaitant a gera įžanga į biblioteką. „Three.js“ įgyvendina šešėlius, fotoaparatus, animacijas ir įkelia daugiau.

kaip motyvuoti save piešti

MolbertasJS

Jei norite bibliotekos, kuri labiau veikia kaip apipavidalinimas dirbant su drobės elementu, MolbertasJS gali būti labiau jūsų gatvėje, ypač jei norite sukurti keletą žaidimų. Tai sugeba atkurti klasikinį asteroidų žaidimą arba leidžianti vartotojams piešti ant drobės . Molbertas ateina su išsami API dokumentacija . „EaselJS“ labai įkvėpė savo klasių pavadinimus iš „Flash“, taigi, jei esate susipažinę su „Flash“, „Easel“ rasite dar lengviau pasiimti.

kaip valyti akrilinius dažus nuo teptukų

Kalbant apie įvadines pamokas, šį vaizdo įrašą „YouTube“ pateikia gerą įžangą ir taip pat nuorodos molberto wiki prie daugiau. Molbertas nėra panašus į D3 ar Bonsai - jis aiškiai sukurtas atsižvelgiant į didesnę sąveiką - žaidimus, „drag and drop“ sąsajas ir pan., O ne duomenų vizualizavimą. Taip pat verta patikrinti visą „CreateJS“ rinkinys , kuriam priklauso Molbertas. Tai apima „TweenJS“, biblioteką, skirtą HTML5 ir „JavaScript“ ypatybėms susieti (arba animuoti), „SoundJS“, skirtą dirbti su garsu „JavaScript“, ir „PreloadJS“, biblioteką, skirtą valdyti išankstinį išteklių įkėlimą. Aukščiau pateiktoje ekrano kopijoje rodoma „Asteroidų“ versija „EaselJS“.

Tinkamo įrankio pasirinkimas

Kadangi mums, kaip „JavaScript“ kūrėjams, prieinama nauja funkcija, „JavaScript“ naudojimo atvejai nuolat plečiasi, o kūrėjai tuo pasinaudoja kurdami šias bibliotekas, pavyzdžiui, penkias anksčiau paminėtas, kad būtų dar lengviau. Kai kurios šių bibliotekų demonstracinės versijos, ypač „ThreeJS“, yra visiškai nepaprastos; ne taip seniai niekas iš to nebuvo įmanoma.

Kaip ir kituose šios „Populiariausios„ JavaScript “serijos straipsniuose, raginu išbandyti kelias bibliotekas prieš apsigyvenant vienoje programoje. Kiekvienoje bibliotekoje yra keletas dalykų, kuriuos ji daro gerai, ir galbūt keletą silpnųjų vietų, o pasirinkti tinkamą tam darbui turėtumėte praleisti laiką.