在两个div之间画一个箭头

时间：2023-02-02 23:16:01

I'm searching for a solution of the question that I expected to be solved already. But I saw only big projects with a lot of features but no simple solution.

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

Actually I need to get something like that:

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

在两个div之间画一个箭头

So to get an arrow drawing over a div containing some squares (divs)

所以得到一个箭头绘制一个包含一些正方形（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>

I looked in the canvas direction but stumbled on tha canvas was not visible behind my divs ( maybe some z-index should help ) But still strange that I couldn't find some ready-made solution of a problem that seems to me coming up often. ( to explain some thing on the site arrows are almost a must )

我看着帆布方向，但偶然发现画布在我的div后面不可见（也许一些z-index应该有帮助）但是仍然奇怪的是我找不到一些现成的解决方案似乎经常出现在我身上。 （解释网站上的一些东西箭头几乎是必须的）

5 个解决方案

#1

27  

You might consider SVG.

你可能会考虑SVG。

在两个div之间画一个箭头

In particular, you can use a line with a marker-end shaped with an arrow-path.

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

Be sure to set orient=auto so the arrowhead will be rotated to match the slope of the line.

务必设置orient = auto，以便旋转箭头以匹配线的斜率。

Since SVG is a DOM element, you can control the start/end position of the line in javascript.

由于SVG是DOM元素，因此您可以在javascript中控制行的开始/结束位置。

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/9aCsJ/

这是代码和小提琴：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>

#2

3  

Use a library, like JSPlumb: https://jsplumbtoolkit.com/

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

#3

2  

I have no idea whether anybody looks at this thread anymore but here's the solution i used, it differs only slightly from @markE answer in that this answer makes it much easier to specify exactly where the line needs to start and stop.

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

All you have to do is change the x and y coordinates of the line! I used this answer in my react app and it worked beautifully. And heres the fiddle.

您所要做的就是改变线的x和y坐标！我在我的反应应用程序中使用了这个答案，它工作得很漂亮。而且这是小提琴。

#4

0  

Its fairly simple to create the arrow head. See this example on CSS Tricks. Maybe using this inside a container which has the arrow line might do it.

创建箭头很简单。在CSS Tricks上查看此示例。也许在具有箭头线的容器内使用它可能会这样做。

#5

0  

Canvas and jCanvas

Based on your needs, you should definitely check out using Canvas and the jCanvas library. It makes things like this a breeze.

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

I ventured down the road of doing everything with DIVs and jQuery but it always fell short on interactivity and quality. This really kicks open the doors without adding code complexity.

我冒险尝试使用DIV和jQuery，但它总是缺乏交互性和质量。这真的踢开门而不增加代码复杂性。

Hope that helps others, like me.

希望能像我一样帮助别人。

JP

J.P

EDIT 2017 05 20:

I used to have an example here that linked to the jCanvas' sandbox with all the code you needed to draw an arrow between two elements and drag both of those elements around the canvas. However, that link no longer works and I don't have the code anywhere else.

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

So, I still think you should check out jCanvas but unfortunately I don't have any sample code to start you off.

所以，我仍然认为你应该检查jCanvas但不幸的是我没有任何示例代码来启动你。

#1

27  

You might consider SVG.

你可能会考虑SVG。

在两个div之间画一个箭头

In particular, you can use a line with a marker-end shaped with an arrow-path.

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

Be sure to set orient=auto so the arrowhead will be rotated to match the slope of the line.

务必设置orient = auto，以便旋转箭头以匹配线的斜率。

Since SVG is a DOM element, you can control the start/end position of the line in javascript.

由于SVG是DOM元素，因此您可以在javascript中控制行的开始/结束位置。

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/9aCsJ/

这是代码和小提琴：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>

#2

3  

Use a library, like JSPlumb: https://jsplumbtoolkit.com/

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

#3

2  

I have no idea whether anybody looks at this thread anymore but here's the solution i used, it differs only slightly from @markE answer in that this answer makes it much easier to specify exactly where the line needs to start and stop.

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

All you have to do is change the x and y coordinates of the line! I used this answer in my react app and it worked beautifully. And heres the fiddle.

您所要做的就是改变线的x和y坐标！我在我的反应应用程序中使用了这个答案，它工作得很漂亮。而且这是小提琴。

#4

0  

Its fairly simple to create the arrow head. See this example on CSS Tricks. Maybe using this inside a container which has the arrow line might do it.

创建箭头很简单。在CSS Tricks上查看此示例。也许在具有箭头线的容器内使用它可能会这样做。

#5

0  

Canvas and jCanvas

Based on your needs, you should definitely check out using Canvas and the jCanvas library. It makes things like this a breeze.

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

I ventured down the road of doing everything with DIVs and jQuery but it always fell short on interactivity and quality. This really kicks open the doors without adding code complexity.

我冒险尝试使用DIV和jQuery，但它总是缺乏交互性和质量。这真的踢开门而不增加代码复杂性。

Hope that helps others, like me.

希望能像我一样帮助别人。

JP

J.P

EDIT 2017 05 20:

I used to have an example here that linked to the jCanvas' sandbox with all the code you needed to draw an arrow between two elements and drag both of those elements around the canvas. However, that link no longer works and I don't have the code anywhere else.

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

So, I still think you should check out jCanvas but unfortunately I don't have any sample code to start you off.

所以，我仍然认为你应该检查jCanvas但不幸的是我没有任何示例代码来启动你。

标签：

相关文章