构建具有可拖动节点的图表

Question

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

我可以使用 CSS(3)/HTML(5) 大师的任何建议。我愿意接受各种解决方案，但想避免闪光/[银|月]光。

举个例子，我真的很喜欢Pearltrees界面，但我的界面不需要那么花哨。我尝试从他们的页面源代码中“读取”main.js，但它有无数的函数，每个函数都包含在一行中。

Answer 1

您不必在每次绘制时都清除整个画布。这只是最简单的编码方法。

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

当您需要处理相交线时，您会遇到麻烦。为简单起见，可以在矩形中进行擦除，然后一些数学将计算出您是否与其他线相交，如果是这样，它们也需要重新绘制。

如果您想真正变得更奇特，您可以以更细粒度的方式重新绘制，但在大多数情况下矩形应该足够了。