javascript - 从不在矩形中间的点以一定 Angular 查找矩形边界点

Question

我试图在矩形中显示玩家在我的游戏中瞄准的位置。他在这样一个广场:

我找到了一个 algorithm to find rectangle point by angle , 应用了结果不对(真实游戏截图):

我很快意识到这是因为玩家不在矩形的中心。所以我用我的观点替换了算法中的中心点。但结果只是将点移动了恒定距离:

所以我想我当前的算法需要的不仅仅是一个改变。我的代码:

  function boudaryatangle(theta, point) {
    // reduce the theta  
    theta =  theta % 360; 
    // force it to be the positive remainder, so that 0 <= theta < 360  
    theta = (theta + 360) % 360;  
    // force into the minimum absolute value residue class, so that -180 < theta <= 180  
    if (theta > 180)  
        theta -= 360;  
    // Convert to radians
    theta = (theta * Math.PI / 180);
    // Get a rectangle that has width and height properties
    var rect = this.game.pixels;
    var width = rect.width;
    var height = rect.height;
    // If refference point wasn't provided as second argument
    //TODO: MAKE IT WORK WITH OTHER THEN RECTANGLE CENTRE POINT!
    if(typeof point=="undefined") {
      point = new Float32Array(2);
      point[0] = width/2;
      point[1] = height/2;
    }
    // Here be mysterious math and stuff - all bellow explained here
    var rectAtan = Math.atan2(height, width);
    var tanTheta = Math.tan(theta);
    // By default, region 1 and 3
    var region = true;

    var xFactor = 1;
    var yFactor = 1;

    if ((theta > -rectAtan) && (theta <= rectAtan)) {
        yFactor = -1;  // REGION 1
    } else if ((theta > rectAtan) && (theta <= (Math.PI - rectAtan))) {
        yFactor = -1;  // REGION 2
        region = false;
    } else if ((theta > (Math.PI - rectAtan)) || (theta <= -(Math.PI - rectAtan))) {
        xFactor = -1;  // REGION 3
    } else {
        xFactor = -1;  // REGION 4
        region = false;
    }

    // If region 1, 3
    if (region) {
      point[0] += xFactor * (width / 2.);                                     // "Z0"
      point[1] += yFactor * (width / 2.) * tanTheta;
    } else {
      point[0] += xFactor * (height / (2. * tanTheta));                        // "Z1"
      point[1] += yFactor * (height /  2.);
    }
    return point;
  }

我还必须在其他什么地方应用引用点位置才能使其正常工作？如果点不在矩形范围内，则不要求此函数返回正常结果。

Answer 1

算法的许多部分，例如 height/2.，建议您仍然假设该点位于矩形的中心。如果您的点可以在矩形中的任何位置，您必须调整所有数字，以便您使用，例如，y 或 height - y，具体取决于您的光线是否指向上方或向下。

当您的点是任意的时，您不能再做的简化是四个 Angular 的 Angular 之间存在对称性。这意味着您不能使用区域方法；至少它会更复杂。

另一种方法是计算射线与四个边界的交点，看它们是否落在矩形上:

function borderPoint(rect, pt, angle) {

    // catch cases where point is outside rectangle
    if (pt.x < rect.left) return null;
    if (pt.x > rect.left + rect.width) return null;
    if (pt.y < rect.top) return null;
    if (pt.y > rect.top + rect.height) return null;

    var dx = Math.cos(angle);
    var dy = Math.sin(angle);

    if (dx < 1.0e-16) {         // left border
        var y = (rect.left - pt.x) * dy / dx + pt.y;

        if (y >= rect.top && y <= rect.top + rect.height) {
            return {x: rect.left, y: y};
        }
    }

    if (dx > 1.0e-16) {         // right border
        var y = (rect.left + rect.width - pt.x) * dy / dx + pt.y;

        if (y >= rect.top && y <= rect.top + rect.height) {
            return {x: rect.left + rect.width, y: y};
        }
    }

    if (dy < 1.0e-16) {         // top border
        var x = (rect.top - pt.y) * dx / dy + pt.x;

        if (x >= rect.left && x <= rect.left + rect.width) {
            return {x: x, y: rect.top};
        }
    }

    if (dy > 1.0e-16) {         // bottom border
        var x = (rect.top + rect.height - pt.y) * dx / dy + pt.x;

        if (x >= rect.left && x <= rect.left + rect.width) {
            return {x: x, y: rect.top + rect.height};
        }
    }

    return null;
}

此代码使用 Angular 数学定义，即 0 为东，π/2 为北，π 为西，3·π/2 为南。如果您使用其他定义，您应该调整代码。

当点位于矩形之外或找不到解决方案时，代码返回 null。