Hình chữ nhật nhanh đến giao điểm hình chữ nhật

Cách nhanh để kiểm tra xem 2 hình chữ nhật có giao nhau không?

Một tìm kiếm trên internet đã tìm ra một chữ cái này (WOOT!), Nhưng tôi không hiểu cách viết nó bằng Javascript, nó có vẻ được viết bằng một dạng C ++ cổ.

struct
{
    LONG    left;
    LONG    top;
    LONG    right;
    LONG    bottom;
} RECT; 

bool IntersectRect(const RECT * r1, const RECT * r2)
{
    return ! ( r2->left > r1->right
        || r2->right < r1->left
        || r2->top > r1->bottom
        || r2->bottom < r1->top
        );
}

Đây là cách mã đó có thể được dịch sang JavaScript. Lưu ý rằng có một lỗi đánh máy trong mã của bạn và trong bài viết, như các nhận xét đã đề xuất. Cụ thể là r2->right leftnên r2->right < r1->leftvà r2->bottom topnên r2->bottom < r1->topđể chức năng hoạt động.

function intersectRect(r1, r2) {
  return !(r2.left > r1.right || 
           r2.right < r1.left || 
           r2.top > r1.bottom ||
           r2.bottom < r1.top);
}

Trường hợp thử nghiệm:

var rectA = {
  left:   10,
  top:    10,
  right:  30,
  bottom: 30
};

var rectB = {
  left:   20,
  top:    20,
  right:  50,
  bottom: 50
};

var rectC = {
  left:   70,
  top:    70,
  right:  90,
  bottom: 90
};

intersectRect(rectA, rectB);  // returns true
intersectRect(rectA, rectC);  // returns false

function intersect(a, b) {
  return (a.left <= b.right &&
          b.left <= a.right &&
          a.top <= b.bottom &&
          b.top <= a.bottom)
}

Điều này giả định rằng topbình thường nhỏ hơn bottom(tức là ytọa độ tăng xuống dưới).

Đây là cách .NET Framework triển khai Rectangle.Intersect

public bool IntersectsWith(Rectangle rect)
{
  if (rect.X < this.X + this.Width && this.X < rect.X + rect.Width && rect.Y < this.Y + this.Height)
    return this.Y < rect.Y + rect.Height;
  else
    return false;
}

Hoặc phiên bản tĩnh:

public static Rectangle Intersect(Rectangle a, Rectangle b)
{
  int x = Math.Max(a.X, b.X);
  int num1 = Math.Min(a.X + a.Width, b.X + b.Width);
  int y = Math.Max(a.Y, b.Y);
  int num2 = Math.Min(a.Y + a.Height, b.Y + b.Height);
  if (num1 >= x && num2 >= y)
    return new Rectangle(x, y, num1 - x, num2 - y);
  else
    return Rectangle.Empty;
}

Một cách khác đơn giản hơn. (Điều này giả sử trục y tăng xuống dưới).

function intersect(a, b) {
  return Math.max(a.left, b.left) < Math.min(a.right, b.right) &&
          Math.max(a.top, b.top) < Math.min(a.bottom, b.bottom);
}

4 số (max's và min's) trong điều kiện trên cũng cho biết các giao điểm.

Điều này có một loại Rect bạn có thể sử dụng. Nó đã là JavaScript.

https://dxr.mozilla.org/mozilla-beta/source/toolkit/modules/Geometry.jsm

Tôi đã sử dụng một hỗn hợp các phương pháp, để phát hiện một hình chữ nhật nhỏ hơn bên trong một hình chữ nhật lớn. Đây là một phương pháp nodejs và sử dụng chiều rộng / chiều cao nhưng có thể dễ dàng điều chỉnh.

            isIntersectingRect: function (r1, r2) {
              var quickCheck = (r1.x <= r2.x + r2.w &&
                      r2.x <= r1.x + r1.w &&
                      r1.y <= r2.y + r2.h &&
                      r2.y <= r1.y + r1.h)
              if (quickCheck) return true;
              var x_overlap = Math.max(0, Math.min(r1.x + r1.w, r2.x + r2.w) - Math.max(r1.x, r2.x));
              var y_overlap = Math.max(0, Math.min(r1.y + r1.h, r2.y + r2.h) - Math.max(r1.y, r2.y));
              var overlapArea = x_overlap * y_overlap;
              return overlapArea == 0;
            }