3

Известны две точки, к примеру:
1) x1 = 50px, y1 = 150px;
2) x2 = 100px, y2 = 200px;
Известна длина между ними, это

d = введите сюда описание изображения
Не понимаю, как динамично через css или js рисовать линию между двумя координатами
Я написал код, с помощью которого собираюсь две точки соединять линией. Xочу от x1 y1 к x2 y2 нарисовать линии, я уже получил эти точки, но вообще не представляю как через точки рисовать линии.

let items = document.querySelectorAll('.item');

let reqAnimFrame = (function() {
    return requestAnimationFrame       ||
           mozRequestAnimationFrame    ||
           webkitRequestAnimationFrame ||
           oRequestAnimationFrame      ||
           msRequestAnimationFrame     ||
    function(callback) {
        setTimeout(callback, 1000 / 60);
    }
})();

function animate({timing, draw, duration}) {

  let start = performance.now();

  reqAnimFrame(function animate(time) {
    // timeFraction изменяется от 0 до 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // вычисление текущего состояния анимации
    let progress = timing(timeFraction);

    draw(progress); // отрисовать её

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}

function createPath(from, to) {

	function elemPosition(elem) {
		let pos = {
		    top: window.pageYOffset + elem.getBoundingClientRect().top,
		    left: window.pageXOffset + elem.getBoundingClientRect().left,
		    right: window.pageXOffset + elem.getBoundingClientRect().right,
		    bottom: window.pageYOffset + elem.getBoundingClientRect().bottom
		};
		return pos;
	}

	function centerElem(elem) {
		let width = elem.offsetWidth;
		let height = elem.offsetHeight;
		let centerX = width/2 + elemPosition(elem).left;
		let centerY = height/2 + elemPosition(elem).top;
		let pos = {
			y: centerY,
			x: centerX
		};
		return pos;
	}

	function render(childF, childT) {

		let div = document.createElement('div');
		div.classList.add('harmony');
		document.body.append(div);

		let start = {
			x: centerElem(childF).x,
			y: elemPosition(childF).bottom
		};

		let final = {
			x: centerElem(childT).x,
			y: elemPosition(childT).top
		};

		/*console.log(start.x, start.y);
		console.log(final.x, final.y);*/
		let d = Math.sqrt( Math.pow((final.x - start.x), 2) + Math.pow((final.y - start.y), 2) );
		/*console.log(d);*/
    
    
    /*animate(); Тут я собираюсь делать анимацию */



	}

	let childFrom = from.children[0];
	let childTo = to.children[0];

	centerElem(childFrom);
	render(childFrom, childTo);

}

window.addEventListener('load', () => {
	createPath(items[0], items[4]);
});
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
	color: black;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.wrapper {
	max-width: 1400px;
	margin: 0 auto;
}

.line:not(:first-child) {
	margin-top: 50px;
}

.item {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex: 1;
}

.item:not(:last-child) {
	margin-right: 2%;
}

.item__img {
	z-index: 2;
}

.item__img:not(:first-child) {
	margin-left: 5px;
}

.line {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	transition: opacity .3s ease-in-out;
}

.harmony {
	z-index: 2;
	position: absolute;
	width: 5px;
	background-color: red;
}
<div class="wrapper">

	<div class="line line__one">

		<div class="item">
			<div class="item__img">
				<img src="https://picsum.photos/500/250">
			</div>
		</div>

		<div class="item">
			<div class="item__img">
				<img src="https://picsum.photos/500/250">
			</div>
		</div>

		<div class="item">
			<div class="item__img">
				<img src="https://picsum.photos/500/250">
			</div>
		</div>

	</div> <!-- .line__one -->

	<div class="line line__two">

		<div class="item">
			<div class="item__img">
				<img src="https://picsum.photos/300/150">
			</div>
			<div class="item__img">
				<img src="https://picsum.photos/300/150">
			</div>
		</div>

		<div class="item">
			<div class="item__img">
				<img src="https://picsum.photos/300/150">
			</div>
			<div class="item__img">
				<img src="https://picsum.photos/300/150">
			</div>
		</div>

		<div class="item">
			<div class="item__img">
				<img src="https://picsum.photos/300/150">
			</div>
			<div class="item__img">
				<img src="https://picsum.photos/300/150">
			</div>
		</div>

	</div> <!-- .line__two -->

	<div class="line line__three">

		<div class="item">
			<div class="item__img">
				<img src="https://picsum.photos/200/100">
			</div>
			<div class="item__img">
				<img src="https://picsum.photos/200/100">
			</div>
			<div class="item__img">
				<img src="https://picsum.photos/200/100">
			</div>
		</div>

		<div class="item">
			<div class="item__img">
				<img src="https://picsum.photos/200/100">
			</div>
			<div class="item__img">
				<img src="https://picsum.photos/200/100">
			</div>
			<div class="item__img">
				<img src="https://picsum.photos/200/100">
			</div>
		</div>

		<div class="item">
			<div class="item__img">
				<img src="https://picsum.photos/200/100">
			</div>
			<div class="item__img">
				<img src="https://picsum.photos/200/100">
			</div>
			<div class="item__img">
				<img src="https://picsum.photos/200/100">
			</div>
		</div>

	</div> <!-- .line__three -->


</div> <!-- .wrapper -->

6
  • при помощи svg, например Commented 10 янв. 2020 в 19:53
  • Попробуй через canvas . Вот небольшой урок по фигурам и линиям - habr.com/ru/post/111308 . Надеюсь помог
    – LeMoN
    Commented 10 янв. 2020 в 19:55
  • Я не понимаю как с помощью JS отрисовывать блок по точкам, я знаю, что в canvas есть перо, и там просто можно переставить перо, написать рисовать от точки к точке и будет нарисована линия. Но в моей задаче я взаимодействую с DOM динамическим способом Commented 10 янв. 2020 в 20:00
  • ru.stackoverflow.com/questions/704408/… похожее задание. Commented 10 янв. 2020 в 20:04
  • @AlexDevTime там известны координаты плюс минус и в процентах можно указать. Я хочу сделать функцию - ты ей передал две точки, она отрисовала линию между ними. Точки то известны у меня, а как направление указать? Commented 10 янв. 2020 в 20:12

3 ответа 3

8

Чтобы нарисовать линию, нужно понять, под каким углом она пойдёт.
Формула тангенса ниже основывается на том, что мы из векторов длин вычитаем коорд другой точки, без разницы какой
Тангенс угла равен = (y2-y1) / (x2-x1), где x1 y1 и x2 y2 две точки
Зная тангенс угла, мы можем посчитать сам угол
Мы имеем tgx = альфа, где альфа - угол
Формула: альфа = arctg(x) + 2*Pi*n , где n - целые числа, а Pi - число Пи
Так как нам не нужен угол в несколько оборотов, берём самый первый угол при n = 0, т.е.
Формула будет выглядеть так:
альфа = arctg(x)
Мы нашли чему будет равен угол, но значение в радианах, чтобы перевести из радиан в градусы, нужно значение радиан умножить на 180 и разделить всё на число Пи, вот формула:
xРадиан = (x*180)/Пи
Получается, что формула для нахождения угла по двум точкам будет выглядеть так:

arctg( (y2-y1) / (x2-x1) ) * 180 / Pi
Или на JS, вот так:
Math.atan( (y2-y1) / (x2-x1) ) * 180 / Math.PI

Также, если просто попробовать повернуть линию под полученным углом, ничего не получится. Почему? Потому что угол будет поворачиваться не оттуда, так как эти вычисления для обычной математической окружности. На изображении я указал четверти круга и где положителен тангенс в этих четвертях. Это математическая окружность

введите сюда описание изображения Необходимо понять, как располагается окружность. Если прямой из браузера задать 0 градусов и начать поворачивать, то будет видно, откуда начинается поворот.
введите сюда описание изображения
Путем детской смекалки и 2-х раз перерисований линий в painte(для меня) можно понять, что ось стоит вот так(по которой в браузере поворачивается линия):
введите сюда описание изображения Получается, что у нас ось повернулась на минус 90 градусов(по математически) и отразилась зеркально относительно 1,2 и 3,4 четвертей. И на основании того, что в 1,2 четвертях тангенс положительный, а в 3,4 отрицательный можно понять, что нам это нужно как-то отнести к углу.

Я ещё не понял, как я это придумал, но я записал это в таком виде:
tang - тангенс, angle - это угол.

if (tang < 0) {
    angle = 90 + angle;
} else if (tang > 0){
    angle = -(90-angle);
}

Если вы понимаете, почему я так записал, и почему это работает - напишите, пожалуйста, в комментариях

Я сделал такую штуку, которая рисует от середины изображения к другой середине изображения линии, можно посмотреть, при клике по документу, анимация начинается заново:

let items = document.querySelectorAll('.item');

let reqAnimFrame = (function() {
  return requestAnimationFrame ||
    mozRequestAnimationFrame ||
    webkitRequestAnimationFrame ||
    oRequestAnimationFrame ||
    msRequestAnimationFrame ||
    function(callback) {
      setTimeout(callback, 1000 / 60);
    }
})();

function animate({
  timing,
  draw,
  duration
}) {

  let start = performance.now();

  reqAnimFrame(function animate(time) {
    // timeFraction изменяется от 0 до 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // вычисление текущего состояния анимации
    let progress = timing(timeFraction);

    draw(progress); // отрисовать её

    if (timeFraction < 1) {
      reqAnimFrame(animate);
    }

  });
}

function elemPosition(elem) {
  let pos = {
    top: window.pageYOffset + elem.getBoundingClientRect().top,
    left: window.pageXOffset + elem.getBoundingClientRect().left,
    right: window.pageXOffset + elem.getBoundingClientRect().right,
    bottom: window.pageYOffset + elem.getBoundingClientRect().bottom
  };
  return pos;
}

function centerElem(elem) {
  let width = elem.offsetWidth;
  let height = elem.offsetHeight;
  let centerX = width / 2 + elemPosition(elem).left;
  let centerY = height / 2 + elemPosition(elem).top;
  let pos = {
    y: centerY,
    x: centerX
  };
  return pos;
}

function whatElems(from, fromIndex, to, toIndex) {
  let child = {
    from: from.children[fromIndex],
    to: to.children[toIndex]
  }
  return child;
}

function createDiv() {
  let div = document.createElement('div');
  div.classList.add('harmony');
  document.body.append(div);
  return div;
}

function render(childF, childT, elemResize, j) {

  let div = elemResize;

  if (elemResize == undefined) {
    div = createDiv();
  }


  let height = window.getComputedStyle(div, null).height; // исходная высота прямой
  height = Number(height.slice(0, height.length - 2)); // исходная высота прямой
  let d, tang, arctg, angle, scale, final, start;

  function logic() {

    final = {
      x: centerElem(childT).x,
      y: elemPosition(childT).top
    }; // координаты конечной точки

    start = {
      x: centerElem(childF).x,
      y: elemPosition(childF).bottom
    }; // координаты начальной точки

    d = Math.sqrt(Math.pow((final.x - start.x), 2) + Math.pow((final.y - start.y), 2)); // длина прямой после анимации
    tang = (final.y - start.y) / (final.x - start.x) // Тангенс
    arctg = Math.atan(tang); // Арктангенс
    angle = arctg * 180 / Math.PI; // угол в градусах
    scale = d / height; // насколько масштабировать прямую по высоте

    if (tang < 0) {
      angle = 90 + angle;
    } else if (tang > 0) {
      angle = -(90 - angle);
    }

  }

  logic();

  if (elemResize !== undefined) {

    if (progressGlobal[j + 1] == 1) {
      reqAnimFrame(startResize);
    }

    function startResize() {
      div.style.transform = `translate(${start.x}px, ${start.y}px) rotate(${angle}deg) scale(1, ${scale}) translateZ(0)`;
    }
  } else {
    animate({
      duration: 5000,
      timing(timeFraction) {
        return timeFraction;
      },
      draw(progress) {
        logic();
        div.style.transform = `translate(${start.x}px, ${start.y}px) rotate(${angle}deg) scale(1, ${progress*scale}) translateZ(0)`;
        progressGlobal[j] = progress;
      }
    });

  }

}

function createPath(from, fromIndex, to, toIndex, j) {

  let child = whatElems(from, fromIndex, to, toIndex);
  let childFrom = child.from;
  let childTo = child.to;
  render(childFrom, childTo, undefined, j);

}

let progressGlobal = [];
let harmonies;
let paths = [];

function startHell() {

  function createPathAndPush(from, fromIndex, to, toIndex, j) {
    createPath(from, fromIndex, to, toIndex, j);
    paths.push([from, fromIndex, to, toIndex, j]);
    j++;
    return j;
  }

  let j = 0;

  for (let i = 3; i <= 5; i++) {
    j = createPathAndPush(items[i - 3], 0, items[i], 1, j);
    j = createPathAndPush(items[i - 3], 0, items[i], 0, j);
  }

  for (let i = 6; i <= 8; i++) {
    j = createPathAndPush(items[i - 3], 0, items[i], 0, j);
    j = createPathAndPush(items[i - 3], 0, items[i], 1, j);
    j = createPathAndPush(items[i - 3], 1, items[i], 1, j);
    j = createPathAndPush(items[i - 3], 1, items[i], 2, j);
  }

  harmonies = document.querySelectorAll('.harmony');

  for (let i = 0; i < harmonies.length; i++) {
    progressGlobal[i] = 0;
  }

}

window.addEventListener('load', () => {
  startHell();
});

window.addEventListener('resize', () => {
  for (let i = 0; i < harmonies.length; i++) {
    let child = whatElems(paths[i][0], paths[i][1], paths[i][2], paths[i][3]);
    let childFrom = child.from;
    let childTo = child.to;
    render(childFrom, childTo, harmonies[i], i - 1);
  }
});

window.addEventListener('click', () => {

  for (let i = 0; i < harmonies.length; i++) {
    harmonies[i].remove();
  }

  startHell();

});
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  color: black;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
}

.line:not(:first-child) {
  margin-top: 50px;
}

.item {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex: 1;
}

.item:not(:last-child) {
  margin-right: 2%;
}

.item__img {
  z-index: 2;
}

.item__img:not(:first-child) {
  margin-left: 5px;
}

.line {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  transition: opacity .3s ease-in-out;
}

.harmony {
  z-index: 3;
  position: absolute;
  width: 2.5px;
  background-color: red;
  height: 80px;
  left: 0;
  top: 0;
  transform: translateZ(0);
  transform-origin: 50% 0%;
}
<div class="wrapper">

  <div class="line line__one">

    <div class="item">
      <div class="item__img">
        <img src="https://picsum.photos/500/250">
      </div>
    </div>

    <div class="item">
      <div class="item__img">
        <img src="https://picsum.photos/500/250">
      </div>
    </div>

    <div class="item">
      <div class="item__img">
        <img src="https://picsum.photos/500/250">
      </div>
    </div>

  </div>
  <!-- .line__one -->

  <div class="line line__two">

    <div class="item">
      <div class="item__img">
        <img src="https://picsum.photos/300/150">
      </div>
      <div class="item__img">
        <img src="https://picsum.photos/300/150">
      </div>
    </div>

    <div class="item">
      <div class="item__img">
        <img src="https://picsum.photos/300/150">
      </div>
      <div class="item__img">
        <img src="https://picsum.photos/300/150">
      </div>
    </div>

    <div class="item">
      <div class="item__img">
        <img src="https://picsum.photos/300/150">
      </div>
      <div class="item__img">
        <img src="https://picsum.photos/300/150">
      </div>
    </div>

  </div>
  <!-- .line__two -->

  <div class="line line__three">

    <div class="item">
      <div class="item__img">
        <img src="https://picsum.photos/200/100">
      </div>
      <div class="item__img">
        <img src="https://picsum.photos/200/100">
      </div>
      <div class="item__img">
        <img src="https://picsum.photos/200/100">
      </div>
    </div>

    <div class="item">
      <div class="item__img">
        <img src="https://picsum.photos/200/100">
      </div>
      <div class="item__img">
        <img src="https://picsum.photos/200/100">
      </div>
      <div class="item__img">
        <img src="https://picsum.photos/200/100">
      </div>
    </div>

    <div class="item">
      <div class="item__img">
        <img src="https://picsum.photos/200/100">
      </div>
      <div class="item__img">
        <img src="https://picsum.photos/200/100">
      </div>
      <div class="item__img">
        <img src="https://picsum.photos/200/100">
      </div>
    </div>

  </div>
  <!-- .line__three -->


</div>
<!-- .wrapper -->

1
  • О, починил координаты линий при ресайзе, лайк)
    – De.Minov
    Commented 12 янв. 2020 в 12:25
4

SVG вариант

let elements = [0, 1, 2, 3, 4];

let imgs = elements.map(i => {
  let img = document.createElement('img');
  document.body.append (img);
  img.id = `img_${i}`;
  img.src = `https://picsum.photos/id/${i}/100/100`;
  img.style.position = 'absolute';
  img.style.left = 50 + Math.random()*(innerWidth - 200) + 'px';
  img.style.top = 50 + 150*i + 'px';
  return img;
});

elements.pop();

let links = elements.map(i => {
 return linkElements(imgs[i], imgs[i+1])
})

resize();
addEventListener('resize', resize);
requestAnimationFrame(anim);

function anim(){
  requestAnimationFrame(anim);
  links.forEach(l => l());
}

function centerPoint(el){
  let r = el.getBoundingClientRect()
  return [r.x + r.width/2, r.y + r.height/2];
}

function linkElements(el1, el2) {
  let id = `link-${el1.id}-${el2.id}`;
  overlay.innerHTML += `<path id="${id}" stroke="red" />`;
  return function() {
    document.getElementById(id).setAttribute('d', [
      'M', ...centerPoint(el1),
      'L', ...centerPoint(el2),
    ].join(' '));
  }
}

function resize() {
  overlay.setAttribute('width', innerWidth);
  overlay.setAttribute('height', innerHeight);
}
#img_3 {
  animation: 10s left infinite;
}

@keyframes left {
  0% {left: 10px; transform:translate(0,-30px)}
  50% {left: calc(100% - 110px); transform:translate(0,30px)}
  100% {left: 10px; transform:translate(0,-30px)}
}
<svg id="overlay" style="position:fixed;top:0;left:0"></svg>

1
  • Прикольно, я подумал, что мою функцию для рисовании линий между двумя элементами(только её нужно как-то сделать ООП, наверное) можно применять в проектах и верстать на absolute :D Commented 12 янв. 2020 в 17:52
2

Вот как по координатам двух точек рисовать линию с помощью canvas.

const canvas = document.getElementById('cnvs');
const ctx = canvas.getContext('2d');
ctx.lineWidth = 3; // толщина линии
ctx.moveTo(50, 150); //передвигаем перо
ctx.lineTo(100, 200); //рисуем линию
ctx.stroke();
<canvas id="cnvs" width="100" height="200px"></canvas>

Длинну считать не нужно. А как создавать элементы через createElement и вставлять в документ я думаю вы знаете. Без canvas мало вероятно, что есть вразумительные способы.

4
  • Конечно есть, просто там математика Commented 10 янв. 2020 в 21:03
  • Да, геометрия. Угол надо считать на которую линию повернуть и там много подводных камней. Но только чем вас canvas не устраивает? Все равно что то, что то на страницу вставлять как элемент. Кода минимум. Просто интересно. Commented 10 янв. 2020 в 21:13
  • я думаю сегодня 11.01 это решу, напишу ответ, мне подсказали, что угол из радиан можно в градусы перевести, я это забыл. Commented 10 янв. 2020 в 21:21
  • Можете посмотреть, как я решил Commented 11 янв. 2020 в 14:38

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.