Comment calculer la distance entre un point et un rectangle aligné sur l'axe?

J'ai un rectangle 2D avec la position x, y, la hauteur et la largeur, et un point positionné au hasard à proximité.

Existe-t-il un moyen de vérifier si ce point peut entrer en collision avec le rectangle s'il est plus proche d'une certaine distance? Imaginez un rayon invisible à l'extérieur de ce point entrant en collision avec ledit rectangle. J'ai des problèmes avec ça simplement parce que ce n'est pas un carré!

Si (x,y)est le centre du rectangle, la distance au carré d'un point (px,py)à la bordure du rectangle peut être calculée de cette façon:

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

Si cette distance au carré est nulle, cela signifie que le point touche ou se trouve à l'intérieur du rectangle.

Je suppose que votre rectangle est aligné sur l'axe.

Il vous suffit de "fixer" le point dans le rectangle, puis de calculer la distance à partir du point fixé.

Point = (px, py), Rectangle = (rx, ry, rwidth, rheight) // (coin supérieur gauche, dimensions)

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

Pour cela, vous devez utiliser des collisions cercle-rectangle. Il y a une question similaire sur Stack Overflow.

Le centre de votre cercle serait le point en question et le rayon serait la distance que vous souhaitez vérifier.

Si vous essayez de déterminer la distance entre un point et le bord d'un rectangle, travailler avec chacune des neuf régions créées par le rectangle peut être le moyen le plus rapide:

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

[Réponse modifiée sur la base des commentaires]

Si vous voulez voir si le point est à moins de 10 unités si le rectangle gris dans l'image ci-dessous, vous vérifiez si le point est dans l'un des

1. rectangle rouge
2. Rectangle bleu
3. l'un des cercles verts (rayon 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

Cette approche est un peu inélégante. Une méthode similaire qui évite d'avoir à tester les 4 coins en utilisant la symétrie rectangle est documentée ici sur stackoverflow

Vous pouvez utiliser quelque chose comme ceci: