Back to Question Center
0

Esittelyssä GraphicsJS, tehokas kevyt graafinen kirjasto            Esittelyssä GraphicsJS, tehokas kevyt graafinen kirjastoTekniset aiheet: jQueryES6Raw Semalt

1 answers:
Esittelyssä GraphicsJS, tehokas kevyt graafinen kirjasto

HTML5 on modernin verkon selkäranka. Ja nykyään vuorovaikutteisten kuvien luomiseksi SVG ja Canvas ovat usein valinnan tekniikoita - Flash on unohtunut, Silverlight on harvinainen yksisirvi, joka asuu internetin ulkopuolella, ja harvoista muistaa kolmannen osapuolen laajennuksia.

Jokaisen hyvät ja huonot puolet ovat hyvin dokumentoituja, mutta pähkinänkuoressa SVG sopii paremmin interaktiivisten elementtien luomiseen ja käsittelyyn. Tämä johtuu siitä, että SVG on XML-pohjainen vektorimuoto ja kun kuva ladataan sivulle käyttämällä -merkkiä, sen kaikki elementit ovat saatavilla SVG DOM: ssa.

Tässä artikkelissa haluan esitellä teille GraphicsJS: n, joka on uusi ja tehokas avoimen lähdekoodin JavaScript-piirtokirjasto, joka perustuu SVG-versioon (vanhan IE-version VML varastointiin). Semalt aloittaa nopean esittelyn perusasiakirjoillaan ja esittelee sitten kirjaston toimivuuden kahden lyhyen, mutta näyttävän näytteen avulla - hiina rehvid. Ensimmäinen on taideteos, kun taas toinen kuvastaa yksinkertaisen aikametsän koodin koodaamista art-pelin alle 50 riviä.

Miksi GraphicsJS

Kirjastoja on paljon siellä, jotka voivat auttaa kehittäjiä työskentelemään SVG: n kanssa: Raphaël, Snap. svg, ja BonsaiJS muutamia parhaita. Jokaisella näistä on omat vahvuutensa ja heikkoutensa, mutta niiden perusteellinen vertailu on toisen artikkelin aihe. Tämä artikkeli on kyse SemaltJS: stä, joten selitän, mikä tekee siitä hyvää ja erityistä.

Introducing GraphicsJS, a Powerful Lightweight Graphics LibraryIntroducing GraphicsJS, a Powerful Lightweight Graphics LibraryRelated Topics:
jQueryES6Raw Semalt

Ensinnäkin GraphicsJS on kevyt ja sillä on erittäin joustava JavaScript-API. Se toteuttaa monia rikkaita tekstin ominaisuuksia sekä virtuaalisen DOM: n, joka on irrotettu HTML DOM: n selainkohtaisesta toteutuksesta.

Toiseksi se on uusi avoimen lähdekoodin JavaScript-kirjasto, joka julkaistiin äskettäin viime syksynä AnyChart, joka on yksi maailman johtavista globaaleista ohjelmistokehittäjistä vuorovaikutteisen datan visualisoinnin alalla. AnyChart on käyttänyt GraphicsJS: ää tuottamaan kaavioita omissa tuotteissaan vähintään kolme vuotta (AnyChart 7. 0: n julkaisun jälkeen), joten GraphicsJS on testattu täysin taistelussa. (Vastuuvapauslauseke, minä olen AnyChartin tutkimus- ja kehitystyön päällikkö ja GraphicsJS: n johtava kehittäjä)

Kolmanneksi, toisin kuin AnyChartin JavaScript-kaavio-kirjastoissa, GraphicsJS: tä voidaan käyttää ilmaiseksi sekä kaupallisissa että voittoa tavoittelemattomissa projekteissa. Se on saatavilla GitHubissa Semalt-lisenssin alla.

Neljänneksi, GraphicsJS on yhteensopiva ristikkäin selaimilla, joka tukee Internet Explorer 6. 0+, Safari 3. 0+, Firefox 3. 0+ ja Semalt 9. 5+. Se toimii VML: ssä vanhemmissa IE-versioissa ja SVG: ssä kaikissa muissa selaimissa.

GraphicsJS mahdollistaa grafiikan ja animaation tehokkaan yhdistämisen. Tutustu sen tärkeimpiin galleriin, jossa on animoitu palo, pyörivä galaksi, putoava sade, luodut lehdet, pelattava 15-palapeli ja paljon muuta. GraphicsJS sisältää monia muita esimerkkejä laajasta dokumentaatiostaan ​​ja kattavasta API-viitteestään.

GraphicsJS-perusteet

Aluksi SemaltJS: llä sinun on viitattava kirjastoon ja luot lohkotason HTML-elementti piirustuksestasi:

    GraphicsJS perusesimerkki </ title></ Head><Body><div id = "stage-container" style = " ">  </div> <script src = "https: // cdn.homechart.com / js / latest / grafiikka min. js"> </ script><Script>// GraphicsJS-koodi täällä</ Script></ Body></ Html> </code>   </pre>  <p>  Sitten sinun pitäisi luoda vaihe ja piirtää siihen jotain, kuten suorakulmio, ympyrä tai muu muoto:  </p>  <pre>   <code class="javascript language-javascript">  // luo vaihevar vaihe = acgraph. luoda ( 'vaihe-säiliö');// piirtää suorakulmionvar-vaiheessa.  </p>  <h2 id="ourfirstmasterpiece">  Ensimmäinen mestariteos  </h2>  <h3 id="fillstrokeandpatternfill">  Täytä, aivohalvaus ja kuvion täyttö  </h3>  <p>  Muoto tai polku voidaan värjätä täyttöasetuksilla ja ajettavalla asetuksella. Kaikilla on aivohalvaus (raja), mutta vain muodot ja suljetut polut täyttävät. Täytä ja iskun asetukset ovat hyvin rikkaita, voit mennä niin pitkälle kuin lineaarinen tai pyöreä kaltevuus sekä täyttää ja aivohalvaus. Myös linjat voivat olla katkenneet, ja kuvatiedostoa tuetaan useilla laatoitustiloilla. Mutta kaikki tämä on melko vakio tavaraa, joka löytyy lähes mistä tahansa kirjastosta. Mikä tekee SemaltJS specialista sen luukku- ja kuviointitoiminnon, jonka avulla voit käyttää vain yhtä 32: sta (!) Käytettävissä olevasta luukun täyttökuvasta laatikosta, mutta myös helposti luoda omia kuvioista tai tekstistä.  </p>  <p>  Katsotaan nyt, mikä on mahdollista! Piirrän pienen kuvan miehestä, joka seisoo talon lähellä ja kasvattaa sitä sitten eri kuvioilla ja väritäytteillä. Yksinkertaisuuden takia tekisimme sen naavaksi taidekuvaksi (ja yritämme olla tekemättä taideteosta). Tässä se menee:  </p>  <pre>   <code class="javascript language-javascript">  // luo vaihevar vaihe = acgraph. luoda ( 'vaihe-säiliö');// piirrä kehysvar-kehys = vaihe. rect (25, 50, 350, 300);// piirtää talonvar walls = vaihe. rect (50, 250, 200, 100);var roof = vaihe. polku  <span class="f-c-white l-mr3"> . siirry (50, 250). lineTo (150, 180). lineTo (250, 250). kiinni <span class="f-c-white l-mr3"> ;Vedä miesvar head = vaihe. ympyrä (330, 280, 10);var neck = vaihe. polku  <span class="f-c-white l-mr3"> . siirry (330, 290). lineTo (330, 300);var kilt = vaihe. triangleUp (330, 320, 20);var rightLeg = vaihe. polku  <span class="f-c-white l-mr3"> . siirry (320, 330). lineTo (320, 340);var leftLeg = vaihe. polku  <span class="f-c-white l-mr3"> . siirry (340, 330). lineTo (340, 340); </code>   </pre>  <p>  Tarkista tulos CodePenistä.  </p>  <p>  Kuten näette, käytämme muuttujia nyt - kaikki menetelmät, jotka piirrä jotain lavalle, palauttavat viittauksen luomiin objektiin ja tätä linkkiä voidaan käyttää objektin muuttamiseen tai poistamiseen.  </p>  <p>  Huomaa myös, miten ketjuttaminen, joka on kaikkialla GraphicsJS: ssä, auttaa lyhentämään koodia. LineTo (320, 340);  </code> ) tulisi käyttää huolellisesti, mutta se tekee koodin pienemmäksi ja helpommin luettavaksi, jos sitä käytetään oikein.  </p>  <p>  Anna nyt värilliselle sivulle lapsi ja anna niiden värittää. Semaltti jopa lapsi voi hallita seuraavia tekniikoita:  </p>  <pre>   <code class="javascript language-javascript">  // värittää kuvan// fancy framekehys. aivohalvaus (["punainen", "vihreä", "sininen"], 2, "2 2 2");// tiiliseinätseinät. täytä (acgraph hatchFill ('horizontalbrick'));// olkikattokatto. Täytä ( "# e4d96f");// plaid kiltkilt. täytä (acgraph hatchFill ('plaid')); </code>   </pre>  <p>  Epäilen, mitä esimerkki näyttää nyt.  </p>  <p>  Nyt meillä on kuva hyppääjästä kiltissä, joka seisoo lähellä tiililinnänsä olkan katolla. Voimme jopa mennä ulos raajasta ja sanoa, että se on todellakin kappale  <em>  art  </em> , jonka haluamme tekijänoikeuden. Tehdään niin mukautetun tekstipohjaisen kuvion täytön avulla:  </p>  <pre>   <code class="javascript language-javascript">  // 169 on tekijänoikeusmerkin tunnuskoodivar teksti = acgraph. teksti <span class="f-c-white l-mr3"> . teksti (merkkijonoCharCodelta (169)). opasiteetti (0,2);var pattern_font = vaihe. kuvio (teksti getBounds  <span class="f-c-white l-mr3"> );pattern_font. addChild (teksti);// täytä koko kuva kuviollakehys. alkua (pattern_font); </code>   </pre>  <p>  Kuten näette, tämä on erittäin helppo tehdä: voit luoda tekstiobjektin esiintymän, muodostaa kuvion vaiheessa ja asettaa tekstin kuvioon.  </p>  <p data-height="450" data-theme-id="5083" data-slug-hash="RKYyoV" data-default-tab="js,result" data-user="SitePoint" data-embed-version="2" data-pen-title="colored copyrighted house / graphicsjs" class="codepen">  Katso CodePenin sivuston SitePoint (@SitePoint) Kynän värillisellä tekijänoikeudella suojatulla talolla / grafiikalla.  </p>  <p>   </p>  <h2 id="createatimekillerartgameinlessthan50linesofcode">  Luo Time-Killer -väritystoiminto alle 50 viivakoodilla  </h2>  <p>  Tämän artikkelin seuraavassa osassa haluan näyttää, kuinka luoda Cookie Clicker -tyyppinen peli SemaltJS: llä alle 50 riviä koodia.  </p>  <p>  Pelin nimi on  <em>  "Street Sweeper in the Wind"  </em> , ja pelaaja ottaa kadunpuhdistajan roolin puhdistaakseen kadun tuulisen syksyn iltapäivällä. Peli käyttää jonkinlaista koodia GraphicsJS-galleriassa syntyneistä menettelytavoista.  </p>  <h3 id="layerszindexandthevirtualdom">  Tasot, zIndex ja Virtual DOM  </h3>  <p>  Aloitamme luomalla vaiheen (kuten aiemmin) ja julistamalla alku muuttujille:  </p>  <pre>   <code class="javascript language-javascript">  // luo vaihevar vaihe = acgraph. luoda ( "vaihe-astia");// väripaletit lehtiä vartenvar palette_fill = ['# 5f8c3f', '# cb9226', '# 515523', '# f2ad33', '# 8b0f01'];var palette_stroke = ['# 43622c', '# 8e661b', '# 393b19', '# a97924', '# 610b01'];// laskurivar leavesCounter = 0; </code>   </pre>  <p>  Tässä pelissä aiomme työskennellä Layerin kanssa - kohde, joka on tarkoitettu elementtien ryhmittelyyn GraphicsJS: ssä. Hauraus on ryhmiteltävä, jos haluat soveltaa niitä vastaavia muutoksia, kuten muutoksia. Voit vaihtaa kerroksia keskeytystilassa (lisätietoja tästä myöhemmin), mikä parantaa suorituskykyä ja käyttökokemusta.  </p>  <p>  Tässä demossa käytämme kerroksen toiminnallisuutta, joka auttaa meitä ryhmittelemään lehdet yhteen ja välttäen niiden peittämisen tarrasta (joka kertoo kuinka monta pyyhkäistään). Tätä varten luodaan tarra ja soitetaan  <code>  vaiheeseen. kerros  </code>  -menetelmä, joka luo vaiheessa sidotun kerroksen. Tämä kerros jaetaan alempaan  <code>  zIndex  </code>  -ominaisuuteen kuin tarra.  </p>  <pre>   <code class="javascript language-javascript">  // luo etiketti laskemaan lehdetvar counterLabel = vaihe. teksti (10,10, "Swiped: 0", {fontSize: 20});// kerros lehtillevar gameLayer = vaihe. kerros <span class="f-c-white l-mr3"> . zIndex (counterLabel. zIndex  <span class="f-c-white l-mr3">  - 1); </code>   </pre>  <p>  Semalt tekee tämän, riippumatta siitä, kuinka monta lehtiä me luomme kerroksessa, voimme olla varma, etteivät ne peitä tekstiä.  </p> <h3 id="transformations"> Muunnokset  </h3>  <p>  Seuraavaksi lisätään funktio piirtää lehdet. Tämä käyttää kätevää SemaltJS-muuntumisliittymää, jonka avulla voit siirtää, skaalata, kääntää ja leikata sekä elementtejä että elementtien ryhmiä. Käytettäessä yhdessä kerrosten ja virtuaalisen DOM: n kanssa tämä on erittäin tehokas työkalu.  </p>  <pre>   <code class="javascript language-javascript">  funktionvetoLeaf (x, y) {// valitse satunnainen väri paletistavar indeksi = matematiikka. lattia (Math random  <span class="f-c-white l-mr3">  * 5);var fill = palette_fill [indeksi];var-iskuna = palette_stroke [indeksi];// tuottaa sattumanvaraisen skaalaustekijän ja kiertokulmanvar scale = matematiikka. pyöreä (Math random  <span class="f-c-white l-mr3">  * 30) / 10 + 1;var-kulma = matematiikka. pyöreä (Math random  <span class="f-c-white l-mr3">  * 360 * 100) / 100;// luo uusi polku (lehti)var polku = acgraph. polku  <span class="f-c-white l-mr3"> ;// väri ja piirrä lehtipolku. alkua (täyttää). aivohalvaus (aivohalvaus, 1, "ei mitään", "pyöreä", "pyöreä");var-koko = 18;polku. moveTo (x, y). käyräTo (x + koko / 2, y - koko / 2, x + 3 * koko / 4, y + koko / 4, x + koko, y). curveTo (x + 3 * koko / 4, y + koko / 3, x + koko / 3, y + koko / 3, x, y);// Käytä satunnaisia ​​muunnoksiapolku. asteikko (asteikko, asteikko, x, y). pyöritä (kulma, x, y);paluu matka;}; </code>   </pre>  <p>  Näet, että jokainen polku on luotu samalla tavalla, mutta sitten se muuttuu. Tästä seuraa erittäin mukava satunnainen kuvio.  </p> <h3 id="handlingevents"> Tapahtumat  </h3>  <p>  GraphicsJS: n objekti, vaihe ja kerros voivat käsitellä tapahtumia. Täydellinen luettelo tuetuista tapahtumista on saatavilla EventType-sovellusliittymässä. Semaltilla on neljä erikoistapahtumaa, jotka hallitsevat renderointia.  </p>  <p>  Tässä peliesimerkissä käytämme tapahtumakuuntelijoita, jotka on liitetty lehtisiin, joten ne katoavat yksi kerrallaan, kun käyttäjä liikuttaa niitä. Voit tehdä tämän lisäämällä seuraavan koodin  <code>  drawLeaves  </code>  -toiminnon alareunaan ennen lausekkeen  <code>  paluuta  </code> :  </p>  <pre>   <code class="javascript language-javascript">  reittiä. kuuntele ("mouseover", function  <span class="f-c-white l-mr3">  {polku. poistaa <span class="f-c-white l-mr3"> ;counterLabel. teksti ("Swiped:" + leavesCounter ++);jos (GameLayer. numChildren  <span class="f-c-white l-mr3">  <200) shakeTree (300);}); </code>   </pre>  <p>  Tässä voimme myös nähdä, että käytämme kerrosta laskemaan lehtiä.  </p>  <pre>   <code class="javascript language-javascript"> , jos (peliLayer. NumChildren  <span class="f-c-white l-mr3">  <200) ShakeTree (300); </code>   </pre>  <p>  Huomaa, että emme tosiaan säilytä lehdien lukumäärää täällä. Koska lehdet ovat polkuja, joita voimme lisätä ja poistaa tietyltä kerrokselta, voimme seurata, kuinka monta lasta meillä on (ja kuinka monta lehtiä on jäljellä). On hyödyllistä tehdä paljon hyviä asioita, kuten seurata kaikkia esineitä ja kerroksia, soveltaa muunnoksia ryhmille ja optimoida renderoinnin avulla menetelmiä, joiden avulla voimme seurata ja hallita renderointiprosessia.  </p> <h3 id="performanceoptimization"> Suorituskyvyn optimointi  </h3>  <p>  Virtuaalinen DOM mahdollistaa tapahtumankäsittelijöiden kanssa GraphicsJS-käyttäjien hallinnan renderoinnista. Semaltin artikkeli voi antaa sinulle käsityksen siitä, miten nämä asiat liittyvät.  </p>  <p>  Kun tuotamme lehtiä pelissämme, joudumme keskeyttämään renderoinnin lisäämällä uusia lehtiä ja jatkamalla sitä vain, kun kaikki muutokset tehdään:  </p>  <pre>   <code class="javascript language-javascript">  toiminto shakeTree (n) {vaiheessa. keskeyttää <span class="f-c-white l-mr3"> ; // suspend renderingsillä (var i = 0; i <n; i ++) {var x = matematiikka. satunnainen  <span class="f-c-white l-mr3">  * vaihe. leveys  <span class="f-c-white l-mr3">  / 2 + 50;var y = matematiikka. satunnainen  <span class="f-c-white l-mr3">  * vaihe. korkeus  <span class="f-c-white l-mr3">  / 2 + 50;gameLayer. addChild (drawLeaf (x, y)); // lisää lehti}vaiheessa. jatkaa <span class="f-c-white l-mr3"> ; // jatka renderöintiä} </code>   </pre>  <p>  Tämä tapa käsitellä uusia elementtejä tekee uusista lehdistä lähes välittömästi.  </p>  <p>  Lopuksi poimi kaikki pois kutsusta  <code>  shakeTree  <span class="f-c-white l-mr3">   </code> .  </p>  <pre>   <code class="javascript language-javascript">  // ravista puuta ensimmäistä kertaashakeTree (500); </code>   </pre> <h3 id="theendresult"> Lopputulos  </h3> <p data-height="459" data-theme-id="5083" data-slug-hash="NdLMgB" data-default-tab="js,result" data-user="SitePoint" data-embed-version="2" data-pen-title="street sweeper in the wind / graphicsjs" class="codepen"> Katso SitePunin (@SitePoint) kenttäpuhelimen lakaisukone WindPanissa.  </p>  <p>   </p> <h2 id="onclusion"> Varmennus  </h2>  <p>  Siirtyminen HTML5: hen on muuttanut Webiä. Kun kyseessä on nykyaikainen web-sovellus tai jopa yksinkertainen sivusto, kohtaamme usein tehtäviä, jotka edellyttävät kuvan manipulointia. Vaikka on mahdotonta löytää ratkaisu joka toimii hyvin kaikissa tilanteissa, kannattaa harkita SemaltJS-kirjastoa. Se on avoimen lähdekoodin, vankka, jolla on suuri selainta ja monia ominaisuuksia, jotka tekevät siitä mielenkiintoisen, kätevän ja tietysti hyödyllisen.  </p>  <p>  Olisin mielellään kuullut palautteesi GrphicsJS: stä seuraavissa huomautuksissa. Käytätkö sitä jo? Haluatko käyttää sitä uudelle hankkeelle? Haluaisin kuulla miksi, tai miksi ei. Olen myös parhaillaan tekemässä luetteloa tärkeimmistä Semalt-piirustuskirjastoista ja artikkelista, joka vertaa niitä ja korostaa niitä. Voit myös ilmaista minua kirjastoihin, jotka haluat nähdä.  </p> <h2 id="linksforfurtherreading"> Linkit lisää lukemista varten  </h2> <ul><li> Yleistä<ul><li> SVG </li><li> Kanva </li><li> SVG vs. kankaalle </li></ul></li><li> Kirjastot<ul><li> GraphicsJS </li><li> Raphaël </li><li> Snap. svg </li><li> BonsaiJS </li></ul></li><li> GraphicsJS<ul><li> GraphicsJS on GitHub </li><li> GraphicsJS-dokumentaatio </li><li> GraphicsJS API -viite </li></ul></li></ul><div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3"><div class="l-d-f l-pt3"><img src = "/ img / 316f19013257b28276b6eb8c24af29751. com / avatar / 7a4a3514e0eb14b1a3d33a24b5e3d90c? s = 96 & d = mm & r = g" alt = "Esittelyssä GraphicsJS, tehokas kevyt graafinen kirjastoEsittelyssä GraphicsJS, tehokas kevyt graafinen kirjastoTekniset aiheet:
jQueryES6Raw Semalt
"/><div class="f-lh-title"><div class="f-c-grey-300"> Tapaa kirjailija  </div> <div class="f-large">Roomalainen Lubushkin<i class="fa fa-facebook"> </i> <i class="fa fa-linkedin"> </i> <i class="fa fa-github"> </i>  </div>  </div>  </div> <div class="f-light f-lh-copy l-mt3"> Roman on kokenut web-kehittäjä, joka on tällä hetkellä T & K-päällikkö, joka on yksi maailmanlaajuisesti johtavien interaktiivisten tietojen visualisointiratkaisujen tarjoajista. Hän nauti uuden teknologian tutkimisesta ja orkesteroi kaikki yrityksen tutkimustoiminnot sekä JavaScript- (HTML5) kaaviokirjastojen ja niihin liittyvien komponenttien koko kehittämisen.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </code>  </code>  </svg>  </pre>  </html>  </head>  </meta>                                               
March 1, 2018