jQuery 如何将 HTML Divs 与 Lines 连接起来？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19382872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to connect HTML Divs with Lines?
提问by confile
On my page I have a set of div elements that should be connected with lines like I showed in the image below. I know that with a canvas I can draw lines between these elements, but is it possible to do it in another way in html/css?
在我的页面上，我有一组 div 元素，它们应该与如下图所示的线条连接。我知道使用画布我可以在这些元素之间画线，但是是否可以在 html/css 中以另一种方式做到这一点？
回答by Ani
You can use SVGs to connect two divs using only HTML and CSS:
您可以使用 SVG 仅使用 HTML 和 CSS 连接两个 div：
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>
(please use seperate css file for styling)
（请使用单独的 css 文件进行样式设置）
Create a svg line and use this line to connect above divs
创建一个 svg 行并使用此行连接上面的 div
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
where,
在哪里，
x1,y1 indicates center of first div and
x2,y2 indicates center of second div
x1,y1 表示第一个 div 的中心，
x2,y2 表示第二个 div 的中心
You can check how it looks in the snippet below
您可以在下面的代码段中查看它的外观
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>回答by Rodrigo Damasceno
I made something like this to my project
function adjustLine(from, to, line){
var fT = from.offsetTop + from.offsetHeight/2;
var tT = to.offsetTop + to.offsetHeight/2;
var fL = from.offsetLeft + from.offsetWidth/2;
var tL = to.offsetLeft + to.offsetWidth/2;
var CA = Math.abs(tT - fT);
var CO = Math.abs(tL - fL);
var H = Math.sqrt(CA*CA + CO*CO);
var ANG = 180 / Math.PI * Math.acos( CA/H );
if(tT > fT){
var top = (tT-fT)/2 + fT;
}else{
var top = (fT-tT)/2 + tT;
}
if(tL > fL){
var left = (tL-fL)/2 + fL;
}else{
var left = (fL-tL)/2 + tL;
}
if(( fT < tT && fL < tL) || ( tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)){
ANG *= -1;
}
top-= H/2;
line.style["-webkit-transform"] = 'rotate('+ ANG +'deg)';
line.style["-moz-transform"] = 'rotate('+ ANG +'deg)';
line.style["-ms-transform"] = 'rotate('+ ANG +'deg)';
line.style["-o-transform"] = 'rotate('+ ANG +'deg)';
line.style["-transform"] = 'rotate('+ ANG +'deg)';
line.style.top = top+'px';
line.style.left = left+'px';
line.style.height = H + 'px';
}
adjustLine(
document.getElementById('div1'),
document.getElementById('div2'),
document.getElementById('line')
);#content{
position:relative;
}
.mydiv{
border:1px solid #368ABB;
background-color:#43A4DC;
position:absolute;
}
.mydiv:after{
content:no-close-quote;
position:absolute;
top:50%;
left:50%;
background-color:black;
width:4px;
height:4px;
border-radius:50%;
margin-left:-2px;
margin-top:-2px;
}
#div1{
left:200px;
top:200px;
width:50px;
height:50px;
}
#div2{
left:20px;
top:20px;
width:50px;
height:40px;
}
#line{
position:absolute;
width:1px;
background-color:red;
}
<div id="content">
<div id="div1" class="mydiv"></div>
<div id="div2" class="mydiv"></div>
<div id="line"></div>
</div>
回答by user2900150
You can use https://github.com/musclesoft/jquery-connections. This allows you connect block elements in DOM.
您可以使用https://github.com/musclesoft/jquery-connections。这允许您连接 DOM 中的块元素。
回答by James Montagne
It's kind of a pain to position, but you could use 1pxwide divs as lines and position and rotate them appropriately.
定位有点1px麻烦，但您可以使用宽 div 作为线条和位置并适当旋转它们。
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="line" id="line1"></div>
<div class="line" id="line2"></div>
.box {
border: 1px solid black;
background-color: #ccc;
width: 100px;
height: 100px;
position: absolute;
}
.line {
width: 1px;
height: 100px;
background-color: black;
position: absolute;
}
#box1 {
top: 0;
left: 0;
}
#box2 {
top: 200px;
left: 0;
}
#box3 {
top: 250px;
left: 200px;
}
#line1 {
top: 100px;
left: 50px;
}
#line2 {
top: 220px;
left: 150px;
height: 115px;
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
}
回答by oneday
Check my fiddle from this thread: Draw a line connecting two clicked div columns
从这个线程检查我的小提琴：画一条线连接两个点击的 div 列
The layout is different, but basically the idea is to create invisible divs between the boxes and add corresponding borders with jQuery (the answer is only HTML and CSS)
布局不同，但基本思路是在盒子之间创建不可见的div并用jQuery添加相应的边框（答案只有HTML和CSS）
回答by LiavK
Definitely possible with any number of libraries and/or HTML5 technologies. You could possible hack something together in pure CSS by using something like the border-bottom property, but it would probably be horribly hacky.
使用任意数量的库和/或 HTML5 技术绝对可能。您可以通过使用诸如 border-bottom 属性之类的东西在纯 CSS 中将某些东西组合在一起，但这可能会非常糟糕。
If you're serious about this, you should take a look at a JS library for canvas drawing or SVG. For example, something like http://www.graphjs.org/or http://jsdraw2dx.jsfiction.com/
如果您对此很认真，则应该查看用于画布绘图或 SVG 的 JS 库。例如，像http://www.graphjs.org/或http://jsdraw2dx.jsfiction.com/
回答by 123
Create a div that is the line with the code like this:
创建一个 div，它是包含如下代码的行：
CSS
CSS
div#lineHorizontal {
background-color: #000;
width: //the width of the line or how far it goes sidewards;
height: 2px;
display: inline-block;
margin: 0px;
}
div#block {
background-color: #777;
display: inline-block;
margin: 0px;
}
HTML
HTML
<div id="block">
</div>
<div id="lineHorizontal">
</div>
<div id="block">
</div>
This will display a block with a horizontal line to another block.
这将显示一个块与另一个块的水平线。
On mobile devices you could use (caniuse.com/transforms2d)
在您可以使用的移动设备上 (caniuse.com/transforms2d)
