Draw an arrow or line between two divs using canvas, SVG and js
I wanted to display two fields and draw a line between two things if I found a match in them. Below is the code.
<html>
<head>
<style type="text/css">
.container {
width: 600px;
margin: 100px auto;
}
.block {
padding: 20px;
width: 100px;
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
text-align: center;
margin-bottom: 20px;
}
.left-side {
float: left;
}
.right-side {
float: right;
}
.pink {
background: pink;
}
.red {
background: red;
}
.green {
background: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left-side">
<div class="block pink" id="a">A</div>
<div class="block red" id="b">B</div>
<div class="block green" id="c">C</div>
</div>
<div class="right-side">
<div class="block green" id="cc">C</div>
<div class="block pink" id="aa">A</div>
<div class="block red" id="bb">B</div>
</div>
<div>
</body>
</html>
I want the result to be like below:
I want to draw a line looking at colors. They don't have to be lines already drawn. Is it possible to do this?
+3
source to share
2 answers
Create a line and an arrow (use a border to create one).
var disX = leftA.right - rightA.left;
var disY = leftA.top - rightA.top;
var dis = Math.sqrt( disX * disX + disY * disY );
line.style.width = dis;
line.style.transform = `rotate(${Math.atan(disY/disX)}deg)`;
The code looks like this.
0
source to share