使用畫布，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之間的箭頭或線條

回答

相關問題