Corsi on-line

Manipolare l’elemento Canvas con Fabric.js

Canvas è un elemento di HTML5 concepito per il rendering di immagini bitmap manipolabili tramite JavaScript o un altro linguaggio compatibile per lo scripting. In pratica, canvas è rappresentato da un’area modificabile graficamente che viene delimitata attraverso il markup e i valori associati agli attributi “width” e “height“; tipicamente, lo sviluppatore ha accesso a quest’area attraverso funzioni JavaScript, per lavorare velocemente con tali feature è possibile ricorrere ad uno strumento come Fabric.js.

Trattandosi di un framework, Fabric.js mette a disposizione dei metodi specifici per la generazione di oggetti e per la loro manipolazione, inoltre, esso permette di essere utilizzato come un parser bidirezionale da SVG (Scalable Vector Graphics) a Canvas e da Canvas a SVG; non mancano naturalmente funzionalità per la gestione di contenuti testuali e per l’applicazione di filtri sulle componenti grafiche.

Una delle feature più interessanti del framework è sicuramente la possibilità di serializzare l’intero elemento canvas all’interno di una stringa basata sul formato d’intescambio JSON che fungerà anche come veicolo per la memorizzazione e il trasporto dei dati; gli oggetti realizzati con i metodi di Fabric.js potranno essere spostati, ruotati o scalati attraverso semplici movimenti del cursore del mouse.

Rilasciato sotto licenza Open Source (MIT License), il framework potrà essere scaricato dal servizio per il controllo di versione GitHub; sul sito ufficiale del progetto sarà possibile reperire codici sorgenti d’esempio, demo funzionanti sulle ultime versioni dei browser più diffusi, documentazione, benchmark e test drive sul progetto.

Post correlati
I più letti del mese
Tematiche