呈现跳线的最佳方式
问题描述：
我正在实现基于跳线的连接盒子系统。我想知道我的最佳选择是渲染补丁绳索，这里是一个屏幕截图，该电缆是实体模型在GIMP：呈现跳线的最佳方式
该修补的背景现在是一个<div>，盒子也是如此，“端口”（盒子内部蓝色的小方块是电缆终端）也是如此。
我应该直接让背景变成画布还是动态更新SVG？或者每个电源线都使用HTML元素更好。我能看到这些优势的画布：
- 也许CSS可以按摩到自动进行COORDS移动时的箱子移动
- 我给一个免费的空间分割，即我将拥有一个更简单的工作检测坐标上的点击。
- 我可以用
z-index解决在箱子的顶部分层
分层HTML元素的缺点可能是当有许多电线
- 表现？
- 当电线重叠时会发生什么情况。任何透明背景的问题？
编辑：在交互性方面，我得出的结论是联SVG将是最好的办法。但是，我担心的表现。例如，您可以在其中拖动一些SVG组件的this simple demo在现代计算机上可笑地变得缓慢。这只是糟糕的编程还是SVG的固有问题？
答
我最终使用<div>元素的盒子和一个<svg>所有的跳线。
答
我想用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>
我建立了非常相似最近，结束了使用D3在画布上的东西全部创建。 （尽快答复） – atmd
好的，谢谢。我在此期间看过[这个问题]（http://stackoverflow.com/questions/7034/graph-visualization-library-in-javascript）。到目前为止，[jPlump]（https://github.com/sporritt/jsplumb）似乎是最轻量级和简化的解决方案。但它是混合开源/商业项目，我通常不惜一切代价避免。 –
如果盒子+连接器的组合数量较少或中等，则SVG是一个不错的选择。 SVG元素是完整的DOM元素，因此您将在每个元素上获得内置事件。随着元素数量变大，内置事件成本也变大，因此您可能会切换到画布。画布接收事件，但它的绘图不是，所以你将不得不在代码中对你的盒子进行命中测试（不难）。我会回应@atmd说d3是一个很好的图书馆，值得作为你的项目工具检查。 – markE