代码之家 › 专栏 › 技术社区 › 0__

渲染跳线的最佳方式

html5-canvas svg css html javascript

0__ · 技术社区 · 11 年前

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

enter image description here

修补程序背景现在是 <div> ,盒子也是如此,“端口”也是如此(盒子里的蓝色小方块是电缆的终端)。

我应该直接将背景设置为画布还是动态更新的SVG?或者对每条线使用HTML元素更好。我可以看到这些优于画布的优势:

也许可以对CSS进行按摩,使坐标在框移动时自动移动
我免费获得了一个空间分区,也就是说,我可以更容易地检测坐标上的点击。
我可以用 z-index 解决盒子顶部的分层问题

分层HTML元素的缺点可能是

当有许多跳线时的性能?
当电线重叠时会发生什么。透明背景有问题吗?

编辑: 就交互性而言,我认为内联SVG是最好的方法。然而,我对表演感到担忧。例如 this simple demo 在现代计算机上,您可以拖动一些SVG组件,速度非常慢。这只是糟糕的编程还是SVG固有的问题?

2 回复 | 直到 11 年前

0__ 10 年前

我最终使用了 <div> 元素和单个 <svg> 用于所有跳线。

Persijn 10 年前

我想用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>