Corsi on-line

GraphicsJS: grafica con JavaScript

GraphicsJS è una libreria grafica molto leggera e scritta in linguaggio JavaScript che mette a disposizione un’API (Application Programming Interface) particolarmente intuitiva. Si tratta di una soluzione Open Source basata sulla tecnologia SVG/VML che si rivela particolarmente utile nella realizzazione di progetti destinati all’interazione con l’utente come per esempio semplici casual game Web based.

graL’interfaccia per la programmazione in JavaScript offre sufficiente flessibilità per realizzare qualsiasi tipologia di progetto grafico, nello stesso modo GraphicsJS consente di controllare il rendering dei testi definendone indentazione, distanza tra lettere e righe, allineamento orizzontale e verticale, wrap e overflow. Il livello di compatibilità degli output è totalmente cross platform e cross device offrendo persino il supporto per Internet Explorer 6 (che comunque è più che consigliabile non utilizzare).

Le prestazioni verranno ottimizzate grazie all’azione del Virtual DOM, sostanzialmente un sistema per l’astrazione dell’HTML DOM (Document Object Model) che ha la caratteristica di essere completamente indipendente da implementazioni per specifici browser Web e permette di ottenere performance di livello elevato sulle applicazioni per la navigazione Internet più differenti, comprese le soluzioni per l’ecosistema mobile.

La libreria potrà essere richiamata velocemente tramite CDN (Content Delivery Network) senza la necessità di scaricare localmente una copia del relativo file JavaScript:

<script src="https://cdn.anychart.com/js/latest/graphics.min.js"></script>

Fatto questo si potranno utilizzare immediatamente i metodi di GraphicsJS, a questo proposito l’esempio seguente mostra il codice utilizzabile per la creazione di un triangolo inserito in un quadrato e contenente a sua volta un cerchio:

<script>
        stage = acgraph.create('stage-container');
        // quadrato
        stage.rect(25, 50, 350, 300);
        // cerchio
        stage.circle(200, 250, 100);
        // triangolo
        stage.path()
            .moveTo(25, 350)
            .lineTo(200, 50)
            .lineTo(375, 350)
            .close();
    </script>

Per chi fosse interessato ad imparare ad utilizzare GraphicsJS in modo professionale è disponibile anche un PlayGround didattico nel quale sono presenti numerosi esempi di codice da utilizzare come template di base per i propri progetti.

Via GraphicsJS

Post correlati
I più letti del mese
Tematiche