使用canvas，SVG和js在两个div之间绘制一条箭头或一条线

Question

我想映射两个字段并在两个事物之间绘制线条，如果我发现它们匹配的话。 下面是代码。

 <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>

我希望结果如下图所示： -

我想通过观察颜色自己画线。 它不应该是已绘制的线条。 这可能吗？

Answer 1

创建一条线和一条箭头（使用边框可以创建它）。

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)`;

代码看起来像这样。

使用canvas，SVG和js在两个div之间绘制一条箭头或一条线

问题描述

1 个解决方案

解决方案1
0 2017-05-04 10:01:45

使用canvas，SVG和js在两个div之间绘制一条箭头或一条线

问题描述

1 个解决方案

解决方案1 0 2017-05-04 10:01:45

解决方案1
0 2017-05-04 10:01:45