javascript - 检查鼠标光标是否在带坐标的数组范围内

Question

我目前正在使用坐标数组在 Canvas 上绘制一系列点。

var points =  [[102, 267], [254, 163], [343, 318], [522, 112], [610, 163], [681, 112]];

var canvas = document.getElementById('graph');
var c = canvas.getContext('2d');

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function drawPoints(){
  for (i = 0; i < points.length; i++) {
    c.beginPath(); 
    c.arc(points[i][0], points[i][1], 5, 0, 2 * Math.PI, true);
    c.fillStyle = "black";
    c.fill();
  }
}
drawPoints();

我正在尝试编写一个函数来识别这些点并在我将鼠标悬停在 Canvas 上时标记它们。

canvas.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  var currMouseX = mousePos.x;
  var currMouseY = mousePos.y;

  for (i = 0; i < points.length; i++){
    if ((points[i][0] >= currMouseX-4 && points[i][0] <= currMouseX+4) && (points[i][1] >= currMouseY-4 && points[i][1] <= currMouseY+4)) {
            console.log('in range of '+points[i]);
      c.beginPath(); 
      c.arc(points[i][0], points[i][1], 8, 0, 2 * Math.PI, true);
      c.fillStyle = "red";
      c.fill();
    }

  }
});

我遇到的问题是，当鼠标光标离开点的范围时，我想删除标记。

如果我在末尾设置一个简单的 else 语句，则该循环仅适用于数组中的最后一个点，因为 for 循环的其余部分仍会执行。我需要检查点是否被击中，停止 for 循环，检查鼠标是否离开点范围，如果是，清除 Canvas 并重新绘制点。

也许循环不是处理此问题的最佳方法，也许针/干草堆方法会更好，但我不知道如何在嵌套数组中搜索范围而不是单个值时实现此方法。

FIDDLE

Answer 1

你基本上需要一个循环来一直重绘 Canvas :

setInterval(drawPoints, 1000 / 30); // redraw at 30 fps

然后你必须清除 drawPoints 中的 Canvas :

function drawPoints(){
   c.clearRect(0, 0, canvas.width, canvas.height);

  for (i = 0; i < points.length; i++) {
    c.beginPath(); 
    c.arc(points[i][0], points[i][1], 5, 0, 2 * Math.PI, true);
    c.fillStyle = "black";
    c.fill();
  }
}

这导致了一个新问题，当您移动鼠标时，该点只会变红。这就是您应该将 points 从数组数组更改为对象数组的地方:

points = [{x: 123, y: 234, hovered: false}];

在 drawPoints 中:

function drawPoints(){
   c.clearRect(0, 0, canvas.width, canvas.height);

  for (i = 0; i < points.length; i++) {
    c.beginPath(); 
    c.arc(points[i].x, points[i].y, 5, 0, 2 * Math.PI, true);
    c.fillStyle = "black";
    if (points[i].hovered) {
      c.fillStyle = 'red';
    }
    c.fill();
  }
}

最后，您更改移动函数以切换 hovered 标志。我把那件工作留给你。