createjs 实现场景拖动、滚轮放大缩小

<!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>
posted on 2025-09-18 14:49 浊浊然阅读(12) 评论(0) 收藏举报