使用点击功能绘制新的Kinetic 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>