Il modo migliore per gestire un infograph dinamico con javascript?

1

Al momento mi è stato assegnato un progetto per creare quanto segue con javascript, puoi visualizzare il prodotto finale qui: link

In pratica è mio compito prendere il PDF fornito e creare un modo per visualizzare dinamicamente i dati che l'immagine trasmette. I dati stessi verranno calcolati altrove, quindi tutto ciò di cui devo preoccuparmi è accettare i valori per ogni bicchiere e riempirli in modo appropriato.

La mia idea adesso:

In questo momento la mia idea è usare la tela. Ho creato una classe di beaker e poi ho trasformato i 5 beakers in un'istanza della classe. Funziona abbastanza bene, e sono seduto con una tela che ha 5 bicchieri vuoti nel posto giusto. Ho diviso ogni beaker per 100, quindi posso riempire ciascuno correttamente la quantità di pixel necessari per essere qualunque sia la percentuale in cui capita di essere, ma è qui che mi imbatto in problemi. Ogni beaker ha una forma diversa e, man mano che si riempie, la forma cambia. Pertanto, sto attraversando un momento difficile cercando di attingere effettivamente il liquido nei bicchieri. In secondo luogo, se riesco a disegnare il liquido in modo corretto, coprirà i dettagli del becher. Se facessi prima il liquido, allora sarebbe il problema opposto.

Quindi, c'è un modo migliore per farlo, o per disegnare facilmente le forme dispari sulla tela? Sto iniziando a pensare che usare la tela non sarà il modo migliore. So che potrei fare diverse immagini per ognuno a diversi livelli di liquido, ma voglio evitare di usare tante immagini nel prodotto finale.

    
posta Peter Jewicz 05.10.2013 - 22:13
fonte

1 risposta

1

In primo luogo, a mio avviso, il modo migliore per gestirlo: dai un'occhiata a SVG e javascript via Raphaël.js ( link ).

Tuttavia, se hai voglia di hackerare un sacco di operazioni di basso livello con Canvas, dai un'occhiata a Canvas clipping e compositing. Nel modo più semplice, è necessario un bitmap in cui eseguire il rendering del livello del liquido e aggiungere la forma del beccuccio sopra, usando il compositing.

Ecco due link rilevanti: link link (ahimè, il mio rappresentante non accetta i collegamenti di ritaglio)

    
risposta data 08.10.2013 - 01:47
fonte

Leggi altre domande sui tag