draw an arrow or line between two divs using canvas, SVG and js

Question

I wanted to map two fields and draw line between two things if I found 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 result to be like below image:-

I want to draw line by myself by looking at the colors. It should not be already drawn lines. Is this possible to do this?

Answer 1

Create a line and an arrow (use border can create it).

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.

draw an arrow or line between two divs using canvas, SVG and js

Question

1 answers

solution1
0 2017-05-04 10:01:45

draw an arrow or line between two divs using canvas, SVG and js

Question

1 answers

solution1 0 2017-05-04 10:01:45

solution1
0 2017-05-04 10:01:45