javascript यह जांचने के लिए कि कोई तत्व अन्य तत्वों को ओवरलैप कर रहा है या नहीं?




boundary (4)

संस्करण 8 से पहले इंटरनेट एक्सप्लोरर में, लौटाए गए TextRectangle ऑब्जेक्ट में भौतिक पिक्सेल आकार में निर्देशांक होते हैं, जबकि संस्करण 8 से, इसमें लॉजिकल पिक्सेल आकार में निर्देशांक होते हैं।

यदि आपको पूरे तत्व के बाध्य आयत की आवश्यकता है, तो getBoundingClientRect विधि का उपयोग करें।

इस प्रश्न का उत्तर यहां दिया गया है:

मेरे पास दो div तत्व हैं। उनमें से प्रत्येक 450px चौड़ाई और ऊंचाई है। मैं कैसे जांच करूं कि पहला div दूसरे div को ओवरलैप कर रहा है या नहीं?

मैंने जावास्क्रिप्ट को सबसे ज्यादा उपयोग करने का प्रयास किया है, लेकिन यह थोड़ा जटिल है। चूंकि मैं यह पता लगाने की कोशिश कर रहा हूं कि यह वास्तव में कैसे काम करता है, मैं एक सरल कोड के साथ शुरू करना चाहता हूं।

मुझे पता चला कि मैं तत्व की सीमा प्राप्त करने के लिए .getClientRects का उपयोग कर सकता हूं, लेकिन मुझे बिल्कुल यकीन नहीं है कि सीमाओं की तुलना कैसे करें।

कृपया मुझे सलाह दीजिये!


getBoundingClientRect() माध्यम से getBoundingClientRect() और rect2 लिए कुछ ऐसा पुनर्प्राप्त किया गया:

var overlap = !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)

समझाएं: यदि अभिभावक में एक या अधिक अभिव्यक्ति true , तो कोई ओवरलैपिंग नहीं है। यदि सब false , तो एक ओवरलैपिंग होना चाहिए।


element.getBoundingClientRect () आधुनिक ब्राउज़रों में शांत है, स्क्रीन के सापेक्ष एक बाध्यता प्रदान करता है। यदि परीक्षण बाउंड ओवरलैप हो, तो परीक्षण से अधिक देखें, यह सरल ज्यामिति है ...

ओह क्षमा करें ... आपका संपादन बहुत देर हो गया ...


यहां कुछ दिन पहले मैंने कुछ किया है: https://gist.github.com/yckart/7177551

var AABB = {
  collide: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return !(
      rect1.top > rect2.bottom ||
      rect1.right < rect2.left ||
      rect1.bottom < rect2.top ||
      rect1.left > rect2.right
    );
  },

  inside: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return (
      ((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
      ((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
      ((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
      ((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
    );
  }
};




boundary