在两个 div 之间画一个箭头

Question

我正在寻找我希望已经解决的问题的解决方案。 但是我只看到了具有很多功能但没有简单解决方案的大型项目。

其实我需要得到类似的东西：

所以要在包含一些正方形 (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 应该有帮助） 但仍然很奇怪，我找不到一些现成的解决方案来解决我经常出现的问题。 （解释网站上的一些东西几乎是必须的）

Answer 1

您可以考虑使用 SVG。

特别是，您可以使用带有箭头路径的标记端形状的线。

请务必设置 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>

Answer 2

我不知道是否有人再看这个线程，但这是我使用的解决方案，它与@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 坐标！我在我的反应应用程序中使用了这个答案，它工作得很好。 这是fiddle。

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

<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>

Answer 3

使用库，例如​​ JSPlumb：https://jsplumbtoolkit.com/

Answer 4

创建箭头相当简单。 See this example on CSS Tricks。 也许在有箭头线的容器内使用它可能会做到这一点。

Answer 5

画布和jCanvas

根据您的需要，您绝对应该使用 Canvas 和 jCanvas 库进行检查。它让这样的事情变得轻而易举。

我冒险尝试使用 DIV 和 jQuery 做所有事情，但它总是在交互性和质量方面有所欠缺。这确实在不增加代码复杂性的情况下打开了大门。

希望能帮助其他人，比如我。

日本

编辑 2017 年 5 月 20 日：

我曾经在这里有一个示例，它链接到 jCanvas 的沙箱，其中包含在两个元素之间绘制箭头并在画布周围拖动这两个元素所需的所有代码。但是，该链接不再有效，我在其他任何地方都没有代码。

所以，我仍然认为您应该查看 jCanvas，但不幸的是，我没有任何示例代码可以帮助您入门。

Answer 6

我推荐使用这个：
https://www.cssscript.com/connect-elements-directional-arrow/
使用非常简单:)

你可以这样做：

<connection from="#id_1" to="#id_2" color="red" tail></connection>

---

如何包含它：

您将 .zip 文件解压缩到您的项目文件夹中。 将 CSS 和 JavaScript 复制到您的项目中，或者在您的项目中添加对这些文件的引用：

<head>
        <!-- Your head-codes here -->
        <link rel  = "stylesheet" type = "text/css" href = "../plugins/domarrow.js-master/domarrow.css"/>
</head>
<body>
    <!-- Your body-codes here -->
    <script src="../plugins/domarrow.js-master/domarrow.js"></script>
</body>

在我的例子中，文件结构是：

C/MyProject/:.
│
├───css
│       start.css
│
├───html
│       start.html <--- write here
│
├───js
│       start.js
│
└───plugins
    │
    └───domarrow.js-master
            domarrow.css
            domarrow.js

这就是为什么我需要在相对路径的开头使用“../”，这意味着“走出一级”，例如：“../plugins”退出“html”文件夹并进入“插件”文件夹。

根据您的文件布局调整文件路径。

Answer 7

我强烈推荐这个库：https://anseki.github.io/leader-line/

它非常强大、快速、超级易用，对我来说完美无缺。