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

Drawing new Kinetic JS polygon with click function

本文关键字：动态 JS 多边形 绘制 单击 功能      更新时间：2023-09-26

我试图通过单击另一个形状来触发创建新的 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
    });
});

你几乎得到了它...只需确保将新的 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>

相关文章：