KineticJs 여러 레이어가있는 단일 캔버스가 아닌 여러 캔버스를 추가합니다.

Question

kinetic.js에 새롭고 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(); 
    } 
}