KineticJs添加多个画布，而不是多个图层的单个画布

Question

Im新增kineticJs，并正在kinetic.stage上添加多个图像。

起初，我已经成功地创建了使用此代码画布：

var stage = new Kinetic.Stage({ 
    container: 'content', 
    width: x, 
    height: y 
    }); 

//declare layer 
var layer = new Kinetic.Layer(); 

//declare image 
var baseImage = new Kinetic.Image({ 
    image: $('#img')[0]; 
}); 

layer.add(baseImage); 
stage.add(layer); 

但我有越来越多的图像在一段时间每一次添加到画布，所以我做了一个功能，又增加了图像到画布。我的代码是这样的..

function addImageLayer(){ 
//declare layer 
var layer2 = new Kinetic.Layer(); 

//declare image 
var image2 = new Image(); 
image2.src = "../resources/images/frames/newYearBunny.png"; 

image2.onload = function(){ 
    var KineticImage2 = new Kinetic.Image({ 
     x: 200, 
     y: 50, 
     image: image2, 
     draggable: true 
    }); 


    layer2.add(KineticImage2); 
    stage.add(layer2); 
}} 

不幸的是，我刚刚在我现有的顶部添加了一个新的，而我必须添加一个图层。 感谢

Answer 1

可以（以便显示添加新对象到图层后，请务必layer.draw（）），以现有的layer

添加新的图像

function addImageLayer(){ 
    //declare image 
    var image2 = new Image(); 
    image2.src = "../resources/images/frames/newYearBunny.png"; 
    image2.onload = function(){ 
     var KineticImage2 = new Kinetic.Image({ 
      x: 200, 
      y: 50, 
      image: image2, 
      draggable: true 
     }); 
     layer.add(KineticImage2); 
     layer.draw(); 
    } 
}