Question

I have tried to find a solution on how to implement fixed score table to visible stage (canvas) area by using kineticjs library layers and stages. The basic idea is that shape layer can be scrolled and stage is wider than the visible browser area but the score table should be all the time fixed to certain position on the visible area like in many casual games.

What would be the best approach on creating this kind of fixed always visible shapes to stage/canvas? Is there a way to refer to visible area xy position?

Answer 1

Your best bet for making a fixed position group is either to use a second layer on the stage or to create two groups for your objects – one that remains in place and another that can be moved. I’d go with the dual-layer approach as this allows you to redraw the layers separately so that when one has updated information, you don’t need to redraw the other.

    cvsObj.page = new Kinetic.Layer();
cvsObj.dynamic = new Kinetic.Layer();
cvsObj.stage.add(cvsObj.page);
cvsObj.stage.add(cvsObj.dynamic);