キャンバスを使用してブロック要素の接合矢印を作成する

こんにちは



最近、Webページ（組織構造）の単純な階層ツリーを作成することが必要になりました。 ブロックは非常に良好であることが判明しましたが、すべてを矢印で接続するときが来たときに、疑問が生じました-どのように？ 2つの解決策がありました。.pngで矢印を描くか、特殊文字を使用します。



しかし、私はより速く、より便利で、現代的なものが欲しかったのです。 ブロックAからブロックBへの矢印を示します。夕方までに、計画を実装できる小さなライブラリが作成されました。

実装

実装は、計画どおりシンプルで便利です。 技術的には、これは2つのステップで発生します。

• arrow_initialize( divid, newcanvasid);
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  （親ブロック内の）背景に矢印を描くための新しいキャンバスを作成します。

•  arrow(canvasid, div1, div1side, div2, div2side, color, lineWidth, shadowColor, shadowBlur);
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  指定されたブロックのIDに基づいて矢印の始点と終点の座標を計算し、事前に作成されたキャンバスに矢印を表示します。

短所：

現時点では、いくつかの問題が見つかりました。

• たとえば、作成されたキャンバスはブロックに配置されたテキストと重なります（Opera以外ではどこからでもアクセスできなくなります）-z-indexとの戦い-助けにはなりませんでした。
• Firefoxには、わずかなキャンバスオフセットもあります。

当然、背景に対してブロックを移動（またはアニメーション化）しても、矢印はそのまま残ります。

結論として：

これまでのところ、すべてがかなり湿っているので、ベータステータスになっています。提案があれば、 guthubでリクエストをプルするのはうれしいです。



使用例と詳細については、 こちらをご覧ください 。







ブロック図を作成する同様の興味深い方法がここに示されています -短い記述スタイルが使用されています。この場合、単純なブロック図に限定されず、必要なものすべて、他のブロック、段落、図などを接続または指摘します。 キャンバスを使用します。



ご清聴ありがとうございました！