用 Java繪圖一直都吸引著開發人員的注意。傳統上，Java 開發人員使用 java.awt.Graphics 或 Java 2D API 進行繪圖。一些開發人員甚至使用現成的開源工具箱（如 JSci）來繪圖。但很多時候，您的選擇被限定在了 AWT 或 Swing 上。為了最大限度地減少對第三方工具箱的依賴，或者為了簡化繪圖基礎，可以考慮使用 Draw2D，並編寫自己的代碼來制圖或繪圖。
Draw2D 簡介
Draw2D 是一個駐留在 SWT Composite 之上的輕量級窗口小部件系統。一個 Draw2D 實例 由一個 SWT Composite、一個輕量級系統及其內容的圖形組成。圖形 是 Draw2D 的構建塊。關於 Draw2D API 的所有細節，可以從 Draw2D Developer’s Guide 的 Eclipse 幫助文件中找到。因為本文不打算成為一篇講述 Draw2D 的教程，所以，為了簡便起見，只要您了解 Draw2D API 可以幫助您在 SWT Canvas 上進行繪圖就足夠了。您可以直接使用一些標准的圖形，比如 Ellipse、Polyline、RectangleFigure 和 Triangle，或者，您可以擴展它們來創建自己的圖形。此外，一些容器圖形，如 Panel，可以充當所有子圖形的總容器。
Draw2D 有兩個重要的包：org.eclipse.draw2d.geometry 和 org.eclipse.draw2d.graph，本文中使用了這兩個包。org.eclipse.draw2d.geometry 包有一些有用的類，比如 Rectangle、Point 和 PointList，這些類都是自我解釋的。另一個包 org.eclipse.draw2d.graph 開發人員使用的可能不是太多。這個包提供了一些重要的類，比如 DirectedGraph、Node、Edge、NodeList 和 EdgeList，這些類有助於創建圖表。
在本文中，我將解釋如何使用 Draw2D 編寫代碼，幫助您以圖形的方式形象化您的數據。我將從一項技術的描述開始，該技術將位於某一范圍內的數據值（比如，從 0 到 2048）按比例縮放成另一范圍內的等效數據值（例如，從 0 到 100）。然後，我將舉例說明如何繪制出任意個級數的 X-Y 坐標圖，每個級數都包含一組數據元素。在學習了本文中的概念之後，就可以很容易地繪制其他類型的圖表，比如餅圖和條形圖。
具體的繪圖過程
步驟 1：您想繪制什麼樣的圖形？
顯然，您想以圖形方式描繪來自數據源的數據。所以，您需要那些您想以圖形形式形象化的數據。為了簡便起見，我使用了一個名為 dataGenerator 的簡單函數生成的數據，而不是從 XML 文件或其他一些數據源讀取數據，該函數使用了一個 for(;;) 循環，並以數組列表的形式返回生成的值。
清單 1. 生成一些數據
private ArrayList dataGenerator() {
double series1[] = new double[5];
for(int i=0; i<series1.length; i++)
series1[i] = (i*10) + 10; // a linear
series containing 10,20,30,40,50
double series2[] = new double[9];
series2[0] = 20; series2[1] = 150; series2[2] = 5;
series2[3] = 90; series2[4] = 35; series2[5] = 20;
series2[6] = 150; series2[7] = 5; series2[8] = 45;
double series3[] = new double[7];
for(int i=0; i<series3.length; i++)
series3[i] = (i*20) + 15;
seriesData.add(series1);
seriesData.add(series2);
seriesData.add(series3);
return seriesData;
}
步驟 2：縮放技術 —— 從給定的數據生成 X 坐標和 Y 坐標
一些新的術語
FigureCanvas
Draw2D 中的 FigureCanvas 是 SWT Canvas 的一個擴展。FigureCanvas 可以包含 Draw2D 圖形。
Panel
Panel 是 Draw2D 中的一個通用容器圖形，它可以包含子圖形。您可以向一個 Panel 圖形中添加許多圖形，然後將這個 Panel 圖形提供給 FigureCanvas。
DirectedGraph
DirectedGraph 是一個 2-D 圖形，擁有有限數量的 Node，每個 Node 都位於一些 Point 中，相鄰的 Node 是通過 Edges 彼此連接在一起的。
當您想繪制一架 2-D 飛機上的點時，必須找出每個點的 X 坐標和 Y 坐標。繪圖的奇妙之處在於能夠將某一個給定數據值從一個范圍按比例縮放到另一個范圍中，也就是說，如果給定一組值，如 {10,20,30}，那麼您應該能夠確定 2-D 飛機上具體哪些點（X 坐標和 Y 坐標）表示的是 10、20 和 30 這些數據值。
繪制總是在按照某一個限定縮放比例進行的。換句話說，在同一限定區域內，可以繪制任意數量的點。因為該區域是固定的，所以您總是可以找到 X 坐標軸的跨度（長度）和 Y 坐標軸的跨度（高度）。X 坐標軸和 Y 坐標軸的跨度只是等式的一部分。另一部分是找出數據值的范圍，並根據每個數據值在新范圍內的等效值來計算這些值的坐標。
計算 X 坐標和 Y 坐標
X 坐標：X 坐標是某一個點距離原點的水平距離。計算元素的數量，然後將 X 坐標軸的跨度分成 n 個區段，其中，n 是給定集合中的元素的數量，通過這種方式，可以計算某一集合中的所有點的橫向坐標。用這種分割方法可以獲得每個區段的長度。集合中的第一個點位於等於區段長度的第一段距離內。後續的每個點則位於區段長度加上原點到前一個點的距離的那一段距離內。
例如，給出一個集合 {10,20,30,40}，您立刻就可以知道要繪制 4 個點，因為集合中包含 4 個元素。所以，應該將 X 坐標軸的跨度分成 4 個相等的區段，每個區段的長度 = 跨度/4。因此，如果 X 坐標軸的跨度是 800，那麼區段的長度將是 800/4，即 200。第一個元素（10）的 X 坐標將是 200，第二個元素（20）的 X 坐標將是 400，依此類推。
清單 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 類（參見所附源代碼中的\src\GraFix\Plotters\DirectedGraphXYPlotter.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 坐標軸。（參見所附源代碼中\src\GraFix\Figure目錄下的 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 連接在一起的。
您可以通過以下代碼行來了解創建 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 簡化了繪圖的基本步驟，並且可以最大限度地減少您對第三方工具箱的依賴。
