Question

我试图通过点击另一个来触发创建新的Kinetic形状（不是克隆）。任何帮助将不胜感激，因为我似乎无法找到答案。我没试过就试过以下事情：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用单击功能绘制新的Kinetic JS多边形

1 个答案: