Gestione avanzata dei canvas in javascript

In questi giorni mi sto occupando della gestione degli ambienti per il client Vue.js di Freedomotic. Sia le planimetrie che gli oggetti sono manipolati all’interno di canvas e fin qui è tutto abbastanza semplice. A complicare le cose ci si mettono le “room”, ovvero delle figure geometriche che riproducono esattamente le stanze presenti sulla planimetria e che consentono al software di “conoscere” l’ambiente.

Cosa voglio dire? Semplicemente che il sistema sa se un oggetto è collocato nella cucina piuttosto che nel bagno e può eseguire delle automazioni relative ad una specifica stanza.

Disegnare queste “room” richiede un certo impegno perchè occorre creare una figura di base (ad esempio un quadrato) e, attraverso delle maniglie (handler), collocarla nella giusta posizione sulla base della planimetria, aggiungendo nuovi vertici e lati se necessario. Le coordinate di questi poligoni devono essere memorizzare nel file json dell’ambiente per poter essere lette e riprodurre fedelmente la forma richiesta.

Probabilmente è molto più difficile la spiegazione che il concetto stesso.

Intanto il problema di fondo è gestire tutto questo in modo semplice e ottimale. Come sempre ho fatto una ricerca in rete per scovare qualche “pattern” già pronto all’uso e mi sono imbattutto in un paio di progetti.

Il primo, vue-konva, non è altro che un wrapper per il framework javascript Konva che offre un gran numero di feature per la manipolazione dei canvas.

Il secondo, vue-draw-canvas, sembra più adatto alle mie esigenze a giudicare dalla demo soprattutto per la parte relativa alle room.

Forse alla fine riuscirò a fare una sintesi dei due oppure a trovare qualcosa di più calzante.

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Utilizzando il sito, accetti l'invio dei cookies da parte nostra. Maggiori informazioni

Questo sito utilizza i cookies per fornire la migliore esperienza di navigazione possibile. Continuando ad utilizzarlo senza modificare le impostazioni o cliccando su "Accetta" acconsenti al loro utilizzo.

Chiudi