Question

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

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

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

Answer 1

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

对于下面的示例，请点击＆＃34;运行代码段＆＃34;，然后点击＆＃34;完整页面＆＃34;按钮，然后调整窗口大小以查看效果。

该示例有两个div通过其水平内侧边缘的中间连接。当然，曲线的细节取决于您。连接器是使用svg d的{{1}}属性构造的。在这个例子中，＆＃34; M＆＃34;是＆＃34; moveTo＆＃34;坐标路径将开始的位置和＆＃34; C＆＃34;点是三次贝塞尔曲线的第一和第二控制点和最终坐标。您必须look those up才能了解它们是什么，但它们是在svg元素中创建平滑曲线的一般方法。

更复杂的文档需要更加谨慎来确定svg path元素的起点和终点坐标，但这个例子至少为您提供了一个开始的地方。

＆＃13;

path

＆＃13;

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();

＆＃13;

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;
}

＆＃13;

连接元素与网站上的曲线

1 个答案: