使用碰撞功能时继续获取TypeError

Question

我在使用points[i+2]时一直收到此错误，但它不会返回错误，但在使用points[i+1]时（第60行）也无法正常工作。我似乎无法弄清楚为什么会发生这种错误。我查看了控制台，并且不知道undefined 应该。

var canvas = document.getElementById('canvas');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var ctx = canvas.getContext('2d');

var GLOBAL = {};

var point1 = [300, 300];
var point2 = [245, 55];
var point3 = [23, 143];
var point4 = [40, 200];

/*
 * y = mx + b
 * b = y - mx
 * m = y - b/x
 * x = y - b/m
 */
function lineSide(a, b, c) {
  var m = (b[1] - a[1]) / (b[0] - a[0]);
  var b = a[1] - (m * a[0]);

  var result = function(x, y) {
    if (y < m * x + b) return 0;
    else if (y > m * x + b) return 1;
    else if (y == m * x + b) return 2;
    //TODO implement error handling
  }(c[0], c[1]);

  switch (result) {
    case 0:
      return 'lt';
      break;
    case 1:
      return 'gt';
      break;
    case 2:
      return 'eq';
      break;
    default:
      return 'asdf';
      break;
  }
}

function inBounds(p, points) {
  var bcheck = [],
    pcheck = [];
  for (var i = 0; i < points.length; i++) {
    var pointa, pointb;
    if (i + 1 >= points.length) {
      pointa = points[i];
      pointb = points[0];
      bcheck.push(lineSide(pointa, pointb, points[1]));
    } else {
      pointa = points[i];
      pointb = points[i + 1];
      console.log(i + 2);
      console.log(points[i + 2]);
      bcheck.push(lineSide(pointa, pointb, points[i + 2])); // <-- THE PROBLEM AREA.
    }
  }
  // console.log(bcheck);

  for (var i = 0; i < points.length; i++) {
    var pointa, pointb;
    if (i + 1 >= points.length) {
      pointa = points[i];
      pointb = points[0];
      pcheck.push(lineSide(pointa, pointb, p));
    } else {
      pointa = points[i];
      pointb = points[i + 1];
      pcheck.push(lineSide(pointa, pointb, p));
    }
  }

  console.log(pcheck)
  for (var i in bcheck) {
    if (bcheck[i] != pcheck[i]) return false;
  }

  return true;
}

canvas.onmousemove = function(e) {
  GLOBAL.mouseX = e.clientX;
  GLOBAL.mouseY = e.clientY;
}

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  if (inBounds([GLOBAL.mouseX, GLOBAL.mouseY], [point1, point2, point3, point4])) {
    ctx.fillStyle = 'red';
  } else {
    ctx.fillStyle = 'black';
  }

  ctx.beginPath();
  ctx.moveTo(point1[0], point1[1]);
  ctx.lineTo(point2[0], point2[1]);
  ctx.lineTo(point3[0], point3[1]);
  ctx.lineTo(point4[0], point4[1]);
  ctx.closePath();
  ctx.fill();

  window.requestAnimationFrame(render);
}

render();

Answer 1

需要调整inBounds()内的循环。

第60行只需要加一个：

bcheck.push(lineSide(pointa, pointb, points[i + 1])); // <-- THE PROBLEM AREA.

或者第51行的if块需要加2：

if (i + 2 >= points.length) {

我并不完全确定您在循环中尝试完成的任务，因此请根据需要进行调整。

jsFiddle of option #2.

当光标通过底部边框退出时，形状突出显示似乎会中断。这是因为onmousemove事件仅在canvas元素上。您可以将该事件更改为整个文档，或将onmouseleave事件添加到canvas元素。

canvas.onmouseleave = function(e) {
    GLOBAL.mouseX = undefined;
    GLOBAL.mouseY = undefined;
};