连接元素与网站上的曲线

Question

我正在寻找一个轻量级的库或代码片段来连接网站上任何两个元素与曲线.元素不在画布上 - 可以是任何DOM元素 - 并且在调整浏览器窗口大小时应该重绘曲线.

我想在这里看到一个例子:http://tinypic.com/r/2cia0k8/9.

我已经尝试过jsPlumb,但我正在寻找更轻量级的解决方案.

Answer 1

这是一个自己动手的解决方案.创建一个svg(无形地)覆盖整个文档的元素.插入一个svg path元素,其开始和结束坐标是根据要连接的div的位置计算的,并且根据这些开始和结束坐标以任何方式创建其曲线.

对于下面的示例,单击"运行代码段",然后单击"整页"按钮,然后调整窗口大小以查看效果.

该示例有两个div通过其水平内侧边缘的中间连接.当然,曲线的细节取决于您.连接器使用dsvg 的属性构造path.在这个例子中,"M"是路径将开始的"moveTo"坐标,"C"点是立方贝塞尔曲线的第一和第二控制点和最终坐标.你必须看看那些高达了解它们是什么,但他们在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>