İmleci ekran dışına kaydırıldığında, tuval içerisindeki nesneleri sürükleyemiyorum

Question

Çalıştığı bir jsFiddle'ı draggable battleships on a canvas ve have just added some HTML paragraphs ile aldım. Aniden zırhlıları sürükleyemem.

Fare işleyicilerine e.pageX ve e.pageY eklemeyi denedim, ancak bu yardımcı olmuyor.

Kaydırılan içerik nasıl kullanılır? Doküman kaydırma İşte

değerleri dikkate almak da ihtiyaç

jQuery(document).ready(function($) { 

     var board = document.getElementById("board"); 
     var ctx = board.getContext("2d"); 
     ctx.strokeStyle = "lightgray"; 

     var canvasOffset = $("#board").offset(); 
     var offsetX = canvasOffset.left; 
     var offsetY = canvasOffset.top; 

     console.log('ready: offsetX=' + offsetX + ", " + "offsetY=" + offsetY); 

     var mouseIsDown = false; 
     var lastX = 0; 
     var lastY = 0; 

     var ships = []; 

     makeShip(20, 30, 50, 25, "skyblue"); 
     makeShip(20, 100, 30, 25, "skyblue"); 
     makeShip(20, 170, 50, 25, "salmon"); 
     makeShip(20, 240, 30, 25, "salmon"); 

     function makeShip(x, y, width, height, fill) { 
      var ship = { 
       x: x, 
       y: y, 
       width: width, 
       height: height, 
       right: x + width, 
       bottom: y + height, 
       fill: fill 
      } 
      ships.push(ship); 
     } 

     drawAllShips(); 

     function drawAllShips() { 
      ctx.clearRect(0, 0, board.width, board.height); 
      for (var i = 0; i < ships.length; i++) { 
       var ship = ships[i] 
       drawShip(ship); 
       ctx.fillStyle = ship.fill; 
       ctx.fill(); 
       ctx.stroke(); 
      } 
     } 

     function drawShip(ship) { 
      ctx.beginPath(); 
      ctx.moveTo(ship.x, ship.y); 
      ctx.lineTo(ship.right, ship.y); 
      ctx.lineTo(ship.right + 10, ship.y + ship.height/2); 
      ctx.lineTo(ship.right, ship.bottom); 
      ctx.lineTo(ship.x, ship.bottom); 
      ctx.closePath(); 
     } 

     function handleMouseDown(e) { 

      mouseX = parseInt(e.clientX - offsetX); 
      mouseY = parseInt(e.clientY - offsetY); 

      console.log('handleMouseDown: mouseX=' + mouseX + ", " + "mouseY=" + mouseY); 

      lastX = mouseX; 
      lastY = mouseY; 
      mouseIsDown = true; 
     } 

     function handleMouseUp(e) { 
      mouseX = parseInt(e.clientX - offsetX); 
      mouseY = parseInt(e.clientY - offsetY); 

      console.log('handleMouseUp: mouseX=' + mouseX + ", " + "mouseY=" + mouseY); 

      mouseIsDown = false; 
     } 

     function handleMouseMove(e) { 
      if (!mouseIsDown) { 
       return; 
      } 

      mouseX = parseInt(e.clientX - offsetX); 
      mouseY = parseInt(e.clientY - offsetY); 

      console.log('handleMouseMove: mouseX=' + mouseX + ", " + "mouseY=" + mouseY); 

      for (var i = 0; i < ships.length; i++) { 
       var ship = ships[i]; 
       drawShip(ship); 
       if (ctx.isPointInPath(lastX, lastY)) { 
        ship.x += (mouseX - lastX); 
        ship.y += (mouseY - lastY); 
        ship.right = ship.x + ship.width; 
        ship.bottom = ship.y + ship.height; 
       } 
      } 
      lastX = mouseX; 
      lastY = mouseY; 
      drawAllShips(); 
     } 

     $("#board").mousedown(function(e) { 
      handleMouseDown(e); 
     }); 

     $("#board").mousemove(function(e) { 
      handleMouseMove(e); 
     }); 

     $("#board").mouseup(function(e) { 
      handleMouseUp(e); 
     }); 
}); 

Answer 1

i

oluşturulan örnek olduğunu -

bir ekran ve aşağıdaki sorunlu JavaScript kodu kopyasını bakınız

jQuery(document).ready(function($) { 

     var board = document.getElementById("board"); 
     var ctx = board.getContext("2d"); 
     ctx.strokeStyle = "lightgray"; 

     var canvasOffset = $("#board").offset(); 
     var offsetX = canvasOffset.left; 
     var offsetY = canvasOffset.top; 

     var scrolltop = $(document).scrollTop(); 
     var scrollleft = $(document).scrollLeft(); 

     console.log('ready: offsetX=' + offsetX + ", " + "offsetY=" + offsetY, scrolltop, scrollleft); 

     var mouseIsDown = false; 
     var lastX = 0; 
     var lastY = 0; 

     var ships = []; 

     makeShip(20, 30, 50, 25, "skyblue"); 
     makeShip(20, 100, 30, 25, "skyblue"); 
     makeShip(20, 170, 50, 25, "salmon"); 
     makeShip(20, 240, 30, 25, "salmon"); 

     function makeShip(x, y, width, height, fill) { 
      var ship = { 
       x: x, 
       y: y, 
       width: width, 
       height: height, 
       right: x + width, 
       bottom: y + height, 
       fill: fill 
      } 
      ships.push(ship); 
      return (ship); 
     } 

     drawAllShips(); 

     function drawAllShips() { 
      ctx.clearRect(0, 0, board.width, board.height); 
      for (var i = 0; i < ships.length; i++) { 
       var ship = ships[i] 
       drawShip(ship); 
       ctx.fillStyle = ship.fill; 
       ctx.fill(); 
       ctx.stroke(); 
      } 
     } 

     function drawShip(ship) { 
      ctx.beginPath(); 
      ctx.moveTo(ship.x, ship.y); 
      ctx.lineTo(ship.right, ship.y); 
      ctx.lineTo(ship.right + 10, ship.y + ship.height/2); 
      ctx.lineTo(ship.right, ship.bottom); 
      ctx.lineTo(ship.x, ship.bottom); 
      ctx.closePath(); 
     } 

     function handleMouseDown(e) { 

      scrolltop = $(document).scrollTop(); 
      scrollleft = $(document).scrollLeft(); 

      mouseX = parseInt(e.clientX - offsetX + scrollleft); 
      mouseY = parseInt(e.clientY - offsetY + scrolltop); 

      lastX = mouseX; 
      lastY = mouseY; 
      mouseIsDown = true; 

      console.log('ready: offsetX=' + offsetX + ", " + "offsetY=" + offsetY, scrolltop, scrollleft); 
     } 

     function handleMouseUp(e) { 
      mouseX = parseInt(e.clientX - offsetX + scrollleft); 
      mouseY = parseInt(e.clientY - offsetY + scrolltop); 

      console.log('handleMouseUp: mouseX=' + mouseX + ", " + "mouseY=" + mouseY); 

      mouseIsDown = false; 
     } 

     function handleMouseMove(e) { 
      if (!mouseIsDown) { 
       return; 
      } 

      mouseX = parseInt(e.clientX - offsetX + scrollleft); 
      mouseY = parseInt(e.clientY - offsetY + scrolltop); 

      console.log('handleMouseMove: mouseX=' + mouseX + ", " + "mouseY=" + mouseY); 

      for (var i = 0; i < ships.length; i++) { 
       var ship = ships[i]; 
       drawShip(ship); 
       if (ctx.isPointInPath(lastX, lastY)) { 
        ship.x += (mouseX - lastX); 
        ship.y += (mouseY - lastY); 
        ship.right = ship.x + ship.width; 
        ship.bottom = ship.y + ship.height; 
       } 
      } 
      lastX = mouseX; 
      lastY = mouseY; 
      drawAllShips(); 
     } 

     $("#board").mousedown(function (e) { 
      handleMouseDown(e); 
     }); 

     $("#board").mousemove(function (e) { 
      handleMouseMove(e); 
     }); 

     $("#board").mouseup(function (e) { 
      handleMouseUp(e); 
     }); 

}); 

DEMO HERE