kinetic.js阶段的固定浮动形状

Question

我试图找到一个解决方案，如何通过使用kineticjs库层和阶段来实现固定分数表到可见阶段（画布）区域。基本的想法是，形状图层可以滚动，舞台比可见浏览器区域更宽，但是分数表应该一直固定在可见区域上的某个位置，就像在许多休闲游戏中一样。

创建这种类型的固定总是可见的形状舞台/画布最好的方法是什么？有没有办法参考可见区域xy的位置？

Answer 1

制作固定位置组的最佳方法是在舞台上使用第二层或为对象创建两个组 - 一个保留原位，另一个可以移动。我会采用双层方式，因为这样可以分别重新绘制图层，以便在更新信息时不需要重绘其他图层。

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

Answer 2

我采取了两层的方法，但实际上我的挑战是如何实现'页面'静态行为。我发现，因为动力学层/阶段似乎没有为此提供方法，所以我需要使用其他方法在可视区域顶部创建“页面”层。我用这个jQuery的scrollTop（）和scrollLeft（）函数。层方法.setAbsolutePosition（）用于更新整个图层的位置。这里pageLayer的位置被更新了，dynamicLayer没有这样的命名可能有点混乱，但反映了你在浏览器上看到的东西。

这是一个简单的例子，我在找什么。现在，当您滚动舞台时，绿色矩形会移动，并且红色矩形和x/y位置计数器保持在可见区域。我在这里附上这个解决方案和教程类型的内容，因为它可能是有用的。

<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>