createjs 实现图片拖动

背景是一张大图，显示区域窗口小时，需要拖动查看，游戏地图的简单实现
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>背景拖动</title>
 7     <script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
 8     <style>
 9         body { margin: 0; overflow: hidden; background-color: #222; }
10         canvas { display: block; }
11         #gameContainer { position: relative; }
12     </style>
13 </head>
14 <body>
15     <div id="gameContainer">
16         <canvas id="gameCanvas" width="200" height="200"></canvas>
17     </div>
18     <script>
19         // 获取 canvas 元素
20 var canvas = document.getElementById("gameCanvas");
21 var stage = new createjs.Stage(canvas);
22 
23 // 加载地图图像
24 var mapImage = new Image();
25 mapImage.src = './bg.jpeg'; // 替换为你的地图图片路径
26 mapImage.onload = function() {
27     var mapBitmap = new createjs.Bitmap(mapImage);
28 
29     // 设置地图位置为右下角
30     // mapBitmap.x = canvas.width - mapImage.width;
31     // mapBitmap.y = canvas.height - mapImage.height;
32 
33     stage.addChild(mapBitmap);
34     stage.update(); // 更新舞台以显示图像
35 
36     var isDragging = false;
37     var lastX, lastY;
38 
39     mapBitmap.on("mousedown", function(event) {
40         isDragging = true;
41         lastX = event.stageX;
42         lastY = event.stageY;
43     });
44     mapBitmap.on("pressmove", function(event) {
45         // console.log(isDragging,event.stageX, event.stageY);
46         if (isDragging) {
47             var dx = event.stageX - lastX;
48             var dy = event.stageY - lastY;
49             // 检查边界并更新位置
50             var newX = mapBitmap.x + dx;
51             var newY = mapBitmap.y + dy;
52             if (newX <= 0 && newX >= (canvas.width - mapImage.width)) { // 检查 X 轴边界
53                 mapBitmap.x = newX;
54             }
55             if (newY <= 0 && newY >= (canvas.height - mapImage.height)) { // 检查 Y 轴边界
56                 mapBitmap.y = newY;
57             }
58             // mapBitmap.x = newX;
59             // mapBitmap.y = newY;
60             // console.log(mapBitmap.x, mapBitmap.y)
61             lastX = event.stageX;
62             lastY = event.stageY;
63             stage.update(); // 更新舞台以显示新的位置（如果位置有变化）
64         }
65     });
66 
67     mapBitmap.on("pressup", function(event) {
68         isDragging = false; // 停止拖动
69     });
70 };
71 
72     </script>
73 </body>
74 </html>
posted on 2025-09-04 16:43 浊浊然阅读(6) 评论(0) 收藏举报