使用可拖动节点构建图形 [英] Building a graph with draggable nodes

问题描述

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

I want to populate some user data on the browser as a graph of draggable nodes, with each node representing a user and the edges are relationships between them. I figured out a solution(it works): I use draggable divs over an HTML5 canvas (the divs have a greater z-index than the canvas, and hence are visible). The canvas is then used to draw the lines connecting the divs. The problem is that every time the "drag" event is triggered by the user dragging a node, the entire canvas needs to be cleared and ALL the edges need to be redrawn. That leads to flicker and this, I think, is not the optimal solution. Please note that I'm not really a HTML/CSS pro, and may be my solution is very naive.

我可以使用任何建议从CSS（3） HTML（5）Gurus。我对各种解决方案开放，但希望避免Flash / [Silver | Moon]光。

I can use any suggestions from you CSS(3)/HTML(5) Gurus. I am open to all sorts of solutions, but would like to avoid Flash/[Silver|Moon]light.

作为一个例子，我真的很喜欢 Pearltrees 界面，但我不需要 。我尝试从他们的页面源代码阅读main.js，但是它的一个gazillion函数，每个都包装在一行。

As some example, I really like the Pearltrees interface, but mine need not be that fancy. I tried "reading" main.js from their page source, but its a gazillion functions, all wrapped up in a single line each.

推荐答案

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

You don't have to clear the entire canvas each time it draws. That's just the simplest way to code it.

相反，你可以跟踪与移动的节点相关的行，只需重绘该节与背景颜色（更复杂，如果背景不是纯色），然后绘制新行。

Instead you can keep track of the line(s) related to the moved node and just redraw that section by drawing over the line with the background color (more complicated if background isn't a solid color), then drawing the new line.

当你有相交线时，你会遇到并发症你需要处理。为了简单起见，擦除可以在矩形中完成，然后一些数学将会弄清楚如果你与其他线相交，如果这样，他们将需要重绘。

You'll run into complications when you have intersecting lines that you'll need to handle. For simplicity, erasing can be done in rectangles then some math will figure out if you're intersecting other lines, if so they will need to be redrawn as well.

如果你想得到真正的想象，你可以更细致的方式重画，但矩形应该足够在大多数情况下。

If you want to get really fancy you can redraw in a more granular fashion but rectangles should be sufficient in most cases.

这篇关于使用可拖动节点构建图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！