Question

我正在用画布html创建一个用于移动和网络的小游戏，如果将鼠标悬停在画布图像上，我们必须在特定位置上找到隐藏的项目。我在画布上放了一张大图片，应该可以在网络和移动设备上滚动。

我没有放置鼠标光标，而是放了一个放大镜图像，还制作了另一个画布以实现缩放功能，以查看放大镜。

我一直停留在移动触摸屏上，在该触摸屏上我已经放置了放大镜图像，并且无论手指触摸到哪里它都在移动，但是我也希望画布图像可以水平滚动，因为我放置了event.preventdefault并且它停止了画布触摸放大镜时移动的图像。我希望它在不触摸放大镜图像时可以滚动。有人可以帮我吗？

function init（）{

  // Initialise our object
  obj = {x:50, y:50, w:250, h:250};
  var canvas = document.getElementById("dndcanvas");
  var zoom = document.getElementById("zoom");
  var zoomMobile = document.getElementById("zoomMobile");
  var zoomMobileCtx = zoomMobile.getContext("2d");
  var zoomCtx = zoom.getContext("2d");
  var ctx = canvas.getContext('2d');
  // canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;

  // Add eventlistener to canvas
  canvas.addEventListener('touchmove', function(e) {
    //Assume only one touch/only process one touch even if there's more
    var touch = event.targetTouches[0];

    // Is touch close enough to our object?
    if(detectHit(obj.x, obj.y, touch.pageX, touch.pageY, obj.w, obj.h)) {

      // Assign new coordinates to our object
      obj.x = touch.pageX -220;
      obj.y = touch.pageY -220;

      zoomMobileCtx.fillStyle = "white";

      zoomMobileCtx.fillRect(0,0, zoom.width, zoom.height);
      zoomMobileCtx.drawImage(canvas, obj.x, obj.y, 200, 100, 0,0, 400, 200);

      zoomMobile.style.top = touch.pageY - 177 + "px"
      zoomMobile.style.left = touch.pageX - 185 + "px"
      zoomMobile.style.display = "block";

      // Redraw the canvas
      drawMobile();

    }
    e.preventDefault();
  }, false);

   function detectHit(x1,y1,x2,y2,w,h) {


      //Very simple detection here
      if(x2-x1>w) return false;
      if(y2-y1>h) return false;



      return true;
    }

  // touch start to get the magnify glass
 canvas.addEventListener("touchstart", function (e) {
  drawMobile();

  e.preventDefault();
}, false);





  // Zoom effect for web
  canvas.addEventListener("mousemove", function(e){

      var mousePos = getMousePos(canvas, e);
      var one = document.getElementById('img1');
      console.log(mousePos.x);

       if(mousePos.x == 450 )
           {
            ctx.drawImage(one,450,30,80,80);
           }

      zoomCtx.fillStyle = "white";

      zoomCtx.fillRect(0,0, zoom.width, zoom.height);
      zoomCtx.drawImage(canvas, e.x, e.y, 200, 100, 0,0, 400, 200);

      zoom.style.top = e.pageY + 10 + "px"
      zoom.style.left = e.pageX + 10 + "px"
      zoom.style.display = "block";
  });



      function getMousePos(canvas, e) {
          var rect = canvas.getBoundingClientRect();
          return {
              x: e.clientX - rect.left,
              y: e.clientY - rect.top
          };

       }

        draw();

}

function draw（）{ canvas = document.getElementById（“ dndcanvas”）;

ctx = canvas.getContext('2d');
// ctx.canvas.width  = window.innerWidth;
 ctx.canvas.height = window.innerHeight;

  var img = document.getElementById('img');
  var scream = document.getElementById('scream');

  ctx.drawImage(scream,0,0,canvas.width, canvas.height);

//ctx.drawImage(img,obj.x, obj.y, obj.w, obj.h);

}

function drawMobile（）{ canvas = document.getElementById（“ dndcanvas”）;

ctx = canvas.getContext('2d');
// ctx.canvas.width  = window.innerWidth;
 ctx.canvas.height = window.innerHeight;

var img = document.getElementById('img');
var scream = document.getElementById('scream');

ctx.drawImage(scream,0,0,canvas.width, canvas.height);

ctx.drawImage(img,obj.x, obj.y, 500, 500);

}

当不触摸放大图像时如何使画布图像可滚动？请提供任何帮助。

画布HTML5用于移动触摸滚动

0 个答案: