渲染跳线的最佳方法

Question

我正在实现一个基于跳线的系统，用于连接盒子。我想知道我最好的选择是渲染补丁线，这是一个屏幕截图，电缆是Gimp的模型：

修补程序背景现在是<div>，框也是如此，＆＃34;端口＆＃34; （盒子里面的蓝色小方块是电缆的终端）。

我应该直接将背景设为画布还是动态更新SVG？或者最好为每根线使用HTML元素。我可以在画布上看到这些优势：

• 也许CSS可以按摩，以便在框移动时自动移动坐标
• 我给了一个免费的空间分区，即我可以更轻松地检测出对坐标的点击。
• 我可以使用z-index解决方框顶部的分层问题

分层HTML元素的缺点可能是

• 有很多绳索时的表现？
• 当绳索重叠时会发生什么。透明背景有问题吗？

编辑：就交互性而言，我的结论是内联SVG将是最好的方法。但是，我担心表现。例如，this simple demo在现代计算机上可以拖动一些SVG组件的速度非常慢。这只是糟糕的编程还是SVG的固有问题？

Answer 1

我最后使用<div>元素作为框，并使用一个<svg>作为所有跳线。

Answer 2

我想用svg行做一个有效的例子 这是我得到了多远（我希望它有一些用处） 但它需要花费大量时间来添加所有创建路径等。

$(document).ready(function() {
  /*******
  Setting random position on the boxes
  ********/
  $('.box').each(function() {
    $(this).css({
      top: Math.random() * (document.body.clientHeight - $(this).height()),
      left: Math.random() * (document.body.clientWidth - $(this).width())
    });
  });
  /*****
  Handles behavior. click and svg create/place
  ******/
  $('.handle').click(function(e) {
    $(this).css("background-color", "red");
    var x = e.pageX;
    var y = e.pageY;
    console.log(x + " " + y);
  });

  /*******
  Grabbing and moving boxes
  *******/
  var $dragging = null;
  var offsetpos = [0.0, 0.0];

  $(document.body).on("mousemove", function(e) {
    if ($dragging) {
      var y = e.pageY - offsetpos[1];
      var x = e.pageX - offsetpos[0];
      if (x < 0 || y < 0) return;
      if (x > document.body.clientWidth - $dragging.width()) return;
      if (y > document.body.clientHeight - $dragging.height()) return;
      $dragging.offset({
        top: y,
        left: x
      });
    }
  });

  $(document.body).on("mousedown", ".box", function(e) {
    var $e = $(e.target);
    if ($e.hasClass("handle")) return;
    $dragging = $(e.target);
    offsetpos = [e.pageX - this.offsetLeft,
      e.pageY - this.offsetTop
    ];
  });

  $(document.body).on("mouseup", ".box", function(e) {
    $dragging = null;
  });
});

.network-wrapper {
  border: 5px solid fireBrick;
  border-radius: 2px;
  height: 200px;
  width: 90vw;
}
.field {
  width: 100%;
  height: 100%;
  position: relative;
}
.box {
  position: absolute;
  border: 2px solid black;
  width: 100px;
  height: 30px;
  cursor: move;
}
.box p {
  pointer-events: none;
  position: absolute;
  margin: 0;
  text-indent: 5px;
  margin-top: 5px;
}
.box .handle {
  cursor: pointer;
  position: absolute;
  background-color: #666;
  width: 10px;
  height: 10px;
}
.handle.top {
  top: 0;
}
.handle.left {
  left: 0;
}
.handle.bottom {
  bottom: 0;
}
.handle.right {
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="network-wrapper">
  <div class="field">
    <svg width="100%" height="100%">
    </svg>
    <div class="box">
      <div class="handle top left"></div>
      <div class="handle top right"></div>
      <div class="handle bottom left"></div>
      <div class="handle bottom right"></div>
      <p>some info</p>
    </div>
    <div class="box">
      <div class="handle top left"></div>
      <div class="handle top right"></div>
      <div class="handle bottom left"></div>
      <div class="handle bottom right"></div>
      <p>some info</p>
    </div>
    <div class="box">
      <div class="handle top left"></div>
      <div class="handle top right"></div>
      <div class="handle bottom left"></div>
      <div class="handle bottom right"></div>
      <p>some info</p>
    </div>
  </div>
</section>