Come calcolo la distanza tra un punto e un rettangolo allineato sull'asse?

Ho un rettangolo 2D con posizione x, y, altezza e larghezza e un punto posizionato casualmente nelle vicinanze.

C'è un modo per verificare se questo punto potrebbe scontrarsi con il rettangolo se è più vicino di una certa distanza? Immagina un raggio invisibile al di fuori di quel punto in collisione con detto rettangolo. Ho problemi con questo semplicemente perché non è un quadrato!

Se (x,y)è il centro del rettangolo, la distanza quadrata da un punto (px,py)al bordo del rettangolo può essere calcolata in questo modo:

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

Se la distanza al quadrato è zero, significa che il punto tocca o è all'interno del rettangolo.

Presumo che il tuo rettangolo sia allineato all'asse.

Devi solo "bloccare" il punto nel rettangolo e quindi calcolare la distanza dal punto bloccato.

Point = (px, py), Rectangle = (rx, ry, rwidth, rheight) // (angolo in alto a sinistra, dimensioni)

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

Per questo è necessario utilizzare le collisioni cerchio-rettangolo. C'è una domanda simile su Stack Overflow.

Il centro della tua cerchia sarebbe il punto in questione e il raggio sarebbe la distanza che desideri controllare.

Se stai cercando di capire la distanza da un punto al bordo di un rettangolo, lavorare con ognuna delle nove regioni create dal rettangolo potrebbe essere il modo più veloce:

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

[Risposta modificata in base ai commenti]

Se vuoi vedere se il punto è dentro diciamo 10 unità se il rettangolo grigio nell'immagine qui sotto, controlla se il punto è in uno qualsiasi di

1. rettangolo rosso
2. Rettangolo blu
3. uno qualsiasi dei cerchi verdi (raggio 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

Questo approccio è un po 'inelegante. Un metodo simile che evita di dover testare tutti e 4 gli angoli utilizzando la simmetria del rettangolo è documentato qui su StackOverflow

Puoi usare qualcosa del genere: