0

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

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

4

2 回答 2

0

制作固定位置组的最佳选择是在舞台上使用第二层或为您的对象创建两个组 - 一个保持在原位，另一个可以移动。我会采用双层方法，因为这允许您单独重绘图层，这样当一个更新信息时，您不需要重绘另一个。

    cvsObj.page = new Kinetic.Layer();
cvsObj.dynamic = new Kinetic.Layer();
cvsObj.stage.add(cvsObj.page);
cvsObj.stage.add(cvsObj.dynamic);
于 2012-11-01T13:21:38.880 回答
0

我采用了两层方法，但实际上我的挑战是如何实现“页面”静态行为。我发现动力学层/阶段似乎没有为此提供方法，我需要使用其他方法在可视区域顶部制作“页面”层。为此，我使用了 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>
于 2012-11-02T10:13:26.223 回答