清单 2. 计算 X 坐标private int[] getXCoordinates(ArrayList seriesData){ int xSpan = (int)GraFixConstants.xSpan; int longestSeries = Utilities.getLongestSeries(seriesData); int numSegments = ((double[])seriesData.get(longestSeries)).length; int sectionWidth = (int)xSpan / numSegments; //want to divide span of xAxis int xPositions[] = new int[numSegments]; // will contain X-coordinate of all dots. for(int i=0; i<numSegments; i++){ xPositions[i]= (i+1)*sectionWidth;//dots spaced at distance of sectionWidth } return xPositions; }
Y 坐标:Y 坐标是某一个点距离原点的纵向距离。计算 Y 坐标要将某一个值按比例从一个范围缩放到另一个范围。例如,给出相同的集合 {10,20,30,40},您可以看出,数据的范围是 0 到 40,新的范围就是 Y 坐标轴的跨度(高度)。假设 Y 坐标轴的高度为 400,那么第一个元素(10)的高度将是100,第二个元素的高度将是 200,依此类推。
通过以下例子,您可以更好地理解如何按比例将一个值从一个范围缩放到另一个范围:假定一个范围的跨度是从 0 到 2048,而您打算将该范围内的任意值(比如说 1024)缩放到另一个从 0 到 100 的范围内,那么您立刻就可以知道,等刻度值是 50。该缩放所遵循的三值线算法是:
line 1---> 2048 / 1024 equals 2.
line 2---> 100 - 0 equals 100.
line 3---> 100 / 2 equals 50, which is the desired scaled value.
步骤 3:您想在哪儿进行绘图?
您还需要进行绘图的地方。可以通过扩展 Eclipse ViewPart 和使用 SWT Composite 来创建您自己的视图。此外,也可以使用从 main() 函数中调用的 SWT shell。
在扩展 Eclipse ViewPart 时,至少必须实现两个函数:createPartControl(Composite parent) 和 setFocus()。函数 createPartControl(Composite parent) 是在屏幕上绘制视图时自动调用的。您的兴趣只在所接收的 SWT Composite 上。因此,将它传递给某个类,然后通过对这个类进行编码来绘制图形。
清单 3. 使用 Eclipse ViewPart 绘图
public class MainGraFixView extends ViewPart{ public void createPartControl(Composite parent) { //create or get data in an arraylist ArrayList seriesData = dataGenerator(); //instantiate a plotter, and provide data to it. DirectedGraphXYPlotter dgXYGraph = new DirectedGraphXYPlotter(parent); dgXYGraph.setData(seriesData); dgXYGraph.plot(); //ask it to plot } public void setFocus() { } }
步骤 4;您需要绘制哪种图形?
一旦拥有了数据以及想用来绘制图形的区域,就必须确定您需要哪种类型的可视化。在本文中,我演示了如何编写代码来创建 X-Y 坐标图和线形图。一旦知道了绘制 X-Y 坐标图的技术,就应该能够绘制出其他图形,比如条形图和饼图。要想更多地了解 X-Y 坐标图,请参阅我为本文编写的 DirectedGraphXYPlotter 类(参见所附源代码中的 srcGraFixPlottersDirectedGraphXYPlotter.java)。
步骤 5:创建自己的 X-Y 坐标图
X-Y 坐标图应该能够绘制出 2-D 飞机上的任意数量的级数线。每个级数线都应该以图形形式显示出引用 X 和 Y 引用线的那些级数中的每个点的位置。每个点都应该通过一条线连接到级数中的下一个点上。通过使用表示一个点和一条线的 Draw2D 图形,您应该能够创建这样一个坐标图。例如,为了表示一个点,我通过扩展 Ellipse 图形创建了一个 Dot 图形,并使用 PolylineConnection 图形来表示连接线。
DirectedGraphXYPlotter 类只有两个公共函数:setData(ArrayList seriesData) 和 plot()。函数 setData(ArrayList seriesData) 接受您想要以图形形式形象化的数据(参见步骤 1),而 plot() 函数则开始绘图。
一旦调用了 plot() 函数,就必须依次采用以下步骤:
采用一个 SWT Composite,并将 FigureCanvas 放在它之上。然后,将一个类似 Panel 的通用容器图放在画布上。
计算将要绘制的级数的数量,然后填充创建 DirectedGraphs 所需数量的 NodeLists 和 EdgeLists。
在 Panel 图上绘制 X 坐标轴和 Y 坐标轴。(参见所附源代码中 srcGraFixFigure 目录下的 XRulerBar.java 和 YRulerBar.java。)
创建和级数一样多的 DirectedGraphs,以便进行绘图。
在 Panel 图上绘制点和连接线,同时采用步骤 d 中创建的 DirectedGraphs 中的图形数据。
最后,通过提供 Panel 图来设置画布的内容,其中包括到目前为止您已经准备好的所有的点和连接线。
在以下代码中:
第 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 连接在一起的。
(编辑:aniston)
|