繪製具有點擊功能的新的動力學JS多邊形

Question

我試圖通過點擊另一個觸發創建新的動力學形狀（不是克隆）。任何幫助將不勝感激，因爲我似乎無法找到答案。我已嘗試以下沒有任何的運氣：

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

你差不多了... ...只是一定要新的SQ1添加到層，也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>