Блог

Главная - Вопросы по программированию - Создание случайного местоположения для текстового интервала внутри родительского div

Создание случайного местоположения для текстового интервала внутри родительского div

#javascript #css #dom

Вопрос:

Я работаю над проектом, в котором я создаю облако слов на основе данных, которые я получаю из API. Я пытаюсь найти способ динамически позиционировать каждое слово, одновременно избегая столкновений и предотвращая их выход за пределы родительского div. Для этого мне понадобилась следующая информация: Размер отображаемого текста, общее пространство (высота и ширина) для всех слов, сохраненные индексы слов, которые уже были отрисованы.

Я смог добиться этого, расположив каждое слово внутри промежутка и установив высоту и ширину на авто без полей или отступов. Затем я могу использовать injectedSpan.clientWidth , чтобы получить ширину элемента и injectedSpan.clientHeight получить значения высоты. Я также обнаружил, что могу использовать injectedSpan.getBoundingClientRect() и возвращать объект со следующей информацией:

 x : 0

y : 50

width : 708

height : 0

top : 50

right : 708

bottom : 50

left : 0

Как только у меня появилась эта информация, я подумал, что будет довольно легко отобразить текст в уникальных местах, но по какой-то причине все еще остается много текста, который перекрывает друг друга. Я написал функцию JS, которая проверяет, находятся ли верхние и правые значения в диапазоне существующих элементов, и если да, то генерирует новое уникальное местоположение. Я не уверен, что упускаю что-то очевидное. Вот мой код до сих пор: https://jsfiddle.net/amotor/3fuje46q/22/

Ответ №1:

как ваша просьба.

 function randomLoc(elm, parent){
  function randomNumber(min, max) {  
      return Math.floor(Math.random() * (max - min)   min); 
  }  
  let scH = parent.offsetHeight;
  let scW = parent.offsetWidth;
  
  elm.setAttribute("style", 'left: ' randomNumber(0, scW) 'px; top:' randomNumber(0, scH) 'px;');
}
randomLoc(
document.getElementById('testElm'),
document.getElementById('parent')
); 
 #parent{
  width:400px;
  height:200px;
  background:yellow;
}
#testElm{
  position:relative;
} 
 <div id="parent">
  <button id="testElm">test</button
</div>
Метки: