javascript-当画布在屏幕外滚动时,无法在画布中拖动对象
作者:互联网
我已经在上面使用了工作正常的jsFiddle,其中包含draggable battleships on a canvas和have just added some HTML paragraphs.突然我不能再拖曳战舰了.
我尝试在鼠标处理程序中添加e.pageX和e.pageY,但这无济于事.
在这种情况下如何处理滚动内容?
请在下面查看屏幕截图和有问题的JavaScript代码的副本-
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);
});
});
解决方法:
您还需要考虑文档滚动值
这是我创建的示例
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);
});
});
标签:canvas,mouseevent,mousemove,javascript,scroll 来源: https://codeday.me/bug/20191118/2030981.html