Question

有一个名为Gravity Points的令人敬畏的编码器，我非常喜欢并希望在我的下一个项目中使用，但事实证明，只有它是页面上唯一的元素才能正常工作。一旦开始在其上方和下方添加内容，它就会错误地计算鼠标位置。

看看my fork here，我已添加了上面的内容。请注意，如果画布与屏幕完美对齐，则会在右侧点创建重力点，但如果在向上滚动一半时单击画布，则会创建几个像素的点。

我对javascript和jquery不太好，虽然我能够理解它正在调用哪些函数以及哪些函数用于绘制点但是我无法理解计算的发生位置以及它与滚动位置。这个函数似乎是在左键单击时触发但光标坐标来自哪里？

function mouseDown(e) {
        for (var i = gravities.length - 1; i >= 0; i--) {
            if (gravities[i].isMouseOver) {
                gravities[i].startDrag(mouse);
                return;
            }
        }
        gravities.push(new GravityPoint(e.clientX, e.clientY, G_POINT_RADIUS, {
            particles: particles,
            gravities: gravities
        }));
    }

那么有人可以看看它并提供一些见解吗？

Answer 1

<canvas>元素有自己的坐标系，它与文档1（mouseEvents发送的坐标系）不同。
您需要做的是检查画布的边界框并将其偏移量移除到mouseEvents坐标：

canvas.onmousemove = function(mouseEvent){
  var rect = canvas.getBoundingClientRect(); 
  var x = mouseEvent.clientX - rect.left; 
  var y = mouseEvent.clientY - rect.top;
  // doSomething with x and y
  for (var i = gravities.length - 1; i >= 0; i--) {
    if (gravities[i].isMouseOver) {
      gravities[i].startDrag(mouse);
      return;
     }
   }
  gravities.push(new GravityPoint(x, y, G_POINT_RADIUS, {
    particles: particles,
    gravities: gravities
   }));
}

重力点与其他元素无法正常工作

1 个答案: