Createjs: Clone shape when clicking button

Question

I'm trying to clone a shape (square) every time I click a button. I also want to be able to drag the shapes around the canvas. This is my current code:

-inline script

        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>

As you can see I can create a shape and drag it around. But when I click the button it refreshes the shape instead of cloning it. I read this post but I was still a little confused on how to implement cloning.

duplicating objects with easeljs

Can someone please point me in the right direction. If you want bonus points make it so the shapes don't overlap each other. I would appreciate it so much :)

how you are going to give bonus points...`:)`! – vijayP Dec 17 '15 at 07:42 — vijayP, Dec 17 '15 at 07:42

score 0 · Accepted Answer · answered Dec 17 '15 at 07:57

Please have a look at this running code snippet. Hope it will help you a bit.

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>

Thank you so much!! I was stuck on this for such a long time. Not sure how I would give the bonus points haha but thanks! Let me know if you have any suggestions on how to start collision prevention :) — user2465134, Dec 17 '15 at 18:06
welcome @user2465134. You can accept this answer if you think it was helpful. Also for collision detection you will have to build your own logic for all clones created. You can refer this SO question which will show the code for collision detection for 2 rectangles http://stackoverflow.com/questions/20350199/easeljs-best-way-to-detect-collision — vijayP, Dec 18 '15 at 05:57

Createjs: Clone shape when clicking button

1 Answers1