Html 在kineticJS中的层之间交换

我试图将层视为页面——也就是说，我在一个页面上绘制，然后翻转页面，再在另一个页面上绘制，每次都存储上一个页面，以防用户返回

在我看来，这可以理解为：

• 创建

  当前\u层

  全局指针
• 每次调用

  newPage（）

  时，将旧层存储在数组中，并覆盖指针

  layer\u array.push（当前\u层）//存储旧层

  current_layer=新的动能层（）//用新的

• 然后将新对象添加到

  当前_层

  ，该层将它们绑定到该层，无论它们是否绘制。（例如，

  当前层。添加（myCircle）

  ）

• 检索页面只是更新数组中请求层的指针，然后重新绘制页面。附加到图层的所有子节点也将被绘制

  当前_层=层_数组[num-1]//数值为第2页，例如

  current\u layer.draw（）

然而什么也没有发生！我可以创建新页面，并适当地存储它们-但我无法再次检索它们

以下是我的完整代码（我的浏览器在使用JSFIDLE时遇到问题）：

//全球的
var期//帆布
变量层数组=[]；
当前页面//指向当前层的指针
window.onload=函数（）{
阶段=新的动力学阶段({
容器：'容器'，
宽度：400，
身高：400
});
//将初始页面添加到要绘制的阶段
新页（）
};
//---功能----//
函数newPage（）{
如果（！当前页面）{
console.log（“当前页面未定义”）；
}否则{
层数组推送（当前页面）；
//阶段。删除（当前页面）；
//不，不工作。
阶段。移除儿童（）；
//行得通，但我认为它可以解除所有对象的绑定
//从它们的特定层。。。
//stage.draw（）
日志（“存储层并将其从后台删除”）；
}
当前页面=新的动能层（）；
log（“当前在页面上：”+（layer_array.length+1））；
阶段。添加（当前页面）；
stage.draw（）；
}
函数gotoPage（num）{
阶段。移除儿童（）
stage.draw（）
num=num-1；
如果（num>=0）{
当前页面=层数组[num]；
log（“现在在页面上”+（num+1））；
阶段。添加（当前页面）；
stage.draw（）；
}
}
函数addCircletoCurrentPage（）
{
var rand=Math.floor（3+（Math.random（）*10））；
var obj=新的动力学圆({
x:rand*16，y:rand*16，
半径：兰特，
填充：“红色”
})
var imagelayer=当前页面；
imagelayer.add（obj）；
imagelayer.draw（）；
}
点击
新的
第1页
第2页
第3页

好的，我改变了我的方法，而不是交换层（更简单，更有意义），而是选择序列化整个阶段并将其加载回去

这是可行的，但真的不应该像这样

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

//全局
var期//帆布
变量层数组=[]；
当前页面//指向当前层的指针
var page_num=0；
window.onload=函数（）{
阶段=新的动力学阶段({
容器：'容器'，
宽度：400，
身高：400
});
//将初始页面添加到要绘制的阶段
新页（）
};
//---功能----//
函数newPage（）{
如果（！当前页面）{
console.log（“当前页面未定义”）；
}否则{
保存页（页码）
阶段。移除儿童（）
日志（“存储层并将其从后台删除”）；
}
当前页面=新的动能层（）；
log（“当前在页面上：”+（layer_array.length+1））；
阶段。添加（当前页面）；
stage.draw（）；
page_num++；
}
函数保存页（num）{
如果（（num-1）>=0）{
var store=stage.toJSON（）；
层数组[num-1]=存储；
日志（“存储页面：+num”）
}
}
函数gotoPage（num）{
保存页（页码）；
阶段。移除儿童（）
如果（num-1>=0）{
var load=层_数组[num-1]；
document.getElementById（'container'）。innerHTML=“”；//空白
stage=Kinetic.Node.create（加载“容器”）；
var images=stage.get（“.image”）；
对于（i=0；i这是一个有趣的问题。我认为这可以解决您的问题：

基本上，您不应该删除（）或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();
    }

函数gotoPage（num）{
对于（var i=0；iYou先生，你是一个忍者。非常感谢！在我勾选你之前，让我先测试一下。是的，我已经在KineticJS上看到了你的一些问题，你现在一定很熟练了。另外，你会注意到JSFIDLE并没有完全解决这个问题，因为添加元素和翻页可能不会给你完美的结果t.你必须摆弄向某一层添加元素的逻辑。你的
gotoPage（num）
方法也有一个小问题，你没有更新
当前页面的
指针，使其与新显示的层相等。我知道这是个小问题，但对未来的用户来说太麻烦了——你的方法是完美的
    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();
    }