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