Как проверить, перекрывает ли элемент другие элементы?

У меня есть два элемента div. Каждый из них имеет ширину и высоту 450 пикселей. Как проверить, перекрывает ли первый div второй div?Как проверить, перекрывает ли элемент другие элементы?

Я пытался использовать javascript hittest, но это немного сложно. Поскольку я пытаюсь выяснить, как это работает, я хотел бы начать с более простого кода.

Я узнал, что могу использовать .getClientRects, чтобы получить границу элемента, но я не совсем уверен, как сравнивать границы.

Пожалуйста, сообщите мне!

источник

2012-08-22 Moon

http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection Вы можете увидеть, если это поможет вам. – user1071979

Итак, что вы спрашиваете, так это то, что для массива ограничивающих прямоугольников, как вы определяете, какие из них перекрываются? – Blender

@Blender // точно – Moon

Нечто подобное для rect1 и rect2 извлеченной с помощью getBoundingClientRect():

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

Объясните: если одно или несколько выражений в Parenthese являются true, нет перекрытия. Если все false, должно быть перекрытие.

источник

2012-08-22 05:54:23

работает отлично ... и намного проще, чем другие функции hittest на google !!!! – Moon

Только что понял, что это работает только в том случае, если оба элемента в настоящее время видны - позор! – graygilmore

Это потрясающе, я смог заменить свое решение JQuery (которое требовалось захватить левую позицию/высоту и сделать математику) с этим, и это увеличило производительность на много. Спасибо @Buu – Johannes

element.getBoundingClientRect() хорошо подходит для современных браузеров, обеспечивает ограничение по отношению к экрану. смотрите here чем тест, если ограничительные коробки перекрываются, то есть простая геометрия ...

ой простите ... нашел, что ваша правка слишком поздно ...

источник

2012-08-22 05:40:49 philipp

В Internet Explorer ранее версии 8, возвращаемый TextRectangle объект содержит координаты в размере физического пикселя, а с версии 8 он содержит координаты в размере логического пикселя.

Если вам нужен ограничивающий прямоугольник всего элемента, используйте метод getBoundingClientRect.

источник

2012-08-22 05:51:24

Вот то, что я сделал несколько дней назад: 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)) 
    ); 
    } 
};

источник

2013-10-27 03:05:13 yckart

Внутри можно упростить: 'rect1.top <= rect2.bottom && rect1.bottom> = rect2.top && rect1.left <= rect2.right && rect1.right> = rect2.left' –

Как проверить, перекрывает ли элемент другие элементы?

ответ

Смежные вопросы