Question

我有这个设计并且完美地工作：http://jsfiddle.net/98Bgq/22/

var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

但是当我调整浏览器的屏幕大小时，看起来画布开始以与正常情况完全不同的方式运行，在上面的例子中我不能点击设计的其他几个部分，我该如何解决这个问题呢？

Answer 1

由于您使用的是jQuery，因此使用event.pageX可能最容易。 E.g。

mouseX = e.pageX - $canvas.offset().left;
mouseY = e.pageY - $canvas.offset().top;

编辑：对于非jQuery，这很有效：

mouseX = e.hasOwnProperty('offsetX') ? e.offsetX : e.layerX;
mouseY = e.hasOwnProperty('offsetY') ? e.offsetY : e.layerY;

event.pageY/X返回相对于文档顶部/左侧边缘的鼠标位置。 $elmnt.offset()返回元素相对于文档的坐标。因此，从前者中减去后者可以得到鼠标在画布中的相对位置。

event.offsetY/X / event.layerY/X为您提供相对于当前图层的事件坐标。 layerX不适用于Chrome，因此如果不存在，则会使用offsetX。

Answer 2

偏移和滚动可能会在窗口调整大小时更改：处理resize事件并重新计算它们：

这个小提琴似乎有效： http://jsfiddle.net/gamealchemist/98Bgq/24/

代码：

var offsetX = 0, offsetY = 0;
var scrollX = 0, scrollY = 0;

function computeOffset() {
 canvasOffset = $canvas.offset();
 offsetX = canvasOffset.left;
 offsetY = canvasOffset.top;
 scrollX = $canvas.scrollLeft();
 scrollY = $canvas.scrollTop();
}

computeOffset();

window.onresize = computeOffset;

调整屏幕大小时，Canvas会出现问题

2 个答案: