css - 构建具有可拖动节点的图形

Question

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

我可以使用 CSS(3)/HTML(5) 专家的任何建议。我对各种解决方案持开放态度，但希望避免使用 Flash/[Silver|Moon]light。

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

Answer 1

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

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

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

如果你想变得非常花哨，你可以以更细粒度的方式重绘，但在大多数情况下矩形应该足够了。