11 JavaScript-kehystä grafiikan luomiseen

javascript-kehys: graafinen kuva
(Kuvan luotto: Tulevaisuus)

Javascript-kehykset voivat täyttää useita toimintoja. Tässä tarkastelemme joitain kirjastoja, jotka auttavat sinua luomaan upeita grafiikoita.

Selain tarjoaa useita tehokkaita piirustus-sovellusliittymiä ja pintoja. Merkittävimmät ovat kangaselementti ja skaalattava vektorigrafiikka (SVG). Molemmat näistä ominaisuuksista ovat nyt saatavilla melkein kaikissa työpöytä- ja mobiiliselaimissa, mutta niiden käyttöön tarvittavat sovellusliittymät ovat melko alhaisia ​​ja 'matala' tarkoittaa tyypillisesti paljon tylsiä ja turhia koodeja yksinkertaisten asioiden tekemiseksi.

Koska tylsän ja turhan koodin kirjoittaminen ei ole korkealla niiden asioiden luettelossa, joita kehittäjät yleensä nauttivat tehdä, jopa parhaat koodieditorit ja parhaat kannettavat tietokoneet ohjelmointia varten , onneksi käytettävissä on useita kirjastoja, jotka auttavat sinua selaimesi piirustusvaatimusten täyttämisessä.



Tässä artikkelissa tarkastellaan joitain käytettävissä olevia vaihtoehtoja. Tutkimme suosituimpia JavaScript-kirjastoja ja puhumme niiden vahvuuksista ja heikkouksista. Aiomme myös tehdä spelunkin joihinkin vähemmän tunnetuista projekteista, jotka täyttävät erittäin mielenkiintoisia kapealla tarpeita - sellaisia, joita et tiedä tarvitsevasi, kunnes tarvitset niitä. Aloittaa tyhjästä? Kokeile alkuun verkkosivujen rakentaja ja mieti mitä sivujen ylläpito palvelu sopii sinulle.

Adobe indesign cs4 lataa ilmainen täysversio

01. D3.js

Graafiset JavaScript-kehykset: D3.js

D3.js tarjoaa rajattomat mahdollisuudet, kuten Shirley Wun interaktiivinen Hamilton-visualisointi osoittaa(Kuvan luotto: D3)

D3.js on JavaScript-grafiikkakirjastojen iso pomo. Yli miljoona viikoittaista latausta merenpinnan yläpuolella , se on todennäköisesti tunnetuin ja eniten käytetty graafisista kirjastoista. Sillä on jopa oma Wikipedia-sivu . Ja tunnustetaan, eikö niin ole, kun tiedät, että olet päässyt suureen aikaan?

D3: n avulla voit rakentaa kaikenlaisia ​​tietovisualisointeja. Sinun tarvitsee vain katsoa sen läpi esimerkkisivu nähdä mahdollisuuksien maailma. Parempi vielä käydä Shirley Wussa vuorovaikutteinen visualisointi Hamilton-musikaalin jokaisesta rivistä, jos todella haluat mielesi puhallettua.

D3 on kaiken kattava työkalu. Sillä on oma DOM-valinta, AJAX-ominaisuudet ja jopa oma satunnaislukugeneraattori. Jokainen D3-komponentti on oma solmumoduuli, joka on tuotava. Esimerkiksi valintamoduulia kutsutaan d3-valinnaksi. Siellä on myös moduuleja taulukoille, muodoille, väreille, vedä ja pudota, ajalle ja paljon muuta.

D3: n voima tulee monimutkaisuuden kompromissina. Oppimiskäyrä voi olla jyrkkä ja koodi voi silti tuntua tarkalta. Jotain niin yksinkertaista kuin pylväsdiagrammi rakentaminen edellyttää, että koot akselin, asteikot, punkit ja jopa piirrät suorakulmiot, jotka edustavat pylväitä. Kehittäjät valittavat usein matalan tason ymmärryksestä, jonka vaaditaan olevan tehokas D3: n kanssa.

Tämä johtuu suurelta osin siitä, että monimutkaisten tietojen visualisointien luominen edellyttää, että sinulla on alhainen ymmärrys luotavasta visualisoinnista. D3 ei ole paras vaihtoehto valmiiksi paistetuille kaavioille. Tätä varten on olemassa useita muita vaihtoehtoja, jotka löytävät sinut menestyksen kuoppa ' paljon nopeampi.

D3 pystyy renderöimään kankaalle ja SVG: lle. D3: n todellinen taika on kuitenkin sen kyky 'sitoutua dataan' sen tuottamaan grafiikkaan. Ajattele kaaviota, joka muuttuu saapuvien tietojen muuttuessa. SVG: n avulla kukin graafinen kohde on yksittäinen elementti, joka voidaan valita ja päivittää. Tämä ei ole mahdollista kankaalle, ja koska D3 on pohjimmiltaan tiedon visualisointien virtaviivaistaminen, SVG on yleensä ensisijainen tulostusmuoto.

02. Chart.js

Graafiset JavaScript-kehykset: Chart.js

Chart.js: llä on kahdeksan valmiiksi rakennettua kaaviotyyppiä, mikä tarkoittaa, että käyttäjät voivat päästä nopeasti toimintaan(Kuvan luotto: Chart.js)

Chart.js on avoimen lähdekoodin projekti vankkojen JavaScript-kaavioiden rakentamiseksi. Suuri ero Chart.js: n ja D3: n välillä on, että vaikka D3: lla voi rakentaa melkein mitä tahansa, Chart.js rajoittaa sinut kahdeksaan ennalta rakennettuun kaaviotyyppiin: viiva, palkki, piirakka, napa, kupla, sironta, alue ja sekoitus. Vaikka tämä näyttää rajoittavalta, se tekee Chart.js: stä yksinkertaisemman aloittaa. Tämä pätee erityisesti niille, jotka eivät ole tietotietojen asiantuntijoita, mutta tietävät tiensä peruskartan ympärille.

Syntaksi on rakennettu kaaviotyypin ympärille. Alustat uuden kaavion olemassa olevalle kangaselementille, määrität kaaviotyypin ja sitten kaavion asetukset. Chart.js hahmonnetaan vain kankaalle. Tämä ei ole ongelma, koska kaikki modernit selaimet tukevat HTML canvas -elementtiä, mutta se voi olla keskeytys kehittäjille, joilla on vaatimuksia SVG-tuelle.

Se tarkoittaa myös, että sinulla on rajoitetusti mahdollisia animaatioita. Chart.js tukee alusta lähtien kaikkia kevennysyhtälöitä ja animaatiot määritetään yhdellä ominaisuusasetuksella. Animoidun kaavion saaminen on nopeaa ja helppoa, mutta yksittäisten SVG-elementtien puuttuminen estää sinua tekemästä monimutkaisia ​​animaatioita CSS3-siirtymien ja -animaatioiden avulla.

Toisin kuin D3, Chart.js ei ole modulaarinen, joten kaikkien toimintojen ja kaaviotyyppien tuen saaminen vaatii vain yhden JavaScriptin. Tämä helpottaa aloittamista, mutta tarkoittaa, että omaisuutesi voi olla paljon suurempi. Tämä pätee erityisesti, jos tarvitset aika-akseleita - Chart.js vaatii sitten Moment.js: n, joka on ~ 51 kt pienennetty ja pakattu. Palkkikaavion luominen Chart.js: n kanssa on paljon helpompaa kuin D3: lla. Yksinkertaisuuden mukana on kuitenkin katto. Saatat huomata, että olet ylittänyt rajan, mitä se tekee. Usein kehittäjät aloittavat ratkaisun, kuten Chart.js, ja siirtyvät sitten D3: een.

Jos Chart.js: n yksinkertaisuus vetoaa sinuun, saatat todella pitää seuraavasta vaihtoehdosta: Chartist.

03. Chartist

Graafiset JavaScript-kehykset: Chartist

Yksi iso etu Chartistin käytöstä on, että se on oletusarvoisesti reagoiva(Kuvan luotto: Chartist)

Chartist Tavoitteena on olla yksinkertainen, virtaviivainen karttakirjasto, joka on kooltaan pieni ja helppo aloittaa. Se on myös suunniteltu reagoimaan oletusarvoisesti. Tämä on isompi juttu kuin miltä se kuulostaa, sillä D3: n kaltaiset kehykset eivät muuta kaavioiden kokoa automaattisesti, mutta vaativat kehittäjää sitoutumaan tapahtumiin ja piirtämään grafiikkaa uudelleen.

Chartist on myös pieni verrattuna Chart.js: ään. Se painaa vain 10 kt ilman nollariippuvuuksia. Tämä saattaa johtua siitä, että se tarjoaa vain kolme kaaviotyyppiä: viiva, palkki ja piirakka. Näissä tyypeissä on muunnelmia (ts. Sirontakaavio on viivatyyppi Chartistissa), mutta pientä kokoa ja kokoonpanon helppoutta torjuu laatikkostyyppien puuttuminen.

Chartist renderöi SVG: lle kankaan sijasta, mikä tekee siitä paljon muokattavamman ulkonäön ja tunteen sekä tarjoaa paljon paremman hallinnan vuorovaikutteisuuteen ja animaatioihin. Kankaalle pääsyn estäminen tarkoittaa kuitenkin, että sinulla voi olla vaikeuksia tehdä tiettyjä toimintoja. Esimerkiksi on olemassa API, jolla kankaalle tehdään kuva (toDataURI). Tätä vaihtoehtoa ei ole SVG: lle, joten kaavion vieminen kuvana osoittautuu paljon hankalammaksi. Ihanteellisessa maailmassa sinulla on mahdollisuus tehdä renderöinti molempiin tiloihin.

Chartist-kaavioita on helpompi määrittää kuin Chart.js, koska vaihtoehtoja on vähemmän. Vaikka on mahdollista laajentaa näitä kaavioita melko pienellä toiminnallisuudella, niiden keskittyminen yksinkertaisuuteen tarkoittaa, että ne ovat määritelmänsä mukaan yksinkertaisia. Chartist on loistava ratkaisu niille, jotka tarvitsevat peruskartoitusratkaisun. Kaavioita on luonnostaan ​​vaikea konfiguroida, koska ne edellyttävät jonkinlaista tietoa siitä, kuinka data asetetaan tietylle akselille ja ryhmitellään tietyillä tavoilla. Chartist tekee kartoitusosasta mahdollisimman yksinkertaisen, mutta saatat joutua tarvitsemaan tehokkaamman ratkaisun, kun mukautut karttojen luomiseen.

Chartist listaa myös avoimen lähdekoodin kehystuen, mukaan lukien React ja Angular. Sivustolla ei mainita Vue-pakettia.

04. Britecharts

Graafiset JavaScript-kehykset: Britecharts

Britecharts kääri D3: n, joten voit nauttia D3: n toiminnoista tarvitsematta oppia sen toimintaa(Kuvan luotto: Britecharts)

Brittitaulut on kartoituskirjasto, joka kietoo D3: n. Sen teki Eventbrite, joka sitten hankki projektin sallivalla Apache V2 -lisenssillä.

Se tarjoaa erittäin pienen, mutta esteettisesti miellyttävän kaavion. Vaikka voi olla melko tehtävä luoda pylväsdiagrammi vanilja D3: lla, Britechartsin kääriminen tekee siitä yhtä helppoa kuin uuden barChart-objektin luominen ja sitten sen leveyden ja korkeuden asettaminen.

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

Britecharts tukee kaikkia kaaviotyyppejä: viiva, palkki, munkki, luoti, hajontakaavio, kipinöinti ja askel, mikä on enemmän kuin Chartistin kaltaisten kirjastojen tarjoamat. Se tarjoaa myös perustyökaluvihjeitä ja selitteitä. Kaavioiden animaatiot ovat sisäänrakennettuja ja Eventbrite on tarjonnut kauniita värejä.

Viime kädessä Britecharts on loistava vaihtoehto kartoituksen perustoiminnoille. Kokoonpanoobjektit ovat melko yksinkertaisia, ja saat silti D3: n tehon kannen alla tarvitsematta tietää mitään itse D3: sta. Monet kehittäjät pitävät tätä vakuuttavampana vaihtoehtona kuin yksinkertaisesti luoda täydellinen kaavio alusta asti D3: lla.

miten video sijoitetaan suunnitteluun

Siinä keskitytään myös D3: n dataa sitoviin näkökohtiin, joten se on melko hyvä kaavioille, jotka on muutettava taustalla olevien tietojen muuttuessa. Vaikka käytettävissä olevissa tyypeissä on jonkin verran rajoituksia, sillä on myös peruskarttatyyppi, jota voit laajentaa luomaan uusia omia kaaviotyyppejä.

05. Sukellustyypit

Graafiset JavaScript-kehykset: Taucharts

Taucharts opettaa käyttäjille tietojen visualisoinnin perusteita(Kuvan luotto: Taucharts)

Sukellustyylit on toinen kartoitusratkaisu, joka kietoo D3: n monimutkaisuuden helposti toteutettavaan sovellusliittymään. Se on rakennettu käsitteistä Grafiikan kielioppi , kirjailija Leland Wilkinson. Se antaa ymmärrystä siitä, milloin ja miten mitä tietojen visualisointeja käytetään erilaisten tietojen näyttämiseen.

Laatikossa on viiva-, palkki-, hajontakaavio-, alue- ja viivakaaviot. Se kuitenkin toteuttaa Graafisen kieliopin käsitteet Taucharts-kieleksi, joka tarjoaa puitteet omien tietojen visualisointien toteuttamiseen.

Taucharts näyttää melko houkuttelevalta, ja se, että se on rakennettu D3: lle, tekee siitä houkuttelevan ja tehokkaan vaihtoehdon. On kuitenkin tunne, että kehittäjän on myös luettava Graafinen kielioppi voidakseen hyödyntää sen voimaa täysimääräisesti.

Toistaiseksi olemme käsitelleet vain kartoitusta ja tietojen visualisointia. Tämä johtuu siitä, että kaavioiden piirtäminen on yleisin käyttötapa selaimen grafiikkakirjastolle. Mutta se ei suinkaan ole ainoa. Toinen melko yleinen grafiikan skenaario on tietysti animaatio.

06. Kaksi.js

Graafiset JavaScript-kehykset: Two.js

Twos.js tulee omakseen käsitellessään 2D-animaatiota(Kuvan luotto: Two.js)

Ei pidä sekoittaa D3.js: ään, two.js on avoimen lähdekoodin JavaScript-kirjasto kaksiulotteiseen piirustukseen verkossa. Se pystyy myös kohdistamaan kaikki kolme grafiikkavaihtoehtoa nykyaikaisissa selaimissa: SVG, Canvas ja WebGL.

Two.js on jonkin verran samanlainen kuin D3, koska se keskittyy tiukasti piirtämiseen eikä sillä ole valmiiksi paistettuja kaavioita tai interaktiivisia rakenteita. Tämä tarkoittaa, että aivan kuten D3, tarvitset taustalla olevan käsityksen siitä, minkä tyyppistä piirustusta yrität tehdä ja miten se saavutetaan kahden.js: n tarjoamilla rakenteilla. Ympyrän piirtäminen on melko suoraviivaista. Yksityiskohtaisen animaation rakentaminen on toisaalta paljon monimutkaisempi yritys. Two.js vain tiivistää piirustusmuotojen ikäosan, ei kokonaispiirustusten ikäosaa.

Two.js seuraa myös kaikkia luomiasi esineitä, joten voit viitata niihin ja animoida ne milloin tahansa. Tämä on erityisen tärkeää, jos teet pelikehitystä ja sinulla on resursseja, joita on seurattava esimerkiksi törmäystunnistuksessa. Siinä on sisäänrakennettu animaatiosilmukka, joka vapauttaa sinut tarvitsematta huolehtia animaatiokehyksistä ja helpottaa sitomista animaatiokirjastoon, kuten GreenSock .

Vaikka two.js on tehokas, sen vapaamuotoinen luonne saattaa jättää jotkut kehittäjät epävarmaksi aloittamisesta ja se on pikemminkin kapea työkalu 2D-piirustuksiin ja animaatioihin. Toinen erinomainen vaihtoehto on pts.js.

07. Pts.js

Graafiset JavaScript-kehykset: Pts.js

cyber maanantai -tietokonenäytön tarjoukset 2016
Pts: n ennalta määrätty menetelmä on hyvä interaktiivisille visualisoinnille sekä animaatioille(Kuvan luotto: pts.js)

Pts on myös kaksiulotteinen piirustuskirjasto. Se eroaa kuitenkin pohjimmiltaan two.js: stä, koska siinä käytetään ennalta määrättyä metodologiaa kuinka piirustukset ja animaatiot tulisi koota: tila, muoto ja piste. Analogia, jonka kehittäjät käyttävät tämän selittämiseen, on fyysinen maailma. Avaruus on paperia. Muoto on lyijykynä. Ja kohta on ideasi.

Sen toteuttamisen kannalta avaruus on kangaselementti. Kun kangaselementti on luotu, voit lisätä siihen pelaajia. Nämä voivat olla joko toimintoja tai objekteja. Näiden toimintojen ja objektien on oltava avaruuden ennalta määritetyn käyttöliittymän mukaisia. Pts on rakennettu TypeScriptille, joten sinun ei tarvitse arvailla, mitkä ovat, koska käyttämäsi työkalut todennäköisesti ehdottavat automaattisen täydennyksen omaavia.

Esimerkiksi välilyönnillä on aloitusfunktio, jonka voit määrittää. Tämä on koodi, joka suoritetaan, kun tila on valmis. Näissä toiminnoissa piirtäminen avaruuteen tapahtuu lomake-objektilla. Lomakohteet voivat piirtää minkä tahansa muodon, ja kohta on näiden kohtien sijainti avaruudessa.

Pts näyttää olevan ensisijaisesti suunniteltu interaktiivisten visualisointien ja animaatioiden luomiseen. Sen toteutus on mielenkiintoista, vaikkakin varsin abstraktia. Kehittäjillä voi olla vaikea ymmärtää Pts: n edellyttämää tilaa, muotoa, pistettä -mallia. Tämä on toinen henkinen este, joka on poistettava yksinkertaisesti muotojen piirtämisen ja animoinnin lisäksi.

08. Anime.js

Graafiset JavaScript-kehykset: Anime.js

Anime.js toimii porrastetulla järjestelmällä, joka auttaa animaatioiden ajoituksessa(Kuvan luotto: Anime.js)

Anime.js on pääasiassa animaatiokirjasto. Siinä on sisäänrakennettu porrastusjärjestelmä, joka tekee monimutkaisemmista animaatioista yksinkertaisempia, jos ne ovat päällekkäisiä tai riippuvat toisen suorituksen esiintymisestä. On tavallista, että animaatiot ajoitetaan yhteen tai ne käynnistävät toiset. Porrastava järjestelmä tekee tämän helpommaksi toteutettavaksi, koska se auttaa vähentämään joitain yleiskustannuksia seuraamaan kaikkea sivulla tapahtuvaa ja määrittämään animaation ajoitukset manuaalisesti.

Toisin kuin toistaiseksi piirretyt piirustuskirjastot, anime.js: llä ei ole sovellusliittymiä muotojen piirtämiseen. Sen sijaan se olettaa, että muotosi ovat jo olemassa ja haluat animoida ne. Tämä tekee siitä erinomaisen käytettäväksi kirjastojen, kuten two.js, kanssa. Anime.js tukee CSS-ominaisuuksien, SVG-, DOM- ja jopa JavaScript-objektien animointia.

Anime.js on hyvä vaihtoehto animoida olemassa olevat piirustukset ja se todennäköisesti yhdistetään toiseen kirjastoon. Sitä tulisi pitää vaihtoehtona GreenSockin kaltaiselle eikä korvata muita piirustuskirjastoja. Anime.js: ää käytetään todennäköisesti monimutkaisempiin animaatioihin, joiden on tapahduttava osana interaktiivista verkkokokemusta.

09. PixiJS

Graafiset JavaScript-kehykset: PixiJS

PixiJS on 2D-piirustuskirjasto, jonka sovellusliittymä on rakennettu ja käytetty Adobe Flashissa, joten se on joillekin tuttu(Kuvan luotto: PixiJS)

PixiJS on toinen 2D-piirustuskirjasto. Sen päätarkoitus on helpottaa 2D-grafiikan näyttämistä, animointia ja hallintaa, joten voit keskittyä kokemuksen tai pelin rakentamiseen huolehtimatta siitä, että pysyt kaikilla piirtämilläsi ja animoiduilla muodoilla ja kuvilla. Jos rakennat peliä, varat (tai spritit) voivat nopeasti ilmestyä numeroon, jota on vaikea hallita. (Paljon säästettäviä varoja? Pidä ne turvassa luotettavimpana pilvitallennus .)

PixiJS: n pakottava näkökohta on, että se tulee API: sta, joka on rakennettu ja käytetty laajasti Adobe Flashissa. Tämä on valtava etu Flash-taustasta tuleville kehittäjille, koska kokemus tuntuu tutulta. Se on myös samanlainen kuin Applen SpriteKit.

PixiJS ei ole pelimoottori, joten jos käytät sitä peleihin, et löydä työkaluja tai fysiikkaa esimerkiksi törmäysten havaitsemiseen. Sinun täytyy kääriä se todelliseen pelimoottoriin tai itse rakentamaasi pelimoottoriin, jos tunnet pelottomuutta.

PixiJS hahmontaa WebGL: ään. WebGL on moottori GPU-nopeutetun grafiikan tekemiseen selaimessa. Tämä tarkoittaa sitä, että siitä on hyötyä animaatioille ja grafiikoille, jotka käyttävät paljon järjestelmäresursseja ja jotka toimisivat parhaiten, kun ne renderöidään erillisellä grafiikkaprosessoriyksiköllä. Se perustuu OpenGL: ään, joka on työpöydän vastine pelien ja 3D-grafiikkaohjelmien suorittamiseen. Hupun alla WebGL käyttää HTML-kangaselementtiä.

Vakavat grafiikkakehittäjät arvostavat WebGL: n voimaa. Nämä kokemukset voivat kuitenkin heikentyä pienitehoisilla koneilla. Vaikka kirjoitin tämän artikkelin yhteen, monet PixiJS-demot aiheuttivat huomattavan hidastumisen järjestelmässäni, jolla ei ole monimutkaisiin grafiikoihin ja animaatioihin tarvittavia korkeamman tason ominaisuuksia.

10. Zdog

Graafiset JavaScript-kehykset: Zdog

kuinka tehdä paperinen kasvonaamio
Zdog tarjoaa 3D-ilmeen 2D-piirustusten avulla(Kuvan luotto: Zdog)

Suurin osa piirustuskoneista, joista olemme toistaiseksi keskustelleet, ovat kaksiulotteisia. Tämä johtuu siitä, että suurin osa vuorovaikutuksistamme näytön kanssa tapahtuu kahdessa ulottuvuudessa - X- ja Y-akseleita pitkin. Kolmiulotteiset piirustukset ja animaatiot ovat yleensä paljon monimutkaisempia.

Zdog on kirjasto pseudo- 3D-kokemusten rakentamiseen, jotka ovat enimmäkseen tasaisia. Sitä kutsutaan pseudo-3D: ksi, koska vaikka se käsittelee piirustuksensa 3D-tilassa, se tekee niistä tasaisia ​​muotoja. Se käyttää visuaalisia temppuja saadakseen 2D-objektit näyttämään 3D-muodossa. Vaikutus on todella mielenkiintoinen. Se näyttää täysin kolmiulotteiselta, kun animaatiota katsotaan, mutta kun kuvakaappaus otetaan, se on selvästi tasainen kuva. Tässä on yksi esimerkki: pyörivä Mario-demo.

Koska renderöinnit ovat 2D-muotoja, Zdog voi tehdä joko Canvas- tai SVG-tiedostoja. Zdog on fantastinen vaihtoehto 3D-animaatioihin yksinkertaisilla esineillä - varsinkin jos kyseisissä kohteissa on tasaisen suunnittelun näkökohtia. Kehittäjät, jotka haluavat 3D-animaatiota, mutta eivät halua juuttua 3D-grafiikkamoottoreiden monimutkaiseen maailmaan, saattavat löytää Zdogilta sopivan ratkaisun. Lisäksi keskittymällä tasaisiin kuviin Zdogilla on paljon yksinkertaisempi käyttöliittymä ja paljon parempi suorituskyky kuin mitä vaatisi monimutkaisten graafisten kuvien 3D-renderointi.

Siinä ei ole pelimoottorin elementtejä, kuten omaisuuden hallintaa ja törmäysten havaitsemista, joten se olisi käärittävä pelimoottoriin tai nämä näkökohdat tulisi hoitaa manuaalisesti. Tämä tarkoittaa, että Zdog on todennäköisesti paras eristetyille 3D-animaatioille laskeutumissivuilla.

11. Snap.svg

Graafiset JavaScript-kehykset: Snap.svg

Snap.svg: llä on sovellusliittymä, joka valitsee SVG-elementin, jonka avulla voit piirtää siihen elementtejä(Kuvan luotto: Snap.SVG)

Snap.svg sanoo, että se tekee 'SVG-resurssien kanssa työskentelemisestä yhtä helppoa kuin jQuery tekee työskentelyn DOM: n kanssa'. Saatat pystyä kertomaan jQuery-viitteestä, että Snap.svg on vähän vanhempi, mutta sen sovellusliittymä tuntuu yhtä helpolta kuin jQuery, ja se on melko voimakas asia.

Snap.svg: llä on puhdas ja yksinkertainen sovellusliittymä SVG-pääelementin valitsemiseen ja elementtien piirtämiseen sitten. Se sopii parhaiten kehittäjille, jotka etsivät nopeaa ratkaisua SVG: n animoimiseksi. Se on erityisen hyvä vaihtoehto, jos animaatiot ovat yksinkertaisia ​​ja sinulla ei ole paljon tietoa animaatiomoottoreista. Vaikka se on jonkin verran päivätty, sitä ei todellakaan pidä unohtaa, koska se voi olla helpoin tapa työskennellä SVG: n kanssa.

Snap.svg on virkistävä yksinkertaisuudessaan. Se ulottuu SVG: n valitsemiseen ja työskentelyyn eikä yritä olla enemmän kuin se. Snap voidaan yhdistää muiden grafiikkakirjastojen kanssa piirustusta ja renderointia varten SVG: iin. On myös hyvä, jos sinulla on olemassa SVG: itä ja haluat helpon tavan työskennellä heidän kanssaan.

Tämä artikkeli julkaistiin alun perin verkkolehdessä.

Aiheeseen liittyvät artikkelit: