在两个div之间画一个箭头
Ale*_*r P 28 html javascript css jquery canvas
我正在寻找一个我希望已经解决的问题的解决方案.但我看到只有大量项目具有很多功能,但没有简单的解决方案.
其实我需要得到类似的东西:
所以要得到一个箭头绘制一个包含一些正方形(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应该有帮助)但是仍然很奇怪我找不到一些现成的解决方案似乎经常出现在我身上.(解释网站上的一些东西箭头几乎是必须的)
mar*_*rkE 38
您可以考虑使用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>
- 我很困惑:我在这里看不到关于连接两个元素的任何内容.我错过了什么,或者是某种想法,我可能会自己神圣的元素位置？ (3认同)
- @AlexanderPresman - 如果它正是你所需要的,也许你应该接受答案;) (2认同)
- @大卫·朗迪。确切地说，问题是关于连接器而不是寻找 div。但由于每个 div 都有一个 #id，因此您可以使用 getCompulatedStyle 来查找其位置和大小。干杯! :-) (2认同)
小智 9
我不知道是否有人再看这个线程，但这是我使用的解决方案，它与@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 坐标！我在我的 React 应用程序中使用了这个答案，并且效果很好。这是小提琴。
<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>
.arrow {
stroke: rgb(0, 0, 0);
stroke-width: 2;
marker-end: url(#markerArrow)
}| 归档时间： |
|
| 查看次数： |
40141 次 |
| 最近记录： |