构建与拖动节点

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或div只设置顶部边框，并调整大小并使用jquery + css3旋转它。