Createjs：单击按钮时克隆形状

Question

每次单击按钮时，我都试图克隆一个形状（正方形）。我还希望能够拖动 canvas 周围的形状。这是我当前的代码：

-内联脚本

        var stage; 
        var update = true;
        var count = 1;
        function init(){

            stage = new createjs.Stage('myCanvas');

            var rect = new createjs.Shape();
            rect.graphics.beginFill('#000000').drawRect(0,0,50,50);
            rect.name = "rect_" + count;
            count++;
            var rectName = rect.name

            var dragger = new createjs.Container(rectName);
            dragger.x = dragger.y = 100;
            dragger.addChild(rect);
            stage.addChild(dragger);

            dragger.on("pressmove",function(evt) {
                // currentTarget will be the container that the event listener was added to:
                evt.currentTarget.x = evt.stageX;
                evt.currentTarget.y = evt.stageY;
                // make sure to redraw the stage to show the change:
                stage.update();   
            });
            stage.update();
        }

        $(function(){
            $('button').click(function(){
                console.log('fire!');
                init();
            })
        })

-file.html

<body onload='init()'>
    <canvas id='myCanvas' width='500' height='500'></canvas>
    <button class='makeBox'>New Box!</button>
</body>

如您所见，我可以创建一个形状并将其四处拖动。但是当我单击按钮时，它会刷新形状而不是克隆它。我读了这个 post 但我对如何实现克隆仍然有点困惑。

duplicating objects with easeljs

有人能给我指出正确的方向吗？如果你想要奖励积分，那么形状就不会相互重叠。我将不胜感激:)

Answer 1

请查看此运行代码片段。希望对您有所帮助。

var stage; 
        var update = true;
        var count = 1;
        var rect = null;
        var draggerCord = 0;
        function init(refRect){

            
            if(refRect)
            {
              rect = refRect;
            }
            else
            {
              stage = new createjs.Stage('myCanvas');
              rect = new createjs.Shape();
            }
            
            rect.graphics.beginFill('#000000').drawRect(0,0,50,50);
            rect.name = "rect_" + count;
            count++;
            var rectName = rect.name

            var dragger = new createjs.Container(rectName);
            dragger.x = dragger.y = 100 + draggerCord;
            draggerCord +=50;
            if(draggerCord > 500)
              draggerCord = 100;
          
            dragger.addChild(rect);
            stage.addChild(dragger);

            dragger.on("pressmove",function(evt) {
                // currentTarget will be the container that the event listener was added to:
                evt.currentTarget.x = evt.stageX;
                evt.currentTarget.y = evt.stageY;
                // make sure to redraw the stage to show the change:
                stage.update();   
            });
            stage.update();
        }

        function cloneRect(){
          var rectClone = rect.clone();
          init(rectClone);
        }

        $(function(){
            $('button').click(function(){
               cloneRect();
            })
        })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

<body onload='init()'>
    <canvas id='myCanvas' width='500' height='500'></canvas>
    <button class='makeBox'>New Box!</button>
</body>

Createjs：单击按钮时克隆形状

Createjs: Clone shape when clicking button

javascript

jquery

createjs