渲染跳线的最佳方式

Question

我正在实施一个基于跳线的连接盒系统。我想知道渲染跳线的最佳选择是什么，这是一个屏幕截图，电缆是 Gimp 中的模型：

修补程序背景现在是 <div>，盒子也是 "ports"（盒子里面的蓝色小方块是电缆的端子）。

我应该直接将背景设为 canvas 还是动态更新的 SVG？还是为每根绳索使用 HTML 元素更好。我可以看到这些优于 canvas:

的优势

也许可以修改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>

渲染跳线的最佳方式

Best way to render patch cords

html

javascript

css

svg

html5-canvas