Как определить, касаются ли два деления / обнаружение столкновения - PullRequest
Новая
       13

Как определить, касаются ли два деления / обнаружение столкновения

0 голосов
/ 16 мая 2018

Я искал по всему Google и здесь для этого, но не нашел ответа, который подходит моей проблеме

(Это действительно упрощенное объяснение) У меня есть два div, которые могут быть перемещены пользователем (используя JavaScript и события нажатия) Мне нужно определить, касаются ли два элемента div / друг над другом и должны ли они вызывать функцию, ответы на которую я видел здесь, но все они используют jQuery, и я хочу использовать чистый JS

Что может быть полезно, так это то, что оба div имеют абсолютные позиции и разные z-индексы установлены в css

EDIT: чтобы прояснить ситуацию, поскольку мое объяснение было очень плохим, один из двух div является стационарным ивторая может двигаться только в направлении Y, но div, который перемещается в направлении Y, вращается с использованием анимации регистра

Ответы [ 4 ]

0 голосов
/ 16 мая 2018

Возможно, есть лучший способ (это не очень СУХОЙ), но он должен работать, просто замените "div1" и "div2" вашими идентификаторами div: 

let div1 = document.getElementById('div1').getBoundingClientRect();
let div1Top = div1.top;
let div1Left = div1.left;
let div1Right = div1.right
let div1Bottom = div1.bottom

let div2 = document.getElementById('div2').getBoundingClientRect();
let div2Top = div1.top;
let div2Left = div1.left;
let div2Right = div1.right
let div2Bottom = div1.bottom

if ((div2Top > div1Top && div2Top < div1Bottom)||(div2Bottom > div1Top && div2Bottom < div1Bottom)) {
  let verticalMatch = true
} else{
  let verticalMatch = false
}

if ((div2Right > div1Left && div2Right < div1Right)||(div2Left < div1Right && div2Left > div1Left)) {
  let horizontalMatch = true
} else {
  let horizontalMatch = false
}

if (horizontalMatch && vertialMatch){
  let intersect = true
} else {
  let intersect = false
}
0 голосов
/ 16 мая 2018

Вы можете использовать процесс, описанный в этом посте Анандом Тангаппаном, чтобы получить вычисленное местоположение элемента. Затем вы можете получить вычисленные ширину и высоту, используя getComputedStyle () ( документация здесь ), и проверить, пересекаются ли они, используя простые проверки неравенства.

РЕДАКТИРОВАТЬ: В качестве альтернативы, вы можете просто читать их значения местоположения напрямую, так как вы используете абсолютное положение. Затем вы можете пропустить более сложный способ получения вычисленного местоположения элемента.

0 голосов
/ 16 мая 2018

Поскольку вы разрешаете пользователю перемещать DIV, и они оба являются абсолютными, у вас должен быть доступ к атрибутам STYLE DIV.

Получить свойства top, left, width и height.

Рассчитать нижние и правые свойства. Теперь у вас есть все четыре угловые координаты.

Поскольку они оба прямоугольники, вы можете проверить, находится ли верх или низ dev A между верхом и низом div B AND И находится ли левый или правый между левым и правым dev B.

Единственное хорошее в этом - то, что вам нужно только проверить A -> B, потому что любое совпадение будет обнаружено в обоих тестах.

Это работает из-за прямолинейной природы форм. Было бы сложнее, если бы это были треугольники или пятиугольники или они не были выпуклой формы.

Стоит отметить, что если вы используете анимацию CSS / JS, вы можете увеличить «зону столкновения», если у вас есть объекты, движущиеся с высокой скоростью. В противном случае предметы могут пройти между проверками.

0 голосов
/ 16 мая 2018

try Element.getBoundingClientRect () на обоих делителях и с их координатами вы можете сделать обнаружение столкновений

...