矩形在多边形内的运动约束

Question

我正在使用库（PolyK）来计算在多边形（U形）内拖动矩形的位置。

我正在使用光线投射获取增量点（多边形外部的点）来计算新位置，但我无法使其工作。

Fiddle

任何人都有一些建议，或知道任何图书馆？

JavaScript的：

// a basic poly
var p=[30, 30, 30, 193, 168, 193, 168, 142, 340, 142, 340, 396, 498, 396, 498, 30];

var s = document.getElementById('ray').getContext('2d');

var heroCanvas = document.getElementById('hero').getContext('2d');
var hero = { x: 0, y: 0, width: 50, height: 40 };

var canvas = document.getElementById('canvas').getContext('2d');
canvas.fillStyle = '#f00';
canvas.beginPath();
canvas.moveTo(p[0], p[1]);
for(var i = 2; i< p.length; i+=2){
 canvas.lineTo(p[i], p[i+1]); 
}
canvas.closePath();
canvas.stroke();

document.onmousemove = function(event){
 var x = event.offsetX;
 var y = event.offsetY;
 var resolve = calculatePosition(x, y);
 updateHero(resolve.x, resolve.y);
}

function calculatePosition(x, y){
 // get bounds of poly
    var bounds = PolyK.GetAABB(p);
 // get vertices
    var v1 = {x: x, y: y};
    var v2 = {x: x, y: y + hero.height};
    var v3 = {x: x + hero.width, y: y + hero.height};
    var v4 = {x: x + hero.width, y: y};

 // check which vertice is outside of polygon
    var c1 = PolyK.ContainsPoint(p, v1.x, v1.y);
    var c2 = PolyK.ContainsPoint(p, v2.x, v2.y);
    var c3 = PolyK.ContainsPoint(p, v3.x, v3.y);
    var c4 = PolyK.ContainsPoint(p, v4.x, v4.y);

 // constrain movement inside the poly bounds
    if( x < bounds.x )
        x = bounds.x;
    if( x + hero.width > bounds.x + bounds.width)
        x = bounds.x + bounds.width - hero.width;
    if( y < bounds.y )
        y = bounds.y;
    if( y + hero.height > bounds.y + bounds.height)
        y = bounds.y + bounds.height - hero.height;
 // get delta position with ray cast
    var delta = {x: 0, y: 0};
    console.log(c1, c2, c3, c4);
    if(c1 && !c2 && c3 && c4){
       delta = getDelta(v2, 3);
        x = x+ delta.x;
        y = y+ delta.y;
    } else if(!c1 && !c2 && c3 && c4){
        delta = getDelta(v2, 0);
        x = x + delta.x;
        y = y;
    } else if(!c1 && !c2 && !c3 && c4){
        delta = getDelta(v1, 0);
        x = x + delta.x;
        y = y;
    } else if(c1 && !c2 && !c3 && c4){
        delta = getDelta(v2, 3);
        x = x;
        y = y + delta.y;
    } else if(c1 && c2 && !c3 && c4){
        delta = getDelta(v3, 3);
        x = x+ delta.x;
        y = y+ delta.y;
    } else if (c1 && c2 && !c3 && !c4){
        delta = getDelta(v3, 2);
        x = x + delta.x;
        y = y;
    } else if(c1 && !c2 && !c3 && !c4) {
        delta = getDelta(v1, 2);
        x = x;
        y = y + delta.y;
    }

    return {
        x: x,
        y: y
    };
}

function getDelta(point, n){
    var points = [];
    var rn = 4;    
    var diff = 2*Math.PI/rn;
    var iscc = {dist:0, edge:0, norm:{x:0, y:0}, refl:{x:0, y:0}};   
    for(var i=0; i<rn; i++)
    {
        var dx = Math.cos(i*diff);
        var dy = Math.sin(i*diff);
        var isc = PolyK.Raycast(p, point.x, point.y, dx, dy, iscc);
        if(!isc) iscc.dist = 4000;

        points.push({x: dx*iscc.dist, y:dy*iscc.dist});        
    }
    return points[n];
}

function updateHero(x, y){
    heroCanvas.clearRect(0,0,600,500);
    heroCanvas.beginPath();
    heroCanvas.fillStyle = '#ff0000';
    heroCanvas.rect(x, y, hero.width, hero.height);
    heroCanvas.stroke();     
}

感谢