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>

Answer 1

这是一个有趣的问题。我认为这可以解决您的麻烦：http://jsfiddle.net/LRNHk/3/

基本上，您不应该删除（）或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中看到的其他函数。

Answer 2

好吧，我改变了我的方法，而不是交换图层（100x更容易，更有意义），我选择序列化整个舞台并加载它。

它有效，但它真的不应该像这个该死的

  //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();
    }

在kineticJS中的层之间交换

2 个答案: