CreateJS 学习3 图像拖动

来源：互联网发布：新版淘宝怎么联系客服编辑：程序博客网时间：2024/05/19 16:20

代码示例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>

阅读全文

0 0