Fixed floating shape on kinetic.js stage

0
votes

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?

2
html5-canvaskineticjs
What have you tried? Have you searched the web for tutorials and documentation? - Joshua Dwire
Exactly but without any luck, but I now took a bit wider approach and implemented the solution by using layers and jquery position checking methods. See below. - kiilki

2 Answers

0
votes

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);
0
votes

I took the two layer approach but actually my challenge was how to implement 'page' static behavior. I figured out that as it seems that Kinetic layers/stages do not offer methods for this I need to use other means to make 'page' layer on top of viewable area. I used jquery scrollTop() and scrollLeft()functions for this. And layer method .setAbsolutePosition() is used to update position for whole layer. Here pageLayer position is updated and dynamicLayer not so naming might be bit confusing but reflects what you see on browser.

Here is a simple example what does what I was looking for. Now the green rectangle moves when you scroll stage and the red rectangle and the x/y position counter stay on visible area. I attach this solution here with tutorial type of content as it might be useful. 

<script>
  window.onload = function() {
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 1600, height: 1600
    });
    var layerDynamic = new Kinetic.Layer();
    var layerPage = new Kinetic.Layer();

    var rectGreen = new Kinetic.Rect({
      x: 239, y: 75, width: 100, height: 50, fill: 'green'
    });
    var rectRed = new Kinetic.Rect({
      x: 100, y: 75, width: 100, height: 50, fill: 'red' 
    });
    var simpleText = new Kinetic.Text({
      x: 1, y: 1, text: "Init", textFill: "black"
    });

    layerDynamic.add(rectGreen);
    layerPage.add(rectRed);
    layerPage.add(simpleText);

    $(document).scroll(function(e) {
           var visibleXTop = $(this).scrollTop();
           var visibleYTop = $(this).scrollLeft();
           simpleText.setAttrs({text: visibleXTop + ' ' + visibleYTop});
           layerPage.setAbsolutePosition(visibleYTop , visibleXTop);
           layerPage.draw();
    });

    stage.add(layerDynamic);
    stage.add(layerPage);
  };
</script>