html - KineticJSのレイヤー間のスワッピング

Question

レイヤーをページとして処理しようとしています。つまり、ユーザーが前のページに戻った場合に備えて、前のページを保存するたびに、あるページに描画してから、ページをめくって別のページに描画します。

私の考えでは、これは次のように解釈されます。

current_layerグローバルポインタを作成します。
が呼び出されるたびnewPage()に、古いレイヤーを配列に格納し、ポインターを上書きします

layer_array.push(current_layer); //store old layer

current_layer = new Kinetic.Layer(); //overwrite with a new
次に、新しいオブジェクトがに追加され、current_layer描画されているかどうかに関係なく、それらがレイヤーにバインドされます。（例current_layer.add(myCircle)）
ページを取得することは、配列内の要求しているレイヤーへのポインターを更新し、ページを再描画することです。レイヤーに接続されているすべての子ノードも描画されます

current_layer = layer_array[num-1]; //num is Page 2 e.g

current_layer.draw()

しかし、何も起きていません！新しいページを作成して適切に保存することはできますが、再度取得することはできません...

これが私の完全なコードです（私のブラウザはjsfiddleの使用に問題があります）：

<html>

  <head>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js"></script>
    <script>
      //Global
      var stage; //canvas
      var layer_array = [];
      var current_page; //pointer to current layer

      window.onload = function() {
        stage = new Kinetic.Stage({
          container: 'container',
          width: 400,
          height: 400
        });

        //Add initial page to stage to draw on
        newPage()

      };

      //--- Functions ----//

        function newPage(){
            if(!current_page){
                console.log("current page undefined");

            } else {
                layer_array.push(current_page);
//              stage.remove(current_page); 

                //Nope, not working.
                stage.removeChildren();        
                //Works, but I think it unbinds all objects
                // from their specific layers...
//              stage.draw()

                console.log("Stored layer and removed it from stage");
            }
            current_page = new Kinetic.Layer();
            console.log("Currently on page:"+(layer_array.length+1));

            stage.add(current_page);
            stage.draw();

        }


        function gotoPage(num){
            stage.removeChildren()
            stage.draw()

            num = num-1;
            if(num >= 0) {
                current_page = layer_array[num];
                console.log("Now on page"+(num+1));

                stage.add(current_page);
                stage.draw();
            }

        }


        function addCircletoCurrentPage() 
        {
            var rand = Math.floor(3+(Math.random()*10));

            var obj = new Kinetic.Circle({
                x: rand*16, y: rand*16,
                radius: rand,
                fill: 'red'
            })

            var imagelayer = current_page;
            imagelayer.add(obj);
            imagelayer.draw();
        }
    </script>
  </head>

  <body>
    <div id="container"></div>
    <button onclick="addCircletoCurrentPage()" >click</button>
    <button onclick="newPage()" >new</button>
    <button onclick="gotoPage(1)" >page1</button>
    <button onclick="gotoPage(2)" >page2</button>
    <button onclick="gotoPage(3)" >page3</button>

  </body>

</html>

score 3 · Accepted Answer

これは楽しい問題でした。これで問題は解決すると思います：http：//jsfiddle.net/LRNHk/3/

基本的に、remove（）またはremoveChildren（）は、参照を解除するリスクがあるため、削除しないでください。

代わりに、以下を使用する必要があります。

   layer.hide();  and  layer.show();

このようにして、すべてを平等に保ち、スピーディーな描画パフォーマンスを得ることができます。したがって、ページに移動する機能は次のようになります。

    function gotoPage(num){
       for(var i=0; i<layer_array.length; i++) {
            layer_array[i].hide();
       }
          layer_array[num].show();
          console.log("Currently on page:"+(num));
          console.log("Current layer: " + layer_array[num].getName());
          stage.draw();
    }

jsfiddleで確認できる他の関数も変更しました。

score -1 · Accepted Answer

さて、アプローチを変更し、レイヤーを交換する代わりに（100倍簡単で理にかなっています）、代わりにステージ全体をシリアル化してロードし直すことを選択しました。

それは機能しますが、実際にはこのくそったれのようである必要はありません

  //Global
  var stage; //canvas
  var layer_array = [];
  var current_page; //pointer to current layer
  var page_num = 0;

  window.onload = function() {
    stage = new Kinetic.Stage({
      container: 'container',
      width: 400,
      height: 400
    });

    //Add initial page to stage to draw on
    newPage()

  };

  //--- Functions ----//

    function newPage(){
        if(!current_page){
            console.log("current page undefined");

        } else {
            savePage(page_num)
            stage.removeChildren()

            console.log("Stored layer and removed it from stage");
        }
        current_page = new Kinetic.Layer();
        console.log("Currently on page:"+(layer_array.length+1));

        stage.add(current_page);
        stage.draw();

        page_num ++;

    }

    function savePage(num){
        if( (num-1) >=0){
            var store = stage.toJSON();
            layer_array[num-1] = store;
            console.log("Stored page:"+num)
        }
    }

    function gotoPage(num){
        savePage(page_num);

        stage.removeChildren()

        if(num-1 >= 0) {
            var load = layer_array[num-1];
            document.getElementById('container').innerHTML = ""; //blank
            stage = Kinetic.Node.create(load, 'container');

            var images = stage.get(".image");

            for(i=0;i<images.length;i++)
            {  
            //function to induce scope
                (function() {
                    var image = images[i];
                    var imageObj = new Image();
                    imageObj.onload = function() {
                        image.setImage(imageObj);
                        current_page.draw();
                    };
                    imageObj.src = image.attrs.src;
                })();
            }
            stage.draw();
            page_num =num //update page

        }
    }

    function addCircletoCurrentPage() 
    {
        var rand = Math.floor(3+(Math.random()*10));

        var obj = new Kinetic.Circle({
            x: rand*16, y: rand*16, name: "image",
            radius: rand,
            fill: 'red'
        })

        var imagelayer = current_page;
        imagelayer.add(obj);
        imagelayer.draw();
    }

html - KineticJSのレイヤー間のスワッピング

2 に答える 2

Related

Reference