Draw2d 温度计例子

我们可以将Draw2d理解为SWT的“Java2d”，在它出现之前，SWT的图形处理一直是不太令人满意的。 
  Draw2d是SWT的轻量级组件系统，Draw2d的实例由SWT组件、LightweightSystem和Draw2d的IFigure实例集合组成。 
  有一张很经典的用来分析Draw2d结构的图，用来阐述各个部分之间的关系，如下： 
 
  它们三者之间的关系是：LightweightSystem是桥梁，将IFigure实例连接到SWT组件上，通常是Canvas画布，或者它的子类Shell和某个Editor的Control，我们在界面上不能看到LightweightSystem，但是界面上所有能看到的组件都是直接或者间接放在它内部由它管理的，其内的组件按照树状结构排列。 
  LightweightSystem包含三个主要组成部分：RootFigure是LightweightSystem中所有图形的根，也就是说其他图形都是直接或间接放在RootFigure里的；EventDispatcher把Canvas上的各种事件分派给RootFigure，这些事件最终会被分派给适当的图形，请注意这个RootFigure和你应用程序中最顶层的IFigure不是同一个对象，前者是看不见的被LightweightSystem内部使用的，而后者通常会是一个可见的画布，它是直接放在前者中的；UpdateManager用来重绘图形，当Canvas被要求重绘时，LWS会调用它的performUpdate()方法。 
  接下来我们看一个简单的HelloWorld例子，初步接触Draw2D。 
 

Java代码  

1. import org.eclipse.draw2d.IFigure;  
2. import org.eclipse.draw2d.Label;  
3. import org.eclipse.draw2d.LightweightSystem;  
4. import org.eclipse.swt.widgets.Display;  
5. import org.eclipse.swt.widgets.Shell;  
6.   
7. /** 
8.  * 一个简单的Draw2d实例，由Canvas、LightweightSystem和IFigure组成 
9.  */  
10. public class HelloWorld {  
11.     public static void main(String[] args) {  
12.           
13.         //新建Shell,Shell是Canvas的子类  
14.         Shell shell = new Shell();  
15.                   
16.         shell.setText("Hello World");  
17.           
18.         //添加LightweihtSystem实例  
19.         LightweightSystem lws = new LightweightSystem(shell);  
20.           
21.         //添加IFigure实例  
22.         IFigure label = new Label("Hello World");  
23.           
24.         //把IFigure添加到LightweightSystem中  
25.         lws.setContents(label);  
26.           
27.                   shell.open();     
28.                     
29.         Display display = Display.getDefault();  
30.           
31.         while(!shell.isDisposed()){  
32.               
33.             if(!display.readAndDispatch()){  
34.                   
35.                 display.sleep();  
36.                   
37.             }  
38.               
39.         }  
40.   
41.     }  
42.   
43. }  
44.     

  效果很简单，一个窗体中包含了一个“Hello World”字符串。 

  由上面的简单例子我们可以知道，一个典型的Draw2d程序，有明显的流程： 
   1、创建一个画布，用于作为所有figure的顶头容器 
   2、创建LightweightSystem的实例 
   3、将画布setContents到LightweightSystem 
    4、创建自己需要的IFigure组件，并将其组合成为自己想实现的图形。  
   5、将创建好的图形添加到画布之上。 

其中红色部分就是我们重点要实现的部分。 

接下来我们来实现一个复杂一点的，其重点是了解Draw2d的一些Figure 
实现的是一个温度计，实现了温度上下限的控制，实现了温度水银柱的高度可调节，实现了精度的调节。 
包括三个类，背景类，组件类，测试类，分别如下： 

Java代码  

1. package cn.zoomtech.irving.swt.temprature;  
2.   
3. import org.eclipse.draw2d.*;  
4.   
5. /** 
6.  * Background 
7.  * @author Irving.Sun 
8.  * 
9.  */  
10. public class BackgroundFigure extends FreeformLayeredPane  
11.   
12. {  
13.   
14.     public BackgroundFigure()  
15.   
16.     {  
17.         setLayoutManager(new FreeformLayout());  
18.         // setBackgroundColor(ColorConstants.white);  
19.         setBorder(new LineBorder(ColorConstants.cyan));  
20.         setOpaque(true);  
21.     }  
22.   
23. }  

Java代码  

1. package cn.zoomtech.irving.swt.mytemprature;  
2.   
3. import java.util.Arrays;  
4. import java.util.List;  
5.   
6. import org.eclipse.draw2d.ColorConstants;  
7. import org.eclipse.draw2d.Ellipse;  
8. import org.eclipse.draw2d.Figure;  
9. import org.eclipse.draw2d.Label;  
10. import org.eclipse.draw2d.LineBorder;  
11. import org.eclipse.draw2d.PositionConstants;  
12. import org.eclipse.draw2d.RectangleFigure;  
13. import org.eclipse.draw2d.geometry.Rectangle;  
14. import org.eclipse.swt.graphics.Color;  
15.   
16. /** 
17.  * create the figures 
18.  * @author Irving.Sun 
19.  * 
20.  */  
21. public class MyTempratureFigure extends Figure {  
22.   
23.     // 温度颜色  
24.     private Color tempratrueColor = ColorConstants.red;  
25.     // 温度计边框颜色  
26.     private Color recOuterColor = ColorConstants.darkGreen;  
27.     // 立体效果颜色  
28.     private Color solidColor = ColorConstants.white;  
29.     // 温度计内部颜色  
30.     private Color recInnerColor = ColorConstants.gray;  
31.   
32.     // 水银柱区域  
33.     private RectangleFigure tempratureArea;  
34.     // 水银柱底端部分  
35.     private RectangleFigure bottomTempratureArea;  
36.     // 水银柱显示温度部分  
37.     private RectangleFigure showTempratureArea;  
38.     // 温度计底部  
39.     private Ellipse bottomArea;  
40.     // 显示温度信息的区域  
41.     private Label infoLabel;  
42.     // 当前温度值  
43.     private int currentTemprature;  
44.     // 显示刻度的区域  
45.     private Label mark;  
46.     // 用于显示温度的水银高度  
47.     private int showHeight;  
48.   
49.     // 温度计宽度  
50.     private int width = 12;  
51.     // 温度计高度  
52.     private int height = 200;  
53.     // 最低温度  
54.     private int min = 0;  
55.     // 最高温度  
56.     private int max = 100;  
57.   
58.     private List<Integer> standardPrecision = Arrays.asList(0, 1, 2, 5, 10);  
59.   
60.     // 精确度  
61.     // 提供0.5 ，1.0 ，5.0 ，10.0 五种精度选择  
62.     private double precision = 1.0;  
63.   
64.     // 水银部分与顶端的间距  
65.     private int marginTop = 15;  
66.     // 水银部分内顶间距  
67.     private int paddingTop = 5;  
68.   
69.     private String warningInfo = "";  
70.   
71.     private Label warningLabel;  
72.   
73.     /** 
74.      * 构造函数 
75.      *  
76.      * @param width 
77.      * @param min 
78.      * @param max 
79.      * @param precision 
80.      */  
81.     public MyTempratureFigure(int width, int min, int max, double precision) {  
82.   
83.         if (width > 0) {  
84.             this.width = width;  
85.         }  
86.         if (min > 0) {  
87.             this.min = min;  
88.         }  
89.         if (max > 0 && min < max) {  
90.             this.max = max;  
91.         }  
92.         if (precision > 0) {  
93.             this.precision = precision;  
94.         }  
95.     }  
96.   
97.     public MyTempratureFigure() {  
98.   
99.     }  
100.   
101.     /** 
102.      * 创建图像 
103.      */  
104.     public void createFigure() {  
105.         // 获取图像位置  
106.         Rectangle location = bounds;  
107.         int realPercision = parsePrecision();  
108.   
109.         // 底端半径默认和水银柱的宽度相等  
110.         int bottomRadius = width;  
111.         int tempratureHeight = paddingTop + height + bottomRadius;  
112.   
113.         // 温度跨度  
114.         int totalTemrature = max - min;  
115.         // 总的标度数  
116.         int totalScale = (realPercision == 0.5) ? totalTemrature * 2  
117.                 : (totalTemrature % realPercision == 0 ? totalTemrature  
118.                         / realPercision : totalTemrature / realPercision + 1);  
119.         // 每个标度占的像素值  
120.         int eachScale = height / totalScale;  
121.   
122.         // 画温度计水银部分  
123.         tempratureArea = new RectangleFigure();  
124.         int x = (location.x + location.width / 2) - width / 2;  
125.         int y = (location.y + marginTop);  
126.         tempratureArea.setBounds(new Rectangle(x, y, width, tempratureHeight));  
127.         // 填充灰色  
128.         tempratureArea.setBackgroundColor(recInnerColor);  
129.         tempratureArea.setBorder(new LineBorder(recOuterColor));  
130.         tempratureArea.setOpaque(true);  
131.         add(tempratureArea);  
132.   
133.         // 显示温度的部分  
134.         if (currentTemprature < max && currentTemprature > min) {  
135.             int tempCurrentTemprature = currentTemprature - min;  
136.             if (tempCurrentTemprature > 0) {  
137.                 showHeight = (tempCurrentTemprature / realPercision)  
138.                         * eachScale + (tempCurrentTemprature % realPercision)  
139.                         * (eachScale / realPercision);  
140.             }  
141.             showTempratureArea = new RectangleFigure();  
142.             int showTempratureAreaX = x;  
143.             int showTempratureAreaY = height + y - showHeight + paddingTop;  
144.             showTempratureArea.setBounds(new Rectangle(showTempratureAreaX,  
145.                     showTempratureAreaY, width, showHeight));  
146.             // 填充红色  
147.             showTempratureArea.setBackgroundColor(tempratrueColor);  
148.             showTempratureArea.setBorder(new LineBorder(tempratrueColor));  
149.             add(showTempratureArea);  
150.             warningInfo = "";  
151.         } else {  
152.             warningInfo = "温度值不在显示范围之内！";  
153.         }  
154.   
155.         // 画温度计下半部分球  
156.         bottomArea = new Ellipse();  
157.         int bottomX = x - width / 2;  
158.         int bottomY = y + tempratureHeight - bottomRadius;  
159.         bottomArea.setBounds(new Rectangle(bottomX, bottomY, 2 * bottomRadius,  
160.                 2 * bottomRadius));  
161.         bottomArea.setBackgroundColor(tempratrueColor);  
162.   
163.         // bottomArea.setBorder(new);  
164.         add(bottomArea);  
165.   
166.         // 温度计底端部分  
167.         bottomTempratureArea = new RectangleFigure();  
168.         int bottomTempratureAreaX = x;  
169.         int bottomTempratureAreaY = y + tempratureHeight - bottomRadius - 1  
170.                 + paddingTop - paddingTop;  
171.         bottomTempratureArea.setBounds(new Rectangle(bottomTempratureAreaX,  
172.                 bottomTempratureAreaY, width, bottomRadius + 1 + paddingTop));  
173.         // 填充红色  
174.         bottomTempratureArea.setBackgroundColor(tempratrueColor);  
175.         bottomTempratureArea.setBorder(new LineBorder(tempratrueColor));  
176.         add(bottomTempratureArea);  
177.   
178.         // 添加刻度显示的label  
179.         mark = new Label();  
180.         int markX = x + width;  
181.         int markY = y + this.paddingTop;  
182.         int markWidth = 30;  
183.         int markHeight = height;  
184.   
185.         mark.setBounds(new Rectangle(markX, markY, markWidth, markHeight));  
186.         add(mark);  
187.   
188.         // 画刻度的位置  
189.         int cursor = markY + markHeight;  
190.         int tempTemprature = 0;  
191.         for (int i = 0; i < totalScale + 1; i++) {  
192.             tempTemprature = min + i * realPercision;  
193.             RectangleFigure tempRec = new RectangleFigure();  
194.             tempRec.setBounds(new Rectangle(markX, cursor, i % 10 == 0 ? 8 : 5,  
195.                     1));  
196.             if (i % 10 == 0) {  
197.                 Label tag = new Label(tempTemprature + "°");  
198.                 tag.setLabelAlignment(PositionConstants.LEFT);  
199.                 tag.setBounds(new Rectangle(markX + 8, cursor - 8, 50, 15));  
200.                 add(tag);  
201.             }  
202.             add(tempRec);  
203.             cursor -= eachScale;  
204.         }  
205.   
206.         // 设置立体效果  
207.         RectangleFigure solidFigure = new RectangleFigure();  
208.         solidFigure.setBounds(new Rectangle(x + (2 * width / 3), y, 1,  
209.                 tempratureHeight - bottomRadius - 1));  
210.         solidFigure.setBorder(new LineBorder(solidColor));  
211.         solidFigure.setBackgroundColor(solidColor);  
212.         add(solidFigure);  
213.   
214.         // 显示温度和信息的Label  
215.         int infoLabelX = location.x;  
216.         int infoLabelY = bottomY + 2 * bottomRadius + 2;  
217.         infoLabel = new Label();  
218.         infoLabel.setBounds(new Rectangle(infoLabelX, infoLabelY,  
219.                 location.width, 25));  
220.         add(infoLabel);  
221.         infoLabel.setLabelAlignment(PositionConstants.CENTER);  
222.         String info = "当前温度为: " + currentTemprature + "°\n精确到: "  
223.                 + realPercision + "°";  
224.         infoLabel.setText(info);  
225.         // 显示警告信息的label  
226.         warningLabel = new Label(warningInfo);  
227.         warningLabel.setForegroundColor(tempratrueColor);  
228.         warningLabel.setBounds(new Rectangle(infoLabel.getBounds().x, infoLabel  
229.                 .getBounds().y + 27, location.width, 25));  
230.         warningLabel.setLabelAlignment(PositionConstants.CENTER);  
231.         add(warningLabel);  
232.     }  
233.   
234.     /** 
235.      * 获取精度 ,如果四舍五入的值在内置精度范围之内，则返回内置精度范围 如果不在，则返回1 
236.      *  
237.      * @return 
238.      */  
239.     private int parsePrecision() {  
240.         int realPrecision = new Long(Math.round(precision)).intValue();  
241.         if (standardPrecision.contains(realPrecision)) {  
242.             return realPrecision;  
243.         }  
244.         return 1;  
245.     }  
246.   
247.     public int getWidth() {  
248.         return width;  
249.     }  
250.   
251.     public void setWidth(int width) {  
252.         this.width = width;  
253.         repaint();  
254.     }  
255.   
256.     public int getMin() {  
257.         return min;  
258.     }  
259.   
260.     public void setMin(int min) {  
261.         this.min = min;  
262.         repaint();  
263.     }  
264.   
265.     public int getMax() {  
266.         return max;  
267.     }  
268.   
269.     public void setMax(int max) {  
270.         this.max = max;  
271.         repaint();  
272.     }  
273.   
274.     public double getPrecision() {  
275.         return precision;  
276.     }  
277.   
278.     public void setPrecision(double precision) {  
279.         this.precision = precision;  
280.         repaint();  
281.     }  
282.   
283.     public int getCurrentTemprature() {  
284.         return currentTemprature;  
285.     }  
286.   
287.     public void setCurrentTemprature(int currentTemprature) {  
288.         this.currentTemprature = currentTemprature;  
289.         repaint();  
290.     }  
291.   
292.     /** 
293.      * 刷新界面 
294.      */  
295.     public void repaint() {  
296.         removeAll();  
297.         createFigure();  
298.         super.repaint();  
299.     }  
300.   
301. }  

  在测试类里面，我们给温度计加上了一个线程，每次将温度升高一点。这样温度计就可以“动”起来了。 
 

Java代码  

1. package cn.zoomtech.irving.swt.temprature;  
2.   
3. import org.eclipse.draw2d.LightweightSystem;  
4. import org.eclipse.draw2d.geometry.Rectangle;  
5. import org.eclipse.swt.widgets.Display;  
6. import org.eclipse.swt.widgets.Shell;  
7.   
8. import cn.zoomtech.irving.swt.mytemprature.MyTempratureFigure;  
9.   
10. public class TestTemprature {  
11.   
12.     public static void main(String args[]) {  
13.         Shell shell = new Shell();  
14.         shell.setSize(200, 400);  
15.         shell.open();  
16.         shell.setText("测试图形");  
17.         LightweightSystem lws = new LightweightSystem(shell);  
18.         final BackgroundFigure backgroundChart = new BackgroundFigure();  
19.         backgroundChart.setBounds(new Rectangle(20, 20,  
20.                 shell.getSize().x - 20 * 2, shell.getSize().y - 20 * 2));  
21.         lws.setContents(backgroundChart);  
22.   
23.         final MyTempratureFigure temp = new MyTempratureFigure();  
24.         temp.setBounds(backgroundChart.getBounds());  
25.         temp.setMin(10);  
26.         // temp.setMax(1000);  
27.         temp.setCurrentTemprature(40);  
28.         temp.setPrecision(2);  
29.         temp.createFigure();  
30.         backgroundChart.add(temp);  
31.         temp.setCurrentTemprature(20);  
32.   
33.         Runnable runnable = new Runnable() {  
34.             public void run() {  
35.                 int oldTemprature = temp.getCurrentTemprature();  
36.                 temp  
37.                         .setCurrentTemprature(oldTemprature <= temp.getMax() ? oldTemprature + 1  
38.                                 : 0);  
39.                 Display.getDefault().timerExec(100, this);  
40.             }  
41.         };  
42.   
43.         Display.getDefault().timerExec(1000, runnable);  
44.   
45.         Display display = Display.getDefault();  
46.         while (!shell.isDisposed()) {  
47.             if (!display.readAndDispatch())  
48.                 display.sleep();  
49.         }  
50.   
51.     }  
52. }  
53.   
54.     

实现效果如下图： 
 
  其实Draw2d还远不止这些知识，在接下来的几篇文章中，将会更深入Draw2d的Figure中，看看Draw2d的内置形状，连线，实现几个更精细的图形。 
  希望对刚接触Draw2d的同行们会有点帮助。