Question

每次单击按钮时，我都在尝试克隆形状（方形）。我还希望能够在画布上拖动形状。这是我目前的代码：

-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>

如你所见，我可以创建一个形状并拖动它。但是当我点击按钮时，它会刷新形状而不是克隆它。我读过这篇文章，但我对如何实现克隆仍然感到困惑。

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：单击按钮

1 个答案: