Met GraphicsJS maakt u elke webafbeeldingen die u maar kunt bedenken
Aangepaste JavaScript-API's zijn de toekomst van het web. De open source beweging gekoppeld aan SVG-afbeeldingen hebben de mogelijkheden voor webontwikkelaars opengeblazen.
GraphicsJS is een gratis open source-bibliotheek en JS API voor aangepaste afbeeldingen maken in webbrowsers. Het kan worden gebruikt als een visualisatie tool voor het weergeven van gegevens, of het kan worden gebruikt voor het maken van coole dingen gewoon om te pronken.
Op de startpagina vindt u een groot deel van de demo's gemaakt met GraphicsJS. En deze voorbeelden krabben slechts de oppervlakte van wat mogelijk is.
De bibliotheek gebruikt zijn eigen virtuele DOM wat een abstractie is van de DOM van de browser. Dit is enigszins vergelijkbaar met de virtuele DOM van React en het wordt op een vergelijkbare manier gebruikt.
Omdat deze bibliotheek een kloon van de DOM gebruikt, is dit ook het geval heeft echte HTML-elementen nodig om aan te werken. Dat is waarom het gebruikt SVG / VML in plaats van ingesloten objecten in het HTML5-canvas.
Deze grafische engine was oorspronkelijk ingebouwd in de AnyChart-bibliotheek. Vanaf daar was het tweaked en open source als zijn eigen JS API.
GraphicsJS ondersteunt alle belangrijke browsers, zelfs daterend uit IE6 en Chrome 1.0.
Alle broncode is beschikbaar in de GitHub-repro, waar je een exemplaar kunt downloaden en rondneuzen als je tijd hebt. Maar ik denk dat de beste manier om te leren is om eerst te duiken.
Je zou kunnen bladeren door de API-documenten maar ik vind deze documenten meestal overbodig. Documenten kunnen het best worden gebruikt wanneer dat nodig is zoek een specifieke methode of API-oproep verwijzen.
Als je net begonnen bent, kan dat bezoek de speeltuin gehost op AnyChart's website. Dit is een leuke plaats om te vinden werkende codevoorbeelden om de syntaxis op te splitsen.
Of, als u echt wilt beginnen met de eerste plaats dan de Grafische JS-startgids kunnen helpen. Dit lijkt meer op de “officieel” documentatie zodat het je hand kan houden voor een soepeler leercurve vergeleken met de API-documenten.
Hoe dan ook, ik ben er dol op dat GraphicsJS open source is en is uitgebracht in de community van ontwikkelaars. Het is alles behalve een perfecte bibliotheek, maar het is een van de beste die we hebben zelf gemaakte SVG-afbeeldingen maken.
En om je versnellingen te laten draaien, hieronder zie je een voorbeeld van wat je kunt bouwen met Graphics.js.
