使用画布，SVG和js绘制两个div之间的箭头或线条

我想映射两个字段并在两个事物之间画线，如果我在它们中找到匹配的话。以下是代码。使用画布，SVG和js绘制两个div之间的箭头或线条

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

我希望结果能像下面的图片： -

我想自己通过看颜色画线。它不应该已经画出线。这可能吗？

来源

2017-05-04 Yogi

可以使用画布或svg。将现有的DIV与svg和canvas混合是可能的，但是如果在SVG/Canvas中绘制A，B，C矩形，则会更容易。 – sabithpocker

你能分享一些例子供参考吗？ – Yogi

[如何连接HTML Divs与行？]可能的重复（http://stackoverflow.com/questions/19382872/how-to-connect-html-divs-with-lines） –

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

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

代码如下所示。

来源

2017-05-04 10:01:45

使用画布，SVG和js绘制两个div之间的箭头或线条

回答

相关问题