javascript - 重力点不能与其他元素一起正常工作

Question

有一个很棒的代码笔叫做 Gravity Points我非常喜欢它，并想在我的下一个项目中使用它，但事实证明，只有当它是页面上的唯一元素时它才能很好地工作。一旦开始在其上方和下方添加内容，它就会错误计算鼠标位置。

看看my fork here ，我在上面添加了内容。请注意，如果 Canvas 与屏幕完美对齐，则重力点会创建在正确的位置，但如果您在向上滚动到一半时单击 Canvas ，则重力点会向下创建几个像素。

我对 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> element 有自己的坐标系，与文档坐标系(mouseEvents 发送的坐标系)不同。
你需要做的是检查 Canvas 的边界框并删除它到你的 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
   }));
}