CreateJS 学习3 图像拖动

代码示例1：通过addEventListener添加事件
注意需要给stage启用Touch enable.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/easeljs.min.js"></script>
    <title>dragtest</title>
</head>
<body>
    <canvas id="dragCanvas" width="600" height="400" style="border:1px solid #000"></canvas>
    <script>
        var stage=new createjs.Stage("dragCanvas");
        createjs.Touch.enable(stage);
        createjs.Ticker.setFPS(30);
        createjs.Ticker.addEventListener("tick",handleTicker);
            function handleTicker(){
            stage.update();
        }
        var image=new createjs.Bitmap("images/b.png");
        stage.addChild(image);

        var oldX;
        var oldY;
        image.addEventListener("mousedown",function(e){
            console.log('mousedown');
            oldX= e.stageX;
            oldY= e.stageY;
        });
        image.addEventListener("pressmove", function (e) {
            console.log('move');
            e.target.x+= e.stageX-oldX;
            e.target.y+= e.stageY-oldY;
            oldX= e.stageX;
            oldY= e.stageY;
        });
    </script>
</body>
</html>

代码示例2 通过on设定事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/easeljs.min.js"></script>
    <title>dragtest</title>
</head>
<body>
    <canvas id="dragCanvas" width="600" height="400" style="border:1px solid #000"></canvas>
    <script>
        var stage=new createjs.Stage("dragCanvas");
        createjs.Touch.enable(stage);
        createjs.Ticker.setFPS(30);
        createjs.Ticker.addEventListener("tick",handleTicker);
            function handleTicker(){
            stage.update();
        }
        var image=new createjs.Bitmap("images/b.png");
        image.regX = 90;
        image.regY = 90;
        image.x=90;
        image.y=90;
        stage.addChild(image);
        image.on("pressmove",dragmove);
        function dragmove(evt){
            //stage.addChild(evt.target);  这句暂时不知道有什么作用
            evt.target.x = evt.stageX;
            evt.target.y = evt.stageY;
        }
    </script>
</body>
</html>

CreateJS 学习3 图像拖动

猜你喜欢