11 „JavaScript“ rėmelių grafikai kurti

(Vaizdo kreditas: ateitis)

„Javascript“ sistemos gali atlikti daugybę funkcijų. Čia mes apžvelgsime keletą bibliotekų, kurios padės jums sukurti nuostabią grafiką.

Naršyklė siūlo keletą galingų piešimo API ir paviršių. Labiausiai pastebimi yra drobės elementas ir keičiama vektorinė grafika (SVG). Abi šios funkcijos dabar yra prieinamos beveik visose darbalaukio ir mobiliojo telefono naršyklėse, tačiau joms naudoti reikalingos API yra gana žemo lygio, o „žemas“ paprastai reiškia daug varginančių ir nereikalingų kodų, kad būtų galima atlikti paprastus dalykus.

Kadangi varginančio ir nereikalingo kodo rašymas nėra didelis sąrašas dalykų, kuriuos kūrėjams paprastai patinka daryti net naudojant geriausi kodo redaktoriai ir geriausi nešiojamieji kompiuteriai programavimui , laimei, yra kelios bibliotekos, kurios padės jums patenkinti visus jūsų naršyklės brėžinių reikalavimus.

Šiame straipsnyje mes apžvelgsime keletą galimų variantų. Mes ištirsime populiariausias „JavaScript“ bibliotekas ir pakalbėsime apie jų stipriąsias ir silpnąsias puses. Mes taip pat šiek tiek papasakosime apie keletą mažiau žinomų projektų, kurie užpildys labai įdomius nišos poreikius - tokius, kurių nežinote, kol jums jų reikia. Pradedate nuo nulio? Išbandykite viršų svetainių kūrėjas ir apsvarstykite, kuris interneto priegloba paslauga jums tinka.

kaip nupiešti katę atsistojus

01. D3.js

D3.js suteikia neribotas galimybes, kaip rodo Shirley Wu interaktyvioji Hamiltono vizualizacija(Vaizdo kreditas: D3)

D3.js yra pagrindinis „JavaScript“ grafikos bibliotekų viršininkas. Per savaitę atsisiųsta daugiau nei milijonas virš jūros lygio , tai yra galbūt labiausiai žinomas ir plačiausiai naudojamas iš visų grafikos bibliotekų. Net turi savo Vikipedijos puslapis . Ir, pripažinkime, ar ne tada, kai žinai, kad tau tai pavyko?

D3 suteikia galimybę kurti bet kokio tipo duomenų vizualizacijas. Jums reikia tik žvilgtelėti per ją pavyzdžių puslapis pamatyti galimybių pasaulį. Dar geriau apsilankykite Shirley Wu's interaktyvi vizualizacija kiekvienos miuziklo „Hamiltonas“ eilutės, jei tikrai norite, kad jūsų protas būtų užpūstas.

D3 yra visa apimantis įrankis. Jis turi savo pasirinktą DOM, AJAX galimybes ir net patentuotą atsitiktinių skaičių generatorių. Kiekvienas D3 komponentas yra savo mazgo modulis, kurį reikia importuoti. Pavyzdžiui, pasirinkimo modulis vadinamas d3-selection. Taip pat yra masyvų, formų, spalvų, „nuvilkimo“, laiko ir daugelio kitų modulių.

D3 galia atsiranda dėl sudėtingumo kompromiso. Mokymosi kreivė gali būti kieta, o kodas vis tiek gali būti vertingas. Norint sukurti kažką tokio paprasto kaip juostų diagramą, reikia rankiniu būdu surinkti ašį, svarstykles, erkes ir net nupiešti stačiakampius, kurie atspindės juostas. Kūrėjai dažnai skundžiasi dėl žemo lygio supratimo, kurio reikia norint veiksmingai naudotis D3.

Taip yra daugiausia dėl to, kad kuriant sudėtingas duomenų vizualizacijas reikia žemo lygio supratimo apie norimą kurti vizualizaciją. D3 nėra geriausias iš anksto iškeptų diagramų variantas. Tam yra keletas kitų pasirinkimų, kuriuos rasite „ sėkmės duobė daug greičiau.

D3 gali perduoti į drobę ir SVG. Tačiau tikroji D3 magija yra jos sugebėjimas „susieti duomenis“ su jo sukurta grafika. Pagalvokite apie diagramą, kuri keičiasi keičiantis gaunamiems duomenims. Naudojant SVG, kiekvienas grafinis elementas yra atskiras elementas, kurį galima pasirinkti ir atnaujinti. Tai neįmanoma naudojant drobę ir, kadangi D3 iš esmės susijęs su duomenų vizualizavimu, SVG paprastai yra pageidaujamas išvesties formatas.

02. Chart.js

„Chart.js“ turi aštuonis iš anksto sukonstruotus diagramų tipus, o tai reiškia, kad vartotojai gali greitai pradėti ir veikti(Vaizdo kreditas: Chart.js)

Chart.js yra atviro kodo projektas, skirtas kurti patikimas diagramas su „JavaScript“. Didelis skirtumas tarp „Chart.js“ ir „D3“ yra tas, kad nors naudodamiesi „D3“ galite kurti beveik viską, „Chart.js“ apriboja jus aštuoniais iš anksto parengtais diagramų tipais: linija, juosta, pyragas, poliarinis, burbulas, sklaida, plotas ir mišrus. Nors tai atrodo ribojanti, tai yra tai, dėl ko „Chart.js“ yra paprasčiau pradėti. Tai ypač pasakytina apie tuos, kurie nėra duomenų viseto ekspertai, tačiau žino savo kelią aplink pagrindinę diagramą.

Sintaksė sukurta pagal diagramos tipą. Inicijuojate naują diagramą ant esamo drobės elemento, nustatote diagramos tipą ir tada nustatykite diagramos parinktis. „Chart.js“ pateikia tik drobę. Tai nėra problema, nes visos šiuolaikinės naršyklės palaiko HTML drobės elementą, tačiau tai gali būti pakabinimas kūrėjams, kurie turi SVG palaikymo reikalavimus.

Tai taip pat reiškia, kad esate ribotas galimų animacijų. Iš dėžutės Chart.js palaiko visas palengvinimo lygtis, o animacijos nurodomos vienu ypatybės nustatymu. Nors tai leidžia greitai ir lengvai gauti animacinę diagramą, neturėdami atskirų SVG elementų, negalėsite atlikti sudėtingų animacijų naudodami CSS3 perėjimus ir animacijas.

Skirtingai nuo D3, Chart.js nėra modulinis, todėl norint gauti visų funkcijų ir diagramų tipų, reikia tik vieno „JavaScript“ įtraukimo. Tai palengvina darbo pradžią, tačiau reiškia, kad jūsų turtas gali būti daug didesnis. Tai ypač pasakytina, jei jums reikia laiko ašių - tada „Chart.js“ reikia „Moment.js“, kuris yra ~ 51 kb minifikuotas ir suglaudintas. Kur kas paprasčiau sukurti juostinę diagramą naudojant Chart.js nei naudojant D3. Tačiau yra paprastumo suteikiamos lubos. Gali būti, kad iš dėžutės pasiekėte ribą, ką ji veiks. Dažnai kūrėjai pradeda nuo tokio sprendimo kaip Chart.js, tada pereina prie D3.

Jei Chart.js paprastumas jus domina, jums gali patikti kita parinktis: „Chartist“.

vidurio šiuolaikinis grafinis dizainas

03. Chartistas

Viena didelė „Chartist“ naudojimo premija yra ta, kad ji pagal numatytuosius nustatymus yra jautri(Vaizdo kreditas: „Chartist“)

Chartistas siekia būti paprasta, supaprastinta diagramų biblioteka, kurios dydis yra nedidelis ir kurią lengva pradėti naudoti. Jis taip pat sukurtas taip, kad pagal numatytuosius nustatymus reaguotų. Tai yra didesnis sandoris, nei atrodo, nes tokie rėmai kaip D3 nekeičia diagramų dydžio automatiškai, tačiau reikalauja, kad kūrėjas susietų įvykius ir perbraižytų grafiką.

Chartistas taip pat yra nedidelis, palyginti su Chart.js. Jis sveria vos 10 KB, o nulinė priklausomybė nėra. Taip gali būti todėl, kad jame siūlomi tik trys diagramų tipai: linija, juosta ir pyragas. Šiuose tipuose yra skirtumų (ty sklaidos diagrama yra „Chartist“ eilutės tipas), tačiau nedidelį dydį ir paprastą konfigūravimą atsveria tai, kad trūksta „of-the-box“ diagramų tipų.

„Chartist“ teikia SVG, o ne drobę, todėl ją galima daug labiau pritaikyti išvaizdos ir pojūčių atžvilgiu, taip pat suteikiama kur kas didesnė sąveikos ir animacijų kontrolė. Tačiau neturint prieigos prie drobės reiškia, kad jums gali būti sunkiau atlikti tam tikrus veiksmus. Pvz., Yra API, skirta atvaizduoti drobę (toDataURI). Šios parinkties SVG nėra, todėl eksportuoti diagramą kaip vaizdą bus daug sudėtingiau. Idealiame pasaulyje turėtumėte galimybę pateikti abu režimus.

„Chartist“ diagramas lengviau sukonfigūruoti nei „Chart.js“, nes yra mažiau galimybių. Nors įmanoma išplėsti šias diagramas gana mažai funkcionaliai, jų dėmesys paprastumui reiškia, kad jos iš esmės yra paprastos. „Chartist“ yra puikus sprendimas tiems, kuriems reikalingas pagrindinis diagramų sprendimas. Diagramas iš esmės sunku sukonfigūruoti, nes joms reikia tam tikrų žinių apie tai, kaip nustatyti duomenis išilgai tam tikros ašies ir sugrupuoti tam tikrais būdais. „Chartist“ daro diagramų dalį kuo paprastesnę, tačiau jums gali prireikti galingesnio sprendimo, nes jums bus patogiau kurti savo diagramas.

„Chartist“ taip pat pateikia atvirojo kodo sistemos palaikymą, įskaitant „React“ ir „Angular“. Apie „Vue“ paketą jos svetainėje nėra užsimenama.

04. Britecharts

„Britecharts“ apgaubia D3, todėl jūs galite mėgautis D3 funkcionalumu nemokėdami sužinoti, kaip jis veikia(Vaizdo kreditas: Britecharts)

Britų diagramos yra diagramų biblioteka, apvedanti D3. Jį pagamino „Eventbrite“, kuri tada užsakė projektą pagal leidžiančią „Apache V2“ licenciją.

Tai siūlo labai minimalų, tačiau estetiškai patrauklų diagramų rinkinį. Nors tai gali būti nemenkas uždavinys sukurti juostinę diagramą su „vanilla D3“, „Britecharts“ apvyniojimas daro tai taip paprasta, kaip sukurti naują „barChart“ objektą, tada nustatyti jo plotį ir aukštį.

barChart.width(500).height(500);

„Britecharts“ palaiko visus pagrindinius diagramų tipus: liniją, juostą, spurgą, kulką, sklaidos diagramą, spindesį ir žingsnį, o tai yra daugiau nei siūlo tokios bibliotekos kaip „Chartist“. Tai taip pat suteikia pagrindinį patarimą ir legendos funkcionalumą. Diagramų animacijos yra integruotos, o „Eventbrite“ pateikė keletą gražių spalvų schemų.

Galų gale „Britecharts“ yra puiki galimybė pagrindinėms diagramų funkcijoms. Konfigūracijos objektai yra gana paprasti ir jūs vis tiek gaunate D3 galią po dangčiu, nieko nežinodami apie patį D3. Daugeliui kūrėjų tai atrodys patrauklesnė galimybė, nei paprasčiausiai sukurti visą diagramą nuo pat pradžių su D3.

Ji taip pat sutelkia dėmesį į D3 duomenų įpareigojimo aspektus, todėl tai yra gana gerai diagramoms, kurias reikia keisti, kai keičiasi pagrindiniai duomenys. Nors tai šiek tiek riboja galimus tipus, jis taip pat turi pagrindinį diagramos tipą, kurį galite išplėsti, kad sukurtumėte naujus savo diagramų tipus.

05. Nardymo tipai

„Taucharts“ moko vartotojus apie duomenų vizualizavimo pagrindus(Vaizdo kreditas: „Taucharts“)

Nardymo stiliai yra dar vienas schemų sprendimas, kuris apgaubia D3 sudėtingumą lengvai įgyvendinamoje API. Jis sukurtas remiantis koncepcijomis Grafikos gramatika , autorės Leland Wilkinson knyga. Tai leidžia suprasti, kada ir kaip naudoti kokias duomenų vizualizacijas, kad būtų rodomi įvairūs duomenys.

Iš dėžutės joje yra linijų, juostų, taškų, plotų ir briaunų diagramos. Tačiau ji įgyvendina „Grafikos gramatikos“ sąvokas į „Taucharts Language“, kuri suteikia pagrindą, kuriame galite įgyvendinti savo duomenų vizualizacijas.

„Taucharts“ atrodo gana patraukliai, o tai, kad jis pastatytas ant D3, daro jį patraukliu ir galingu pasirinkimu. Vis dėlto yra jausmas, kad kūrėjas taip pat turi perskaityti grafikos gramatiką, kad galėtų visiškai išnaudoti savo galią.

Kol kas aptarėme tik diagramas ir duomenų vizualizaciją. Taip yra todėl, kad diagramų piešimas yra dažniausiai naudojamas grafikos bibliotekos naršyklės atvejis. Bet tai anaiptol ne vienintelis. Kitas gana dažnas grafikos scenarijus, be abejo, yra animacija.

06. Du.js

„Twos.js“ ateina į savo rankas tvarkant 2D animaciją(Vaizdo kreditas: Two.js)

Negalima painioti su D3.js, du.js yra atviro kodo „JavaScript“ biblioteka, skirta dviejų matmenų piešimui internete. Jis taip pat gali taikyti visas tris šiuolaikinių naršyklių grafikos parinktis: SVG, „Canvas“ ir „WebGL“.

„Two.js“ yra šiek tiek panašus į D3 tuo, kad yra griežtai orientuotas į piešimą ir neturi iš anksto paruoštų diagramų ar interaktyvių struktūrų, iš kurių galima rinktis. Tai reiškia, kad, kaip ir D3, jums reikia pagrindinio supratimo apie piešimo tipą, kurį bandote atlikti, ir kaip tai pasiekti naudojant „two.js“ pateiktus konstruktus. Apskritimo brėžimas yra gana paprastas. Kita vertus, išsamios animacijos kūrimas yra daug sudėtingesnis darbas. „Two.js“ abstrakcionuoja tik piešimo formų nuovargį, o ne viso piešinio nuovargį.

„Two.js“ taip pat stebi visus jūsų sukurtus objektus, kad galėtumėte juos bet kada nurodyti ir animuoti. Tai ypač svarbu, jei kuriate žaidimus ir turite išteklių, kuriuos reikia sekti, pavyzdžiui, susidūrimo aptikimas. Jame yra įmontuota animacijos kilpa, kuri atleidžia jus nuo jaudinimosi dėl animacijos rėmelių ir palengvina susiejimą animacijos bibliotekoje, tokioje kaip „GreenSock“ .

Nors „two.js“ yra galingas, jo laisvos formos prigimtis gali palikti kai kuriuos kūrėjus nežinomus, kaip pradėti, ir tai yra labiau nišinis įrankis 2D piešimui ir animacijai. Kitas puikus variantas yra pts.js.

07. Pts.js

kaip piešti peizažus akvarele
Iš anksto nustatyta Pts metodika yra naudinga interaktyvioms vizualizacijoms, taip pat animacijoms(Vaizdo kreditas: pts.js)

Tšk taip pat yra dvimatė piešinių biblioteka. Tačiau jis iš esmės skiriasi nuo „two.js“, nes jame naudojama iš anksto nustatyta metodika, kaip turėtų būti surenkami piešiniai ir animacijos: erdvė, forma ir taškas. Analogija, kurią jos kūrėjai naudoja tam paaiškindami, yra iš fizinio pasaulio. Kosmosas yra popierius. Forma yra pieštukas. Ir taškas yra jūsų idėja.

Kalbant apie jo įgyvendinimą, erdvė yra drobės elementas. Sukūrus drobės elementą, prie jo galite pridėti grotuvų. Tai gali būti funkcijos arba objektai. Šios funkcijos ir objektai turi atitikti iš anksto nustatytą erdvės sąsają. Pts yra sukurtas ant „TypeScript“, todėl nereikia spėlioti, kas tai yra, nes jūsų naudojami įrankiai greičiausiai pasiūlys tuos, kurie turi automatinį užbaigimą.

Pavyzdžiui, tarpas turi pradžios funkciją, kurią galite nurodyti. Tai kodas, paleidžiamas, kai vieta paruošta. Šiose funkcijose brėžinys į erdvę įvyksta naudojant formos objektą. Formos objektai gali piešti bet kokią formą, o taškas yra vieta, kur šie elementai yra erdvėje.

Pts, atrodo, pirmiausia skirtas interaktyvioms vizualizacijoms ir animacijoms kurti. Jo įgyvendinimas yra įdomus, nors ir gana abstraktus. Kūrėjams gali būti sunku suprasti „erdvės, formos, taško“ modelį, kurio reikalauja Pts. Tai dar viena psichinė kliūtis, kurią reikės pašalinti be paprasčiausio figūrų piešimo ir animavimo.

08. Anime.js

Anime.js veikia palaipsniui sistemoje, kuri padeda suplanuoti animacijas(Vaizdo kreditas: Anime.js)

Anime.js pirmiausia yra animacijos biblioteka. Jame yra įmontuota pakopų sistema, kad būtų paprasčiau turėti sudėtingas animacijas, kurios sutampa arba priklauso nuo kito vykdymo. Įprasta, kad animacijos nustatomos kartu arba jas suaktyvina viena kita. Stulbinanti sistema palengvina tai įgyvendinti, nes tai padeda sumažinti kai kurias puslapio sekimo ir rankinio animacijos laiko konfigūravimo išlaidas.

Skirtingai nei iki šiol apipavidalintos piešimo bibliotekos, anime.js neturi API piešti figūras. Užtat daroma prielaida, kad jūsų formos jau egzistuoja ir norite jas animuoti. Tai leidžia puikiai naudoti su tokiomis bibliotekomis kaip „two.js“. Anime.js palaiko CSS ypatybių, SVG, DOM ir net „JavaScript“ objektų animavimą.

„Anime.js“ yra gera galimybė animuoti esamus piešinius ir greičiausiai bus derinama su kita biblioteka. Tai turėtų būti laikoma alternatyva kažkam, pavyzdžiui, „GreenSock“, o ne pakaitalas kitoms piešimo bibliotekoms. Anime.js greičiausiai būtų naudojamas sudėtingesnėms animacijoms, kurios turi vykti kaip interaktyvios žiniatinklio patirties dalis.

09. PixiJS

15 colių kietasis „MacBook Pro“ dangtelis
„PixiJS“ yra 2D piešimo biblioteka su API, kuri buvo sukurta ir naudojama „Adobe Flash“, todėl kai kam bus žinoma(Vaizdo kreditas: PixiJS)

PixiJS yra dar viena 2D piešimo biblioteka. Pagrindinis jo tikslas yra palengvinti 2D grafikos atvaizdavimą, animavimą ir valdymą, todėl galite sutelkti dėmesį į savo patirties ar žaidimo kūrimą nesijaudindami, ar neatsiliksite nuo visų piešiamų ir animuotų formų ir vaizdų. Jei kuriate žaidimą, turtas (ar spritai) gali greitai perkelti į skaičių, kurį sunku valdyti. (Daugybė išteklių, kuriuos reikia sutaupyti? Saugokite juos patikimiausiu būdu debesies saugykla .)

Įtikinantis „PixiJS“ aspektas yra tas, kad jis gaunamas iš API, kuris buvo sukurtas ir plačiai naudojamas „Adobe Flash“. Tai yra didžiulė nauda „Flash“ fono kūrėjams, nes patirtis jausis pažįstama. Jis taip pat panašus į „Apple SpriteKit“.

„PixiJS“ nėra žaidimų variklis, taigi, jei jį naudojate žaidimams, nerasite jokių įrankių ar fizikos, kad galėtumėte tvarkyti tokius dalykus kaip susidūrimas. Jei jaučiatės be baimės, turėsite apvynioti jį tikru žaidimų varikliu arba savo sukurtu žaidimu.

„PixiJS“ pateikia „WebGL“. „WebGL“ yra variklis, skirtas naršyklėje atlikti GPU pagreitintą grafiką. Tai reiškia, kad tai yra naudinga animacijoms ir grafikai, naudojančioms daug sistemos išteklių ir geriausiai veikiančioms, kai jas pateikia atskiras grafikos procesorius (GPU). Jis pagrįstas „OpenGL“, kuris yra žaidimų ir 3D grafikos programų darbalaukio atitikmuo. Po gaubtu „WebGL“ naudoja HTML drobės elementą.

Rimti grafikos kūrėjai įvertins „WebGL“ galią. Tačiau ši patirtis gali pablogėti mažesnės galios mašinose. Net kai rengiau šį straipsnį, daugelis „PixiJS“ demonstracinių versijų pastebimai sulėtino mano sistemą, kuri neturi sudėtingesnės grafikos ir animacijos reikalingų aukščiausios klasės galimybių.

10. Zdogas

„Zdog“ siūlo 3D išvaizdą naudojant 2D brėžinius(Vaizdo kreditas: Zdog)

Dauguma piešimo variklių, kuriuos iki šiol aptarėme, yra dvimatis. Taip yra todėl, kad dauguma mūsų sąveikos su ekranu vyksta dviem matmenimis - išilgai X ir Y ašies. Trijų matmenų piešiniai ir animacijos paprastai yra daug sudėtingesni.

Zdogas yra biblioteka, skirta kurti pseudo- 3D patirtis, kurios dažniausiai būna plokščios. Jis vadinamas pseudo-3D, nes nors jis konceptualizuoja savo piešinius 3D erdvėje, jis juos paverčia plokščiomis formomis. Jis naudoja vaizdinius triukus, kad 2D objektai atrodytų 3D. Poveikis tikrai įdomus. Žiūrint animaciją, ji atrodo visiškai trimatė, bet kai daroma ekrano kopija, tai aiškiai plokščias vaizdas. Štai vienas pavyzdys: besisukantis „Mario“ demonstracinis variantas.

Kadangi atvaizdai yra 2D, „Zdog“ gali pateikti „Canvas“ arba SVG. „Zdog“ yra puiki galimybė 3D animacijoms ant paprastų objektų, ypač jei tame turte yra plokščio dizaino aspektų. Kūrėjai, norintys 3D animacijos, bet nenorintys įklimpti į sudėtingą 3D grafikos variklių pasaulį, gali rasti „Zdog“ tinkamą sprendimą. Be to, „Zdog“, sutelkdamas dėmesį į plokščius vaizdus, ​​gali sau leisti daug paprastesnę sąsają ir daug geresnį našumą, nei to reikėtų 3D sudėtingų grafinių vaizdų atvaizdavimui.

Jame nėra žaidimo variklio elementų, tokių kaip turto valdymas ir susidūrimų aptikimas, todėl jį reikėtų suvynioti į žaidimo variklį arba tuos aspektus reikia pasirūpinti rankiniu būdu. Tai reiškia, kad „Zdog“ tikriausiai geriausiai tinka izoliuotoms 3D animacijoms nukreipimo puslapiuose.

11. Snap.svg

„Snap.svg“ turi API, kuri pasirinks SVG elementą, kad galėtumėte prie jo piešti elementus(Vaizdo kreditas: Snap.SVG)

Snap.svg sako, kad tai daro „darbą su savo SVG turtu taip pat lengva, kaip„ jQuery “palengvina darbą su DOM“. Iš „jQuery“ nuorodos galite pasakyti, kad „Snap.svg“ yra šiek tiek senesnė, tačiau jos API jaučiasi taip pat lengva, kaip „jQuery“, ir tai yra gana galingas dalykas.

„Snap.svg“ turi švarią ir paprastą API, skirtą pasirinkti pagrindinį SVG elementą ir tada jį piešti. Tai labiausiai tinka kūrėjams, ieškantiems greito SVG animavimo sprendimo. Tai ypač geras pasirinkimas, jei jūsų animacijos yra paprastos ir neturite daug žinių apie animacijos variklius. Nors jis yra šiek tiek datuojamas, jo tikrai nereikėtų pamiršti, nes tai gali būti paprasčiausias būdas dirbti su savo SVG.

„Snap.svg“ yra gaivus savo paprastumu. Tai priklauso nuo pasirinkimo ir darbo su SVG darbo ir nebando būti daugiau. „Snap“ būtų galima derinti su kitomis grafikos bibliotekomis, kad būtų galima piešti ir perteikti SVG. Taip pat gerai, jei turite esamas SVG ir norite paprasto darbo su jais būdo.

Šis straipsnis iš pradžių buvo paskelbtas internetiniame žurnale.

Susiję straipsniai: