javascript - 在网站上用曲线连接元素

Question

我正在寻找一个轻量级库或代码片段，以用曲线连接网站上的任意两个元素。这些元素不在 Canvas 上 - 可以是任何 DOM 元素 - 并且当调整浏览器窗口大小时应该重新绘制曲线。

我想要实现的目标的一个例子可以在这里看到:http://tinypic.com/r/2cia0k8/9 .

我尝试过 jsPlumb，但正在寻找更轻量级的解决方案。

Answer 1

这是一个自己动手的解决方案。创建一个(不可见的)覆盖整个文档的 svg 元素。插入一个 svg path 元素，其开始和结束坐标是根据要连接的 div 的位置计算的，并且其曲线是根据这些开始和结束坐标以您想要的方式创建的。

对于下面的示例，单击“运行代码片段”，然后单击“整页”按钮，然后调整窗口大小以查看效果。

该示例有两个 div 通过其水平内边缘的中间连接。当然，曲线的细节取决于您。连接器是使用 svg path 的 d 属性构建的。在此示例中，“M”是路径开始的“moveTo”坐标，“C”点是三次贝塞尔曲线的第一个和第二个控制点以及最终坐标。你必须look those up了解它们是什么，但它们是在 svg 元素中创建平滑曲线的通用方法。

更复杂的文档需要更加小心地确定 svg path 元素的开始和结束坐标，但此示例至少为您提供了一个起点。

var divA      = document.querySelector("#a");
var divB      = document.querySelector("#b");
var connector = document.querySelector("#connector");

var drawConnector = function() {
  var posnA = {
    x: divA.offsetLeft + divA.offsetWidth,
    y: divA.offsetTop  + divA.offsetHeight / 2
  };
  var posnB = {
    x: divB.offsetLeft,
    y: divB.offsetTop  + divA.offsetHeight / 2
  };
  var dStr =
      "M" +
      (posnA.x      ) + "," + (posnA.y) + " " +
      "C" +
      (posnA.x + 100) + "," + (posnA.y) + " " +
      (posnB.x - 100) + "," + (posnB.y) + " " +
      (posnB.x      ) + "," + (posnB.y);
  connector.setAttribute("d", dStr);
};

window.addEventListener("resize", drawConnector);

drawConnector();

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
div {
  color: white;
  text-align: center;
  padding: 10px;
  position: fixed;
  width: 200px;
  height: 100px;
}
#a {
  background-color: blue;
  top: 20px;
  left: 20px;
}
#b {
  background-color: red;
  bottom: 20px;
  right: 20px;
}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <path id="connector" fill="none" stroke="black" stroke-width="10" />
</svg>
<div id="a">This is a regular HTML div.</div>
<div id="b">So is this.</div>