클릭 키 기능으로 새로운 키네틱 JS 다각형 그리기

Question

다른 클릭을 통해 새로운 키네틱 모양 (복제본 아님)을 만들려고합니다. 내가 답변을 찾지 못하는 것처럼 어떤 도움이라도 대단히 감사하겠습니다. 단지 레이어에 새로운 SQ1을 추가해야합니다 ...

var sq1 = new Kinetic.Rect({ 
    x: 25, 
    y: 400, 
    width: 200, 
    height: 200, 
    fill: '#000000', 
    draggable: true 
    }); 

var $sq1 = sq1 

$sq1.on("click", function() { 
    var sq1copy = new Kinetic.Rect({ 
    x: 45, 
    y: 450, 
    width: 100, 
    height: 100, 
    fill: '#FFFFFF', 
    draggable: true 
    }); 
}); 

Answer 1

당신은 거의있어도 layer.draw

var stage = new Kinetic.Stage({ 
 
     container: 'container', 
 
     width: 750, 
 
     height: 750 
 
    }); 
 
    var layer = new Kinetic.Layer(); 
 
    stage.add(layer); 
 

 
var sq1 = new Kinetic.Rect({ 
 
    x: 25, 
 
    y: 100, 
 
    width: 200, 
 
    height: 200, 
 
    fill: '#000000', 
 
    draggable: true 
 
}); 
 
layer.add(sq1); 
 
layer.draw(); 
 

 
var $sq1 = sq1 
 
var offset=20; 
 

 
$sq1.on("click", function() { 
 
    var sq1copy = new Kinetic.Rect({ 
 
    x: 45+offset, 
 
    y: 150+offset, 
 
    width: 100, 
 
    height: 100, 
 
    fill: '#FFFFFF', 
 
    draggable: true 
 
    }); 
 
    offset+=20; 
 
    layer.add(sq1copy); 
 
    layer.draw(); 
 
});

body { 
 
    padding: 20px; 
 
} 
 
#container { 
 
    border: solid 1px #ccc; 
 
    margin-top: 10px; 
 
    width: 750px; 
 
    height: 750px; 
 
}

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script> 
 
<div id="container"></div>

: 나는 운이없이 다음을 시도했습니다