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