Известны две точки, к примеру:
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 -->
JS
отрисовывать блок по точкам, я знаю, что вcanvas
есть перо, и там просто можно переставить перо, написать рисовать от точки к точке и будет нарисована линия. Но в моей задаче я взаимодействую сDOM
динамическим способом