Страницы

Поиск по вопросам

понедельник, 3 декабря 2018 г.

Html. Нарисовать линию

Нужно нарисовать или любым иным способом провести линию от одного блока div к другому. Т.е. два элемента связать линией. Элементы генерируются динамически.
Строится все это дело на основе уровней. Например, есть пользователь с уровнем 1. Он будет на самом верху. Дальше пользователи с уровнем 2, они ниже. Нужно их соединить любым способом, как на схеме. Схематичный пример:


Ответ

Например так:
var first = document.getElementById('first'); var second = document.getElementById('second'); var line = document.getElementById('line').getElementsByTagName('line')[0]; function shuffle() { var pos = { ft: Math.round(Math.random() * 50), fl: Math.round(Math.random() * 50), st: Math.round(Math.random() * 100) + 100, sl: Math.round(Math.random() * 100) + 200 } first.style.top = pos.ft + 'px'; first.style.left = pos.fl + 'px'; second.style.top = pos.st + 'px'; second.style.left = pos.sl + 'px'; line.setAttribute('x1', pos.fl + first.offsetWidth); line.setAttribute('y1', pos.ft + first.offsetHeight); line.setAttribute('x2', pos.sl); line.setAttribute('y2', pos.st); } shuffle(); document.getElementById('shuffle').addEventListener('click', shuffle); div { position: absolute; border: 2px solid #000; width: 100px; height: 50px; } #line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke: #F00; stroke-width: 2px; z-index: -1; } #shuffle { position: absolute; top: 20px; left: 50%; }


Комментариев нет:

Отправить комментарий