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

我采用了两层方法，但实际上我的挑战是如何实现“页面”静态行为。我发现，由于Kinetic层/阶段似乎没有为此提供方法，我需要使用其他方法在可视区域之上制作“页面”图层。我为此使用了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>

修复了kinetic.js阶段的浮动形状

2 个答案: