It's basically my job to take the provided PDF and create a way to dynamically display the data that the image conveys. The data itself is going to be calculated elsewhere, so all I have to worry about is accepting the values for each beaker, and filling them appropriately.
My idea right now:
Right now my idea is using the canvas. I've created a beaker class, and then made the 5 beakers an instance of the class. This works pretty well, and I'm sitting with a canvas that has 5 empty beakers in the correct place. I've divided each beaker by 100, then I can fill each one correctly the amount of pixels needed to be whatever percent it happens to be, but this is where I run into issues. Each beaker is a different shape, and as each one gets filled the shape changes. Therefore, I'm having a difficult time trying to actually draw in the liquid in the beakers. Secondly, if I do manage to draw the liquid in correctly, it's going to cover details of the beaker. If I did liquid first then beakers it would be the opposite problem.
So, is there a better way to go about doing this, or to easily draw the odd shapes onto the canvas? I'm beginning to think using the canvas is not going to be the best way. I know I could just make several images for each at different liquid levels, but I want to avoid using that many images in the final product.