从两个圆之间的圆心绘制线

Question

我有很多节点，只是一个圆形的div，它会继续移动，它们将相互连接。

一切都运行正常，但问题是连接两个节点的线不在中心，所以我想从圆心连接两个节点，所以如果这个圆继续移动那个中心位置不应该变了。

这是我的JS bin演示：

JS bin Demo

预期输出：

Answer 1

我认为你需要这个：

＆＃13;

＆＃13;

@import "compass/css3";

li {
  border: 5px solid black;
  border-radius: 2em;
  color: white;
  display: inline-block;
  height: 2em;
  line-height: 2em;
  margin: 0 1em;
  position: relative;
  text-align: center;
  width: 2em;
}

li::before {
  background: black none repeat scroll 0 0;
  content: "";
  height: 0.2em;
  left: -2.7em;
  position: absolute;
  top: 0.9em;
  width: 2.5em;
  z-index: -1;
}



li:first-child::before {
  display: none;
}

.active {
  background: dodgerblue;
}

.active ~ li {
  background: lightblue;
}

.active ~ li::before {
  background: lightblue;
}

body {
  font-family: sans-serif;
  padding: 2em;
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用圆的宽度和高度作为起点：

function connect() {
    var i, posFrom, posTo;
    for (i = 0; i < connectors.length; i++) {
        posFrom = connectors[i].from.offset();
        posTo = connectors[i].to.offset();
        drawline(posFrom.left + Math.round(connectors[i].from.width() / 2),
                 posFrom.top + Math.round(connectors[i].from.height() / 2),
                 posTo.left + Math.round(connectors[i].to.width() / 2),
                 posTo.top + Math.round(connectors[i].to.height() / 2),
                 connectors[i].from.attr("id") + "-" + connectors[i].to.attr("id")
        );
    }
}

Demo

Demo 2