0

kineticjs ライブラリ レイヤーとステージを使用して、固定スコア テーブルを可視ステージ (キャンバス) 領域に実装する方法に関する解決策を見つけようとしました。基本的な考え方は、シェイプ レイヤーはスクロール可能で、ステージはブラウザーの表示領域よりも広くなりますが、多くのカジュアル ゲームのように、スコア テーブルは常に表示領域の特定の位置に固定する必要があります。

この種の固定された常に見える形状をステージ/キャンバスに作成するための最良のアプローチは何でしょうか? 可視領域の xy 位置を参照する方法はありますか?

4

2 に答える 2

0

固定位置のグループを作成する最善の方法は、ステージ上で 2 番目のレイヤーを使用するか、オブジェクトに対して 2 つのグループを作成することです。デュアルレイヤーアプローチを使用すると、レイヤーを個別に再描画できるため、一方の情報が更新されたときにもう一方を再描画する必要がなくなります。

    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

私は 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>
于 2012-11-02T10:13:26.223 に答える