算法绘制节点之间的连接不重叠的节点 [英] Algorithm to draw connections between nodes without overlapping nodes
问题描述
予有一系列节点中的曲线图。节点中存放的是特定的斑点的用户。节点被保证不重叠，并且，事实上，以具有在它们之间的空间的缓冲区。这些节点连接，并且每个边缘联接到一个节点在特定点。我需要画出节点之间的边缘，使得所述边缘：
I have a series of nodes in a graph. The nodes are placed by the user in specific spots. The nodes are guaranteed to not overlap and, in fact, to have a buffer of space between them. These nodes are connected and each edge joins to a node at a specific point. I need to draw the edges between the nodes such that the edges:
- （必需）不重叠的父节点
- （理想情况下）不会重叠任何节点
我不担心边交叉。奖励积分，如果有这个在JavaScript中实现。我无法使用JavaScript之外的任何库。
I am not worried about edge crossings. Bonus points if there's an implementation of this in Javascript. I am unable to use any libraries outside of Javascript.
推荐答案
一种解决方案可以使用的 贝塞尔曲线 ：
One solution could be using Bézier Curves:
Bezier曲线是通过光合一组控制点P0定义， 其中n被称为其级数（n = 1为直链，2为二次等）。 第一个和最后一个控制点始终是终点的 曲线;然而，的中间控制点（如果有的话）一般做 不位于曲线上
"A Bézier curve is defined by a set of control points P0 through Pn, where n is called its order (n = 1 for linear, 2 for quadratic, etc.). The first and last control points are always the end points of the curve; however, the intermediate control points (if any) generally do not lie on the curve."
因此，基本思想是使用父节点（多个）作为中间控制点。您也可以使用边缘的点作为中间控制点，以避免边缘重叠。
So the basic idea is to use parent node(s) as intermediate control points. You may also use points of the edges as intermediate control points to avoid edges overlapping.
在wiki文章，你可以找到很好的动画解释它。
In the wiki article you can find nice animations explaining it.
对于 JavaScript实现我接过一看以下库：
For javascript implementation I took a look at the followings libs:
- jsdraw2d (LGPL license) with a nice demo and well referenced. Implemented it also using HTML5 and SVG for performance (jsdraw2dX).
- jsbezier on google code
但是，如果你谷歌的的JavaScript贝塞尔库的，你可以找到更多。
But if you google "javascript bezier library" you can find more.
这篇关于算法绘制节点之间的连接不重叠的节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
