キャンバス、SVG、jsを使用して2つのdivの間に矢印または線を描く

2つのフィールドをマップし、2つのフィールドの間に線を描きたい以下はコードです。キャンバス、SVG、jsを使用して2つの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

canvasまたはsvgを使用することは可能です。既存のDIVとsvgとcanvasを混在させることは可能ですが、SVG/CanvasにもA、B、Cの四角形を描画するとより簡単になります。 – sabithpocker

あなたは参考にいくつかの例を共有できますか？ – Yogi

[HTML divs with Linesを接続するにはどうすればいいですか？]（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を使用して2つのdivの間に矢印または線を描く

答えて

関連する問題