보관할 충돌 기능

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 개)의 요구 2로 추가 :

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

내가 완전히 확실하지 않다 무엇 ' 루프로 수행하려고 시도하므로 필요에 따라 조정하십시오.

jsFiddle of option #2.

모양의 강조는 커서가 아래쪽 테두리를 종료 할 때 깰 것으로 보인다. onmousemove 이벤트는 캔버스 요소에만 있기 때문입니다. 전체 문서에 해당 이벤트를 변경하거나 캔버스 요소에 onmouseleave 이벤트를 추가 할 수 있습니다.

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