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>