Нарисуйте диагональную линию между двумя точками с помощью CSS и JS

#javascript #css

Вопрос:

Я пытаюсь нарисовать диагональную линию с помощью CSS и JS между элементами, подобными этому.

У меня есть два дива, которые я знаю как их левые, так и верхние координаты.

 <div class='wrapper'>
  <div class='point' style='left: 40px; top: 40px;'></div>
  <div class='point' style='left: 260px; top: 120px;'></div>
  <div class='line'></div>
</div>

Но как здесь рассчитать степень поворота и значение высоты?

 const point1 = document.getElementsByClassName('point')[0]
const point2 = document.getElementsByClassName('point')[1]
const line = document.getElementsByClassName('line')[0]

const lineLeft = parseInt(point1.style.left)   point1.clientWidth
const lineTop = parseInt(point1.style.top)   point1.clientHeight

line.style.left = `${lineLeft}px`
line.style.top = `${lineTop}px`
line.style.height = '?'
line.style.transform = 'rotate(?deg)'

Вот его кодовая версия.

Ответ №1:

Если вам нужно сделать это с помощью CSS и Javascript, это возможно, но не идеально. Вам придется проделать некоторую дополнительную работу, чтобы рассчитать угол между точками и расстояние между вашими точками. Взгляните на образец ниже:

 const point1 = document.getElementsByClassName('point')[0]
const point2 = document.getElementsByClassName('point')[1]
const line = document.getElementsByClassName('line')[0]

// Find the points based off the elements left and top
var p1 = {x: point1.offsetLeft, y: point1.offsetTop};
var p2 = {x: point2.offsetLeft, y: point2.offsetTop};

// Get distance between the points for length of line
var a = p1.x - p2.x;
var b = p1.y - p2.y;
var length = Math.sqrt( a*a   b*b );

// Get angle between points
var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;

// Get distance from edge of point to center
var pointWidth = point1.clientWidth / 2;
var pointHeight = point1.clientWidth / 2;

// Set line distance and position
// Add width/height from above so the line starts in the middle instead of the top-left corner
line.style.width = length   'px';
line.style.left = (p1.x   pointWidth)  'px';
line.style.top = (p1.y   pointHeight)   'px';

// Rotate line to match angle between points
line.style.transform = "rotate("   angleDeg   "deg)";

 .wrapper {
  width: 320px;
  height: 180px;
  position: relative;
  border: 1px solid #aaa;
  background-color: #eee;
}
.point {
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: #555;
}
.line {
  position: absolute;
  height:2px;
  background-color: #d63030;
  transform-origin: left;
}

 <div class='wrapper'>
  <div class='point' style='left: 40px; top: 40px;'></div>
  <div class='point' style='left: 260px; top: 120px;'></div>
  <div class='line'</div>
</div>