¿Cómo calculo la distancia entre un punto y un rectángulo alineado con un eje?

Tengo un rectángulo 2D con posición x, y, altura y ancho, y un punto ubicado al azar cerca.

¿Hay alguna manera de verificar si este punto podría chocar con el rectángulo si está más cerca de cierta distancia? Imagine un radio invisible fuera de ese punto que choca con dicho rectángulo. ¡Tengo problemas con esto simplemente porque no es un cuadrado!

Si (x,y)es el centro del rectángulo, la distancia al cuadrado desde un punto (px,py)hasta el borde del rectángulo se puede calcular de esta manera:

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

Si esa distancia al cuadrado es cero, significa que el punto toca o está dentro del rectángulo.

Supongo que su rectángulo está alineado con el eje.

Solo tiene que "sujetar" el punto en el rectángulo y luego calcular la distancia desde el punto sujeto.

Punto = (px, py), Rectángulo = (rx, ry, rwidth, rheight) // (esquina superior izquierda, dimensiones)

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) );
}

Debe usar colisiones círculo-rectángulo para esto. Hay un similar pregunta sobre Stack Overflow.

El centro de su círculo sería el punto en cuestión, y el radio sería la distancia que desea verificar.

Si está tratando de calcular la distancia desde un punto hasta el borde de un rectángulo, trabajar con cada una de las nueve regiones creadas por el rectángulo podría ser la forma más rápida:

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
        }
    }
}

[Respuesta modificada basada en comentarios]

Si desea ver si el punto está dentro de 10 unidades si el rectángulo gris en la imagen a continuación, verifique si el punto está en cualquiera de

1. rectángulo rojo
2. Rectángulo azul
3. cualquiera de los círculos verdes (radio 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

Este enfoque es un poco poco elegante. Aquí se documenta un método similar que evita tener que probar las 4 esquinas utilizando la simetría del rectángulo en stackoverflow

Podrías usar algo como esto: