使用可拖动节点构建图形

Question

我想在浏览器上填充一些用户数据作为可拖动节点的图形，每个节点代表一个用户，边缘是它们之间的关系。我找到了一个解决方案（它可以工作）：我在HTML5画布上使用可拖动的div（div具有比画布更大的z-index，因此是可见的）。然后使用画布绘制连接div的线条。问题是，每次用户拖动节点触发“拖动”事件时，都需要清除整个画布，并且需要重绘所有边缘。这会导致闪烁，我认为这不是最佳解决方案。请注意，我不是一个真正的HTML / CSS专家，可能我的解决方案非常幼稚。

我可以使用CSS（3）/ HTML（5）大师的任何建议。我对各种解决方案持开放态度，但我想避免使用Flash / [Silver | Moon]光。

作为一些例子，我非常喜欢Pearltrees界面，但我不需要那个花哨。我尝试从他们的页面源中“读取”main.js，但它的功能非常多，每个都包含在一行中。

Answer 1

每次绘制时， 都无法清除整个画布。这只是编码它的最简单方法。

相反，您可以跟踪与移动的节点相关的线条，并通过在背景颜色上绘制线条来重绘该部分（如果背景不是纯色，则更复杂），然后绘制新的线。

当你有需要处理的相交线时，你会遇到并发症。为简单起见，可以在矩形中完成擦除，然后一些数学运算会判断您是否与其他线相交，如果是这样，它们也需要重新绘制。

如果你想真正想要的话，你可以更精细地重绘，但在大多数情况下矩形应该足够了。

Answer 2

我从来没有做过这样的事情，但是如果你可以使用css3，你可以使用hr或aa div只使用顶部边框设置，并使用jquery +调整大小并旋转它CSS3。