Как рассчитать расстояние между точкой и выровненным по оси прямоугольником?

У меня есть 2D-прямоугольник с позициями x, y, высотой и шириной, а также случайно расположенная точка рядом.

Есть ли способ проверить, может ли эта точка сталкиваться с прямоугольником, если он ближе определенного расстояния? Представьте себе невидимый радиус за пределами этой точки, сталкивающейся с указанным прямоугольником. У меня проблемы с этим просто потому, что это не квадрат!

Если (x,y)это центр прямоугольника, квадрат расстояния от точки (px,py)до границы прямоугольника можно вычислить следующим образом:

dx = max(abs(px - x) - width / 2, 0);
dy = max(abs(py - y) - height / 2, 0);
return dx * dx + dy * dy;

Если это квадратное расстояние равно нулю, это означает, что точка касается или находится внутри прямоугольника.

Я предполагаю, что ваш прямоугольник выровнен по оси.

Вам просто нужно «зажать» точку в прямоугольнике, а затем вычислить расстояние от зажатой точки.

Point = (px, py), Rectangle = (rx, ry, rwidth, rheight) // (верхний левый угол, размеры)

function pointRectDist (px, py, rx, ry, rwidth, rheight)
{
    var cx = Math.max(Math.min(px, rx+rwidth ), rx);
    var cy = Math.max(Math.min(py, ry+rheight), ry);
    return Math.sqrt( (px-cx)*(px-cx) + (py-cy)*(py-cy) );
}

Для этого вы должны использовать столкновения прямоугольник с кругом. Есть похожий вопрос по переполнению стека.

Центром вашего круга будет точка, о которой идет речь, а радиусом будет расстояние, которое вы хотите проверить.

Если вы пытаетесь определить расстояние от точки до края прямоугольника, работа с каждой из девяти областей, созданных прямоугольником, может быть наиболее быстрой:

function pointRectangleDistance(x, y, x1, y1, x2, y2) {
    var dx, dy;
    if (x < x1) {
        dx = x1 - x;
        if (y < y1) {
            dy = y1 - y;
            return Math.sqrt(dx * dx + dy * dy);
        }
        else if (y > y2) {
            dy = y - y2;
            return Math.sqrt(dx * dx + dy * dy);
        }
        else {
            return dx;
        }
    }
    else if (x > x2) {
        dx = x - x2;
        if (y < y1) {
            dy = y1 - y;
            return Math.sqrt(dx * dx + dy * dy);
        }
        else if (y > y2) {
            dy = y - y2;
            return Math.sqrt(dx * dx + dy * dy);
        }
        else {
            return dx;
        }
    }
    else {
        if (y < y1) {
            return y1 - y;
        }
        else if (y > y2) {
            return y - y2;
        }
        else {
            return 0.0; // inside the rectangle or on the edge
        }
    }
}

[Измененный ответ на основе комментариев]

Если вы хотите увидеть, находится ли точка в пределах, скажем, 10 единиц, если серый прямоугольник на изображении ниже, вы проверяете, находится ли точка в каком-либо из

1. красный прямоугольник
2. Синий прямоугольник
3. любой из зеленых кругов (радиус 10)

inside=false;

bluerect.x=oldrect.x-10;
bluerect.y=oldrect.y;
bluerect.width=oldrect.width;
bluerect.height=oldrect.height+20;

if(  point.x >=bluerect && point.x <=redrect.x+bluerect.width &&
     point.y >=bluerect && point.y <=redrect.y+bluerect.height){
         //now point is side the blue rectangle
         inside=true;
}

redrect.x=oldrect.x;
redrect.y=oldrect.y-10;
redrect.width=oldrect.width+20;
redrect.height=oldrect.height;

if(  point.x >=redrect&& point.x <=redrect.x+redrect.width &&
     point.y >=redrect&& point.y <=redrect.y+redrect.height){
         //now point is side the redrectangle
         inside=true;
}


d1= distance(point, new point(oldrect.x, oldrect.y)) //calculate distance between point and (oldrect.x, oldrect.y)
d2= distance(point, new point(oldrect.x+10, oldrect.y))
d3= distance(point, new point(oldrect.x, oldrect.y+10))
d4= distance(point, new point(oldrect.x+10, oldrect.y+10))
if (d1 < 10 || d2 <10 || d3 < 10 || d4 <10){
    inside=true;
}

//inside is now true if the point is within 10 units of rectangle

Этот подход немного не элегантен. Подобный метод, который избегает необходимости тестировать все 4 угла с помощью симметрии прямоугольника, описан здесь на stackoverflow

Вы можете использовать что-то вроде этого: