GraphicsJS Lar deg lage en hvilken som helst webgrafikk du kan forestille deg

Egendefinerte JavaScript-APIer er fremtiden for nettet. De åpen kildebevegelse kombinert med SVG-grafikk har blåst åpne mulighetene for webutviklere.

GraphicsJS er et gratis open source bibliotek og JS API for bygge tilpasset grafikk i nettlesere. Den kan brukes som en visualiseringsverktøy for grafering av data, eller det kan brukes til å lage kule ting bare for å vise seg.

På hjemmesiden finner du en stor del av demoer opprettet med GraphicsJS. Og disse eksemplene bare skrape overflaten av det som er mulig.

Biblioteket bruker sin egen virtuelle DOM som er en abstraksjon av nettleserens DOM. Dette er noe ligner Reacts virtuelle DOM og den brukes på en lignende måte.

Siden dette biblioteket bruker en klon av DOM, er det også trenger ekte HTML-elementer å jobbe med. Det er derfor det bruker SVG / VML snarere enn innebygde objekter i HTML5-lerretet.

Denne grafikkmotoren var opprinnelig bygget inn i AnyChart-biblioteket. Derfra var det forskjøvet og åpnes som sin egen JS API.

GraphicsJS støtter alle de store nettleserne, til og med dateres tilbake til IE6 og Chrome 1.0.

Alle kildekoden er tilgjengelig i GitHub repo hvor du kan laste ned en kopi og peke rundt hvis du har tid. Men jeg tror at den beste måten å lære er å dykke i hodet først.

Du kan bla gjennom API-dokumenter men jeg finner vanligvis disse dokumentene overflødige. Dokumenter brukes best når du trenger det finn en bestemt metode eller API-samtale for referanse.

Hvis du bare er i gang kan du besøk lekeplassen vert på AnyCharts nettsted. Dette er et fint sted å finne arbeidskodeprøver å bryte ned syntaksen.

Eller, hvis du virkelig vil starte med firkantet en da, så GraphicsJS startveiledning kan hjelpe. Dette er mer som “offisielt” dokumentasjon slik at det vil holde hånden din for en jevnere læringskurve sammenlignet med API-dokumentene.

Uansett, jeg elsker at GraphicsJS ble åpnet og gitt ut i utviklerfellesskapet. Det er langt fra et perfekt bibliotek, men det er et av de beste vi har for skape tilpasset SVG-grafikk fra grunnen av.

Og for å få girene dine å snu, kan du se et eksempel på hva du kan bygge med Graphics.js.