GraphicsJS n avulla voit luoda minkä tahansa Web-grafiikan, jonka voit kuvitella

Mukautetut JavaScript-sovellusliittymät ovat webin tulevaisuus. avoimen lähdekoodin liike yhdistettynä SVG-grafiikka ovat avanneet mahdollisuuksia web-kehittäjille.

GraphicsJS on ilmainen avoimen lähdekoodin kirjasto ja JS API for mukautetun grafiikan rakentaminen selaimissa. Sitä voidaan käyttää a visualisointityökalu kuvaa, tai sitä voidaan käyttää hyvien juttujen tekemiseen vain näyttää.

Kotisivulla on a suuri osa demoista luotu GraphicsJS: llä. Ja nämä esimerkit vain naarmuttavat mahdollisen pinnan.

Kirjasto käyttää omaa virtuaalista DOM: ia joka on selaimen DOM-abstraktio. Tämä on hieman samanlainen kuin Reactin virtuaalinen DOM ja sitä käytetään samalla tavalla.

Koska tämä kirjasto käyttää DOM-kloonia, se on myös tarvitsee todellisia HTML-elementtejä työskennellä jonkin parissa. Siksi se käyttää SVG / VML: ää HTML5-kankaalle ei sisälly upotettuja kohteita.

Tämä grafiikkamoottori oli alunperin rakennettu AnyChart-kirjastoon. Sieltä se oli Tweaked ja avoimen lähdekoodin oma JS API.

GraphicsJS tukee kaikkia tärkeimpiä selaimia, jopa vuodelta IE6 ja Chrome 1.0.

Kaikki lähdekoodit on käytettävissä GitHub repossa, jossa voit ladata kopion ja kiertää, jos sinulla on aikaa. Mutta mielestäni paras tapa oppia on sukeltaa päähän.

Voit selata API-asiakirjat mutta yleensä nämä asiakirjat ovat tarpeettomia. Dokumentteja käytetään parhaiten, kun tarvitset löytää tietty menetelmä tai API-puhelu viitataan.

Jos olet juuri aloittamassa, voit käy leikkikentällä AnyChartin verkkosivustolla. Tämä on mukava paikka löytää työkoodinäytteet hajottaa syntaksi.

Tai jos haluat todella aloittaa neliön, sitten GraphicsJS -aloitusopas voi auttaa. Tämä on enemmän kuin “virallinen” dokumentaatio, joten se pitää kädet a pehmeämpi oppimiskäyrä verrattuna API-asiakirjoihin.

Joko niin, rakastan sitä, että GraphicsJS oli avoin ja julkaistu kehittäjäyhteisöön. Se on kaukana täydellisestä kirjastosta, mutta se on yksi parhaista luoda mukautettuja SVG-grafiikkaa tyhjästä.

Jos haluat vaihtaa vaihteesi, näet alla olevan esimerkin siitä, mitä voit rakentaa Graphics.js: n avulla.