在Java中使用Draw2D和SWT繪圖

用 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() 函數，就必須依次採用以下步驟：

1. 採用一個 SWT Composite，並將 FigureCanvas 放在它之上。然後，將一個類似 Panel 的通用容器圖放在畫布上。
2. 計算將要繪製的級數的數量，然後填充建立 DirectedGraphs 所需數量的 NodeLists 和 EdgeLists。
3. 在 Panel 圖上繪製 X 座標軸和 Y 座標軸。（參見所附原始碼中 /src/GraFix/Figure 目錄下的 XRulerBar.java 和 YRulerBar.java。）
4. 建立和級數一樣多的 DirectedGraphs，以便進行繪圖。
5. 在 Panel 圖上繪製點和連接線，同時採用步驟 d 中建立的 DirectedGraphs 中的圖形資料。
6. 最後，通過提供 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 簡化了繪圖的基本步驟，並且可以最大限度地減少您對第三方工具箱的依賴。