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.