在两个 div 之间画一个箭头
[英]Draw an arrow between two divs
问题描述
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:其实我需要得到这样的东西：
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.我查看了 canvas 方向，但偶然发现 canvas 在我的 div 后面不可见（也许一些 z-index 应该有帮助）但仍然很奇怪，我找不到一些现成的解决方案来解决我似乎经常出现的问题. ( to explain some thing on the site arrows are almost a must ) （解释网站上的一些东西箭头几乎是必须的）
7 个解决方案
解决方案1
48 已采纳 2013-11-18 03:11:27
You might consider SVG.您可能会考虑使用 SVG。
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
9 2018-02-17 04:29:42
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!您所要做的就是更改线的 x 和 y 坐标！ I used this answer in my react app and it worked beautifully.我在我的 React 应用程序中使用了这个答案，并且效果很好。 And heres the 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>
解决方案3
4 2013-11-17 23:59:05
使用库，如JSPlumb ： https : //jsplumbtoolkit.com/
解决方案4
0
Its fairly simple to create the arrow head.创建箭头相当简单。 See this example on CSS Tricks .请参阅 CSS Tricks 上的此示例。 Maybe using this inside a container which has the arrow line might do it.也许在带有箭头线的容器中使用它可能会做到。
解决方案5
0 2015-06-10 19:38:01
Canvas and jCanvas画布和jCanvas
Based on your needs, you should definitely check out using Canvas and the jCanvas library.根据您的需要，您绝对应该检查使用 Canvas 和jCanvas库。 It makes things like this a breeze.它让这样的事情变得轻而易举。
I ventured down the road of doing everything with DIVs and jQuery but it always fell short on interactivity and quality.我冒险尝试使用 DIV 和 jQuery 做所有事情，但它总是在交互性和质量上有所欠缺。 This really kicks open the doors without adding code complexity.这确实在不增加代码复杂性的情况下打开了大门。
Hope that helps others, like me.希望能帮助其他人，比如我。
JP太平绅士
EDIT 2017 05 20:编辑 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.我曾经在这里有一个示例，该示例链接到 jCanvas 的沙箱，其中包含在两个元素之间绘制箭头并在画布周围拖动这两个元素所需的所有代码。 However, that link no longer works and I don't have the code anywhere else.但是，该链接不再有效，我在其他任何地方都没有代码。
So, I still think you should check out jCanvas but unfortunately I don't have any sample code to start you off.所以，我仍然认为您应该查看 jCanvas，但不幸的是我没有任何示例代码来启动您。
解决方案6
0 2021-09-07 21:35:45
I recommend using this:我建议使用这个：
https://www.cssscript.com/connect-elements-directional-arrow/ https://www.cssscript.com/connect-elements-directional-arrow/
Very simple to use :)使用非常简单:)
You can do this then:你可以这样做：
<connection from="#id_1" to="#id_2" color="red" tail></connection>
How to include it:如何包含它：
You extract the .zip file to your projects folder.您将 .zip 文件解压缩到您的项目文件夹。 Either copy over the CSS & JavaScript to your project, or add a reference to those files in your project:要么将 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>
In my case the file structure is:在我的情况下，文件结构是：
C/MyProject/:.
│
├───css
│ start.css
│
├───html
│ start.html <--- write here
│
├───js
│ start.js
│
└───plugins
│
└───domarrow.js-master
domarrow.css
domarrow.js
That's why I need the "../" in the beginning of the relative path, it means "step out one level", so for example: "../plugins" exits the "html" folders & goes into the "plugins" folder instead.这就是为什么我需要相对路径开头的“../”，它的意思是“走出一级”，例如：“../plugins”退出“html”文件夹并进入“plugins”文件夹代替。
Adjust the file-path according to your file layouts.根据您的文件布局调整文件路径。
解决方案7
0 2021-10-17 01:25:11
I highly recommended this library: https://anseki.github.io/leader-line/我强烈推荐这个库： https : //anseki.github.io/leader-line/
It's pretty powerful, fast, super easy to use and it worked flawlessly for me.它非常强大、快速、超级易于使用，而且对我来说完美无缺。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.