我正在實現基於跳線的連接盒子系統。我想知道我的最佳選擇是渲染補丁繩索，這裏是一個屏幕截圖，該電纜是實體模型在GIMP：呈現跳線的最佳方式
該修補的背景現在是一個<div>，盒子也是如此，「端口」（盒子內部藍色的小方塊是電纜終端）也是如此。
我應該直接讓背景變成畫布還是動態更新SVG？或者每個電源線都使用HTML元素更好。我能看到這些優勢的畫布：
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