CreateJS 学习3 图像拖动

最新推荐文章于 2022-12-28 15:25:46 发布

编程圈子

最新推荐文章于 2022-12-28 15:25:46 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/xundh/article/details/78798579

版权

Canvas WebGL ThreeJS 专栏收录该内容

30 篇文章 4 订阅

订阅专栏

代码示例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
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
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></hea
复制链接

扫一扫