KineticJs Добавляет несколько холстов вместо одного холста с несколькими слоями

Question

Im new to 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); 
}} 

К сожалению, Ive просто добавил новый поверх моего существующего, тогда как я должен добавить слой. Благодаря

Answer 1

Вы можете добавлять новые изображения в существующие layer

(Убедитесь, что вы layer.draw() после добавления новых объектов в слое, таким образом они отображаются)

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