ฉันจะคำนวณระยะห่างระหว่างจุดและสี่เหลี่ยมผืนผ้าที่จัดแนวแกนได้อย่างไร

ฉันมีรูปสี่เหลี่ยมผืนผ้า 2 มิติที่มี 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;

หากระยะทางกำลังสองนั้นเป็นศูนย์ก็หมายความว่าจุดนั้นสัมผัสหรืออยู่ภายในสี่เหลี่ยม

ฉันถือว่าสี่เหลี่ยมผืนผ้าของคุณอยู่ในแนวแกน

คุณเพียงแค่ต้อง "ยึด" จุดเข้าไปในสี่เหลี่ยมแล้วคำนวณระยะทางจากจุดยึด

จุด = (px, py), สี่เหลี่ยมผืนผ้า = (rx, ry, แบนด์วิดท์, 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) );
}

คุณต้องใช้การชนกันของวงกลมสี่เหลี่ยมสำหรับสิ่งนี้ มีคำถามที่คล้ายกันใน Stack Overflow

ศูนย์กลางของวงกลมของคุณจะเป็นจุดที่สงสัยและรัศมีจะเป็นระยะทางที่คุณต้องการตรวจสอบ

หากคุณกำลังพยายามหาระยะทางจากจุดหนึ่งไปยังอีกมุมหนึ่งของสี่เหลี่ยมการทำงานกับเก้าภูมิภาคที่สร้างโดยสี่เหลี่ยมอาจเป็นวิธีที่เร็วที่สุด:

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 มุมโดยการใช้ symmetry สี่เหลี่ยมผืนผ้านั้นมีการบันทึกไว้ที่ stackoverflow

คุณสามารถใช้สิ่งนี้: