在以下代码中:
第 6-11 行代码对应于上述的步骤 a。
第 14 行,即函数 populateNodesAndEdges(),对应于上述的步骤 b。
第 16 行,即函数 drawAxis(),对应于上述的步骤 c。
第 17 行、第 18 行和第 19 行对应于上述的步骤 d 和步骤 e。
第 20 行对应于上述的步骤 f。
清单 4. plot() 函数
1. public void plot(){
2. //if no place to plot, or no data to plot, return.
3. if(null==_parent || null==_seriesData)
4. return;
5.
6. Composite composite = new Composite(_parent, SWT.BORDER);
7. composite.setLayout(new FillLayout());
8. FigureCanvas canvas = new FigureCanvas(composite);
9.
10. Panel contents = new Panel();//A Panel is a general purpose container figure
11. contents.setLayoutManager(new XYLayout());
12. initializeSpan(contents.getClientArea());
13.
14. populateNodesAndEdges();
15.
16. drawAxis(contents);
17. for(int i=0; i<_numSeries; i++){
18. drawDotsAndConnections(contents,getDirectedGraph(i)); //
draw points & connecting wires
19. }
20. canvas.setContents(contents);
21. } |
plot() 调用了两个重要内部函数来帮助绘制图形中的点:populateNodesAndEdges() 和 drawDotsAndConnections()。在您发现这两个函数到底完成什么功能之前,让我们来看一下 DirectedGraph。
DirectedGraph 是什么?为了使用 Draw2D 进行绘图,事实上您必须先创建一个图形,定义将要绘制的点和线。一旦创建好这个图形,就可以使用它实际在画布上进行绘图。您可以将 DirectedGraph 形象化为拥有有限数量的 Node 的一个 2-D 图形,在该图形中,每个 Node 都位于一些 Point 上,相邻的 Node 是通过 Edges 连接在一起的。
您可以通过以下代码行来了解创建 DirectedGraph 的关键所在。首先,创建一个 Node 列表和一个 Edges 列表。然后,创建一个新的 DirectedGraph,并通过刚才创建的 NodeList 和 EdgeList 设置其成员(Nodes 和 Edges)。现在,使用 GraphVisitor 来访问这个 DirectedGraph。为了简便起见,包 org.eclipse.draw2d.internal.graph 中有许多 GraphVisitor 实现,这些 GraphVisitor 有一些用来访问图形的特定算法。
因此,创建 DirectedGraph 的示例代码类似于下面这样:
清单 5. 示例 DirectedGraph
//This is a sample, you will need to add actual Node(s) to this NodeList.
NodeList nodes = new NodeList(); //create a list of nodes.
//This is a sample, you will need to add actual Edge(s) to this EdgeList.
EdgeList edges = new EdgeList(); //create a list of edges.
DirectedGraph graph = new DirectedGraph();
graph.nodes = nodes;
graph.edges = edges;
new BreakCycles().visit(graph);//ask BreakCycles to visit the graph.
//now our "graph" is ready to be used. |
现在,已经知道 DirectedGraph 包含许多 Node,其中,每个 Node 都可能包含一些数据,并且还存储了这些数据的 X 坐标和 Y 坐标,以及一个 Edges 的列表,每个 Edge 都知道在自己的两端分别有一个 Node,您可以通过以下技术,使用这些信息来绘图,其中涉及两个部分:
部分 A —— 通过以下步骤填充 Node 和 Edge:
创建一个 NodeList,在该列表中,集合中的每个元素都有一个 Node,集合 {10,20,30,40} 需要 4 个 Node。
找出每个元素的 X 坐标和 Y 坐标,将它们存储在 node.x 和 node.y 成员变量中。
创建一个 EdgeList,在该列表中,有 n -1 个 Edge,其中,n 是集合中的元素的数量。例如,集合 {10,20,30,40} 需要三个 Edge。
将 Node 与每个 Edge 的左右端相关联,并相应地设置 edge.start 和 edge.end 成员变量。
部分 B —— 通过以下步骤绘制表示 Node 和 Edge 的图形:
绘制一个 Dot 图来表示每个 Node。
绘制一个 PolylineConnection 图形来表示每个 Edge。
界定每个 PolylineConnection 图形,以固定 Dot 图的左右端。
现在,回到内部函数的工作上来:
函数 populateNodesAndEdges() 实现了该技术的部分 A,而函数 drawDotsAndConnections() 则实现了该技术的部分 B。
函数 populateNodesAndEdges() 计算将绘制多少级数。它为每个级数创建了一个 NodeList 和一个 EdgeList。
每个 NodeList 都包含一个用于特殊级数的 Node 的列表。每个 Node 都保存着关于应该在什么地方绘制 X 坐标和 Y 坐标的信息。函数 getXCoordinates() 和 getYCoordinates() 分别用于检索 X 坐标值和 Y 坐标值。使用步骤 2 中的相同算法,这些函数也可以内部地将数据值按比例从一个范围缩放到另一个范围。
每个 EdgeList 都包含一个用于特殊级数的 Edges 的列表。每个 Edge 的左右端上都分别有一个 Node。
清单 6. populateNodesAndEdges() 函数
private void populateNodesAndEdges(){
_seriesScaledValues = new ArrayList(getScaledValues(_seriesData));
_nodeLists = new ArrayList();
_edgeLists = new ArrayList();
for(int i=0; i<_numSeries; i++){
_nodeLists.add(new NodeList());// one NodeList per series.
_edgeLists.add(new EdgeList());// one EdgeList per series.
}
//populate all NodeLists with the Nodes.
for(int i=0; i<_numSeries; i++){//for each series
double data[] = (double[])_seriesData.get(i);//get the series
int xCoOrds[] = getXCoordinates(_seriesData);
int yCoOrds[] = getYCoordinates(i, data);
//each NodeList has as many Nodes as points in a series
for(int j=0; j<data.length; j++){
Double doubleValue = new Double(data[j]);
Node node = new Node(doubleValue);
node.x = xCoOrds[j];
node.y = yCoOrds[j];
((NodeList)_nodeLists.get(i)).add(node);
}
}
//populate all EdgeLists with the Edges.
for(int i=0; i<_numSeries; i++){
NodeList nodes = (NodeList)_nodeLists.get(i);
for(int j=0; j<nodes.size()-1; j++){
Node leftNode = nodes.getNode(j);
Node rightNode = nodes.getNode(j+1);
Edge edge = new Edge(leftNode,rightNode);
edge.start = new Point(leftNode.x, leftNode.y);
edge.end = new Point(rightNode.x, rightNode.y);
((EdgeList)_edgeLists.get(i)).add(edge);
}
}
int breakpoint = 0;
} |
一旦函数 populateNodesAndEdges() 完成了它的使命,为所有将要绘制的级数创建了 NodeLists 和 EdgeLists,另一个函数 drawDotsAndConnections() 就开始为每个 Node 绘制一个 Dot 图形,并为每个 Edge 绘制一个 PolylineConnection 图形。
清单 7. drawDotsAndConnections()、drawNode() 和 drawEdge() 函数
private void drawDotsAndConnections(IFigure contents, DirectedGraph graph){
for (int i = 0; i < graph.nodes.size(); i++) {
Node node = graph.nodes.getNode(i);
drawNode(contents, node);
}
for (int i = 0; i < graph.edges.size(); i++) {
Edge edge = graph.edges.getEdge(i);
drawEdge(contents, edge);
}
}
private void drawNode(IFigure contents, Node node){
Dot dotFigure = new Dot();
node.data = dotFigure;
int xPos = node.x;
int yPos = node.y;
contents.add(dotFigure);
contents.setConstraint(dotFigure, new Rectangle(xPos,yPos,-1,-1));
}
private void drawEdge(IFigure contents, Edge edge){
PolylineConnection wireFigure = new PolylineConnection();
//edge.source is the Node to the left of this edge
EllipseAnchor sourceAnchor = new EllipseAnchor((Dot)edge.source.data);
//edge.target is the Node to the right of this edge
EllipseAnchor targetAnchor = new EllipseAnchor((Dot)edge.target.data);
wireFigure.setSourceAnchor(sourceAnchor);
wireFigure.setTargetAnchor(targetAnchor);
contents.add(wireFigure);
} |
结束语
如果您想以图形形式描绘将展示的数据,那么 Draw2D 是一个好工具。可以使用 Draw2D 编写自己的用来绘制图形的 Java 代码,这有助于您将精力集中于缩放代码和绘制代码上,把其他与绘制相关的工作留给 Draw2D 和 SWT。您还可以通过使用所选择的 Draw2D 图形来控制您的图形的外观。Draw2D 简化了绘图的基本步骤,并且可以最大限度地减少您对第三方工具箱的依赖。(