Question

我有两个div元素，并将它们设置为圆圈样式。然后我想绘制一条线来连接这两个圆圈的最近点。我的策略是找到两个div的中心点，因为连接两个点的直线将是最短的路径。然后根据与线和圆的轮廓相交的两个点绘制一条线。我可以概念化和可视化它，但我可以把它用于代码。请帮忙！

.c {
    width: 75px;
    height: 75px;
    overflow: hidden;
    border-radius: 50%;

}

.c a {
	width: 75px;
	height: 75px;
    border-radius: 50%;
    background-color: #06849b;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    color: #FFFFFF;
    text-decoration: none;
}


#c1 {
  position: absolute;
  top: 13px;
  left: 5px;
}


#c1 {
  position: absolute;
  top: 50%;
  right: 50%;
}

<div id="c1" class="c"><a href="#">Circle1</a></div>

<div id="c2" class="c"><a href="#">Circle2</a></div>

Answer 1

我刚刚重新发现了这个问题的高中数学..：D

http://jsfiddle.net/r1qL55f7/2/

var circles = $('<div class="circle">'),
    cont = $('.cont'),
    n = 15;

//generate circles
while (n--) cont.append(circles.clone().text(n+1));
circles = $('.circle');

//position circles randomly
var w = cont.width(),
    h = cont.height();
circles.each(function(){
    $(this).css('top',h*Math.random()+'px');
    $(this).css('left',w*Math.random()+'px');
});


//generate lines
circles.each(function(i){
    var pos0 = $(this).position(),
        pos1 = (circles.eq(i+1)||{}).position();

    if (pos1==undefined) return;
    var x0 = pos0.left,
        y0 = pos0.top,
        x1 = pos1.left,
        y1 = pos1.top;
    line(x0, y0, x1, y1);
});


function line(x, y, x1, y1) {
    var l = $("<div class='line'>");
    //soh cah TOA and pythargoream theorem
    var w = circles.width()/2;
    l.css({
        top: y+w,
        left: x+w,
        width: Math.sqrt((x1-x)*(x1-x) + (y1 - y)*(y1 - y)),
        transform: 'rotate('+Math.atan2((y1-y),(x1-x))+'rad)'
    });
    cont.append(l);
}

关于专栏：

线条粗细是div的高度。

line的长度是div的宽度。

我将变换原点设置为行的左侧和中心。

然后将其设置为开始div。

然后将其旋转到x弧度，幸运的是css旋转接受弧度。

幸运的是atan2给了radian。

并注意根据您的线所在的象限而改变的符号.Math.atan仅给出我们都熟悉的象限1。

Answer 2

我会用svg。

首先将svg标签添加到html：

<svg id="svg" height="100%" width="100%"></svg>

然后使用jquery计算圆心的位置，并在两者之间画一条线：

var c1 = $('#c1');
var c2 = $('#c2');

var newLineBeginX = c1.position().left + (c1.width() / 2);
var newLineBeginY = c1.position().top + (c1.height() / 2);

var newLineEndX = c2.position().left + (c2.width() / 2);
var newLineEndY = c2.position().top + (c2.height() / 2);

var line = "<line x1='"+newLineBeginX+"' y1='"+newLineBeginY+"' x2='"+newLineEndX+"' y2='"+newLineEndY+"' style='stroke:#06849b;stroke-width:2' />"
//var line = "<span class='line' style='height:"+lineSize+"px'></span>";
$("#svg").append(line);
$("body").html($("body").html());

我的css：

#svg {
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

要获得完整的图片，这里有一个工作小提琴：https://jsfiddle.net/mmnoohky/1/

如果您需要文本，那么您可能需要稍微调整一下，以便该行不包含文字。

Answer 3

试试这个：

HTML：

<div class='Circle' id='C1'></div>
<div class='Circle' id='C2'></div>
<div class='Line' id='L1'></div>
<button onclick='Circles.place(); return false;'>Place Circles</buton>

CSS：

.Circle {
    position:absolute;
    border-radius:50px;
    width:50px;height:50px;
    margin:-25px;/* make any position act as circle-center */
}
#C1 { background:#080; }
#C2 { background:#05A; }

.Line {
    position:absolute;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;/* Magic here */
    height:2px;
    background:#800;
}

button {
    position:absolute;
    bottom:10px;
    left:10px;
}

JAVASCRIPT：

$( document ).ready(function(){
    Circles.Elm = [$('#C1'),$('#C2'),$('#L1')];
    Circles.place();
});

var Circles = {
    Elm : [],
    Max : [300,200],
    pos1 : [],
    pos2 : [],
    place : function(){
        Circles.pos1 = [Math.round(Math.random()*(Circles.Max[0]-25)+25),Math.round(Math.random()*(Circles.Max[1]-25)+25)];
        Circles.pos2 = [Math.round(Math.random()*(Circles.Max[0]-25)+25),Math.round(Math.random()*(Circles.Max[1]-25)+25)];
        Circles.Elm[0].css('left',Circles.pos1[0]+'px').css('top',Circles.pos1[1]+'px');
        Circles.Elm[1].css('left',Circles.pos2[0]+'px').css('top',Circles.pos2[1]+'px');
        Circles.lineDraw();
    },
    lineDraw : function(){
        L = Math.sqrt(
            (Circles.pos1[0]-Circles.pos2[0])*(Circles.pos1[0]-Circles.pos2[0]) +
            (Circles.pos1[1]-Circles.pos2[1])*(Circles.pos1[1]-Circles.pos2[1]) );
        A = Math.atan2(Circles.pos2[1]-Circles.pos1[1],Circles.pos2[0]-Circles.pos1[0])*(180/Math.PI);
        Circles.Elm[2].css({
            'left':Circles.pos1[0]+'px',
            'top':Circles.pos1[1]+'px',
            'transform':'rotate('+A+'deg)',
            'width':L,
        });
    },
}

画一条线来连接两个cicrles

3 个答案: