web-dev-qa-db-ja.com

2つのdivの間に矢印を描く

私はすでに解決されると予想されていた質問の解決策を探しています。しかし、多くの機能を備えた大きなプロジェクトだけを見ましたが、単純な解決策はありませんでした。

実際に私はそのようなものを取得する必要があります：

http://i.imgur.com/iktvmLK.png

そのため、いくつかの正方形（div）を含むdiv上に矢印を描画するには

<div id="container">
<div class="white_field"></div>
<div id="1" class="black_field">
<br style="clear:both;">    
<div id="2" class="black_field">
<div class="white_field"></div>
<br style="clear:both;">    
<div id="3" class="black_field">
<div class="white_field"></div>
</div>

私はキャンバスの方向を見ましたが、divの後ろにキャンバスが見えないのでつまずきました（おそらくz-indexが役立つかもしれません） 。 （サイトの矢印で説明することはほとんど必須です）

javascriptjqueryhtmlcsscanvas
26
Alexander P

あなたはSVGを検討するかもしれません。

enter image description here

特に、矢印のパスで形作られたマーカー端を持つ線を使用できます。

線の傾斜に合わせて矢印が回転するように、orient = autoを設定してください。

SVGはDOM要素であるため、javascriptで行の開始/終了位置を制御できます。

ここにコードとフィドルがあります： http://jsfiddle.net/m1erickson/9aCsJ/

<svg width="300" height="100">

    <defs>
        <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
        </marker>
    </defs>

    <path d="M30,150 L100,50"
          style="stroke:red; stroke-width: 1.25px; fill: none;
                 marker-end: url(#arrow);"
    />

</svg>
36
markE

JSPlumbなどのライブラリを使用します： https://jsplumbtoolkit.com/

4
c69

誰もこのスレッドを見るかどうかはわかりませんが、私が使用した解決策は次のとおりです。@ markEの回答とは少し異なりますが、この回答は行の開始と停止が必要な場所を正確に指定するのがはるかに簡単です.

<head>
  <style>
    .arrow{
      stroke:rgb(0,0,0);
      stroke-width:2; 
      marker-end:url(#markerArrow)
    }
  </style>
</head>

<body>
  <svg height="210" width="500">
    <defs>
        <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
               orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
        </marker>
    </defs>

    <line x1="0" y1="0" x2="200" y2="100" class="arrow" />
  </svg>

</body>

あなたがしなければならないのは、線のx座標とy座標を変更するだけです！反応アプリでこの回答を使用しましたが、うまく機能しました。そして、heres fiddle 。

2
Red

矢印の頭を作成するのはかなり簡単です。 CSSトリックに関するこの例を参照 。たぶん、矢印線のあるコンテナ内でこれを使用するとよいでしょう。

0
user887958

Canvasおよび jCanvas

ニーズに基づいて、Canvasと jCanvas ライブラリを使用して間違いなくチェックアウトする必要があります。このようなことが簡単になります。

私はDIVとjQueryを使ってすべてを行うという道を歩きましたが、常に対話性と品質が不足していました。これにより、コードの複雑さを増すことなく、本当に扉を開くことができます。

私のような他の人を助けることを願っています。

JP

EDIT 2017 05 20：

ここには、2つの要素の間に矢印を描き、キャンバスの周りにこれらの要素の両方をドラッグするために必要なすべてのコードでjCanvasのサンドボックスにリンクする例がありました。ただし、そのリンクは機能しなくなり、他のどこにもコードがありません。

ですから、jCanvasをチェックアウトする必要があると思いますが、残念ながら、開始するサンプルコードはありません。

0
Joshua Pinter