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。

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>

Answer 2

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

Answer 3

我不知道是否有人再看这个帖子，但这里是我使用过的解决方案，它与@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。

Answer 4

创建箭头很简单。 See this example on CSS Tricks。也许在具有箭头线的容器内使用它可能会这样做。

Answer 5

画布和jCanvas

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

我冒险尝试使用DIV和jQuery，但它总是在交互性和质量方面做得不够。这真的打开了大门而没有增加代码复杂性。

希望像我一样帮助别人。

JP

编辑2017 05 20：

我曾经在这里有一个与jCanvas＆＃39;相关联的例子。沙盒，包含在两个元素之间绘制箭头所需的所有代码，并在画布上拖动这两个元素。但是，该链接不再有效，我在其他任何地方都没有代码。

所以，我仍然认为你应该查看jCanvas但不幸的是我没有任何示例代码可以让你开始。

在两个div之间画一个箭头

5 个答案:

画布和jCanvas

编辑2017 05 20：