Нарисуйте стрелку между двумя divs

Я ищу решение вопроса, который, как я ожидал, будет уже решен. Но я видел только крупные проекты с множеством функций, но простого решения.

На самом деле мне нужно получить что-то вроде этого:

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

Итак, чтобы получить рисунок стрелки над div, содержащим некоторые квадраты (divs)

<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 должен помочь) Но все же странно, что я не мог найти готового решения проблемы, которая, как мне кажется, часто возникает. (чтобы объяснить что-то на сайте, стрелки почти обязательны)

ОТВЕТЫ

Ответ 1

Вы можете рассмотреть 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>

Ответ 3

Его довольно просто создать стрелку. См. этот пример в CSS-трюках. Возможно, используя это внутри контейнера, который имеет линию стрелок, может это сделать.

Ответ 4

Холст и jCanvas

В соответствии с вашими потребностями вам обязательно нужно проверить использование Canvas и jCanvas. Это делает такие вещи ветерок.

Я отважился по пути делать все с DIV и jQuery, но он всегда не соответствовал интерактивности и качеству. Это действительно открывает двери, не добавляя сложность кода.

Надеюсь, что это помогает другим, как и я.

В JP

EDIT 2017 05 20:

У меня был пример, связанный с песочницей jCanvas со всем кодом, который вам нужен, чтобы нарисовать стрелку между двумя элементами и перетащить оба этих элемента вокруг холста. Однако эта ссылка больше не работает, и у меня нет кода где-либо еще.

Итак, я все еще думаю, что вы должны проверить jCanvas, но, к сожалению, у меня нет кода для запуска.