<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>背景拖动</title> <script src="./createjs/createjs.min.js"></script> <style> body { margin: 0; overflow: hidden; background-color: #222; } canvas { display: block; } html, body, #gameContainer { position: relative; width: 100%; height: 100%; } #gameCanvas { width: 100%; height: 100%; } </style> </head> <body> <div id="gameContainer"> <canvas id="gameCanvas"></canvas> </div> <script> function updateBackgroundPosition() { var viewWidth = stage.canvas.width; var viewHeight = stage.canvas.height; background.x = (viewWidth - background.image.width * background.scaleX) / 2; background.y = (viewHeight - background.image.height * background.scaleY) / 2; } var background; function createBackground(image) { background = new createjs.Bitmap(image); // background.scaleX = 0.1; // background.scaleY = 0.1; stage.addChild(background); // updateBackgroundPosition(); // 初始位置和缩放，只缩放这个图片，其他元素不变 var img = new createjs.Bitmap("./1.png"); img.scaleX = 0.1; img.scaleY = 0.1; stage.addChild(img); } var queue = new createjs.LoadQueue(); queue.on("complete", handleComplete, this); queue.loadFile("./bg.png"); function handleComplete() { var image = queue.getResult("./bg.png"); createBackground(image); } window.devicePixelRatio = window.devicePixelRatio || 1; // 兼容低版本浏览器 // 获取 canvas 元素 var canvas = document.getElementById("gameCanvas"); // 设置 canvas 元素的原始尺寸宽高，并设置缩放比例 window.devicePixelRatio为当前浏览器的缩放比例 canvas.width = window.innerWidth * window.devicePixelRatio; canvas.height = window.innerHeight * window.devicePixelRatio; var stage = new createjs.Stage(canvas); // 初始化缩放和拖拽变量 var scaleFactor = 1; // 记录上一次鼠标位置变量，用于计算拖动的偏移量 var lastPointerX, lastPointerY; // 是否可拖动变量 var dragging = false; function init(ratio) { window.devicePixelRatio = ratio; canvas.width = window.innerWidth * window.devicePixelRatio; canvas.height = window.innerHeight * window.devicePixelRatio; stage.update(); } // 滚轮事件处理函数 function handleWheel(event) { event.preventDefault(); // 阻止默认滚动行为 var delta = event.deltaY > 0 ? -0.1 : 0.1; // 根据滚轮方向决定缩放比例变化 scaleFactor += delta; scaleFactor = Math.max(0.5, Math.min(scaleFactor, 2)); // 限制缩放范围 stage.scaleX = stage.scaleY = scaleFactor; // 应用缩放 } canvas.addEventListener("wheel", handleWheel, { passive: false }); // 监听滚轮事件 stage.on("stagemousedown", handleTouchStart); stage.on("stagemouseup", function (event) { dragging = false; }); stage.on("stagemousemove", handleTouchMove); //pressmove事件也可以实现拖拽效果 // 触摸开始事件处理函数 function handleTouchStart(event) { dragging = true; lastPointerX = event.stageX; lastPointerY = event.stageY; } // 触摸移动事件处理函数 function handleTouchMove(event) { if (dragging) { var dx = event.stageX - lastPointerX; var dy = event.stageY - lastPointerY; stage.x += dx; // 更新舞台X位置以实现拖拽效果 stage.y += dy; // 更新舞台Y位置以实现拖拽效果 lastPointerX = event.stageX; lastPointerY = event.stageY; // console.log(dx, dy) stage.update(); // 更新舞台以显示新的位置（如果位置有变化） } } // 触摸结束事件处理函数 function handleTouchEnd(event) { dragging = false; } createjs.Ticker.framerate = 60; // 设置帧率 createjs.Ticker.addEventListener("tick", stage); // 将舞台添加到ticker更新队列中，以实现动画效果。 /* canvas.addEventListener("touchstart", handleTouchStart, false); canvas.addEventListener("touchmove", handleTouchMove, false); canvas.addEventListener("touchend", handleTouchEnd, false); canvas.addEventListener("touchcancel", handleTouchCancel, false); function handleTouchStart(event) { var touch = event.touches[0]; // 获取第一个触摸点 console.log("Touch Start at: ", touch.pageX, touch.pageY); } function handleTouchMove(event) { var touch = event.touches[0]; // 获取第一个触摸点 console.log("Touch Move at: ", touch.pageX, touch.pageY); } function handleTouchEnd(event) { console.log("Touch End"); } function handleTouchCancel(event) { console.log("Touch Cancel"); } */ </script> </body> </html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。