Перемещение нескольких элементов Dom с использованием массива анонимных координат - PullRequest
Новая
       121

Перемещение нескольких элементов Dom с использованием массива анонимных координат

1 голос
/ 19 июня 2020

Я сейчас пытаюсь переместить некоторый div, используя массив координат fre sh.

Массив динамически создается библиотеками обнаружения лиц (face-api. js). Это выводит boundingBox с координатами x / y.

Используя один div, нет проблем для привязки первой координаты к элементу Dom. Но с несколькими координатами я изо всех сил пытаюсь найти правильный путь.

Face-Api.js div mapping

Массив постоянно меняется, и несколько div не следуют за обнаружением. Я пробовал реализовать ближайшего соседа al go.

Я попытался отсортировать анонимные координаты, затем отсортировать мои координаты div и l oop, чтобы применить анонимные координаты к каждому div.

Вот пример кода для одного кадра: 

...
let processResult = [{ x: 123}, {x: 456}, {x:789}]
let availableDiv = [xa, xb, xc , xd , xe, xf]

processResult.sort( (a, b) => parseInt(a.detection.box.x) - parseInt(b.detection.box.x));
availableDiv.sort( (a, b) => {
  parseInt(a.selector.getBoundingClientRect().x) - parseInt(b.selector.getBoundingClientRect().x)
});

processResult.forEach( (item, resultsIndex) => {

if (availableDiv.length > 0 && processResult.length > 0 ) {

  closest = availableDiv[0];
  function DistSquared(pt1, pt2) {
    var diffX = parseInt(pt1.left) - parseInt(pt2.left);
    var diffY = parseInt(pt1.height) - parseInt(pt1.height);
    return (diffX*diffX+diffY*diffY);
  }

  let shortestDistance = DistSquared(myPosition, availableFuseau[0]);

  for (let avaIndex = 0; avaIndex < availableDiv.length; avaIndex++) {
     var d = DistSquared(myPosition, availableDiv[avaIndex].selector.style);
     if (d < shortestDistance) {
        closest = availableDiv[avaIndex];
        closest.index = avaIndex
        shortestDistance = d;
     }
}

availableDiv.splice(closest.index, 1)

// change div coordinate
...

Основная цель - сделать плавный переход между двумя изменениями кадра / координат и, что наиболее важно, выбирать правильный элемент Div в каждом кадре ...

Есть ли у кого-нибудь подсказка, чтобы помочь мне?

...