修复了 kinetic.js 舞台上的浮动形状答案

【问题标题】：Fixed floating shape on kinetic.js stage修复了 kinetic.js 舞台上的浮动形状
【发布时间】：2012-11-01 12:37:34
【问题描述】：

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

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

【问题讨论】：

你试过什么？您是否在网上搜索过教程和文档？
完全正确，但没有任何运气，但我现在采取了更广泛的方法，并通过使用层和 jquery 位置检查方法来实现解决方案。见下文。

【解决方案1】：

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

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

【讨论】：

感谢您的提示。我早些时候就想到了这一点，但困难在于找出其他是动态的和其他静态的方式。但是层绝对是要走的路。

【解决方案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>

【讨论】：