Halten Typeerror bekommen, wenn Funktion Kollision

Question

Ich halte diesen Fehler, wenn points[i+2] verwenden, wird es keinen Fehler zurück, aber nicht wie angenommen, entweder bei der Verwendung von points[i+1] (Linie 60). Ich kann nicht herausfinden, warum dieser Fehler passiert. Ich schaute in die Konsole und weiß nicht, was undefined sein sollte.

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

Die Schleife innerhalb inBounds() muss angepasst werden.

Entweder Linie 60 muss nur hinzufügen, indem Sie ein:

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

Oder die, wenn Block auf der Leitung 51 Bedürfnisse von zwei hinzuzufügen:

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

Ich bin nicht ganz sicher, was Sie‘ Versuchen Sie es mit der Schleife zu erreichen, passen Sie sie also an.

jsFiddle of option #2.

Die Form Markierung scheint zu brechen, wenn der Cursor über den unteren Rand austritt. Das liegt daran, dass sich das Ereignis onmousemove nur auf dem Canvas-Element befindet. Sie können dieses Ereignis für das gesamte Dokument ändern oder ein Ereignis onmouseleave zum Canvas-Element hinzufügen.

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