使用NetBeans进行J2ME开发三低级图形用户界面Canvas.docx
《使用NetBeans进行J2ME开发三低级图形用户界面Canvas.docx》由会员分享,可在线阅读,更多相关《使用NetBeans进行J2ME开发三低级图形用户界面Canvas.docx(15页珍藏版)》请在冰点文库上搜索。
使用NetBeans进行J2ME开发三低级图形用户界面Canvas
在这一篇中,我将向大家介绍图形用户界面中的低级图形用户界面。
所谓低级图形用户界面,指的是那种我们可以自己在上面画图的控件,它是和TextBox,List等等这些用户控件刚好相对的概念,因为这些用户控件的形状是事先画好的,无需我们程序员操心,所以称为高级图形界面。
低级图形用户界面什么东西都需要我们自己画,所以比较复杂,当然也更加灵活,只有想不到,没有画不出,所以我们先介绍它。
在J2ME开发中,低级图形用户界面是由javax.microedition.lcdui.Canvas类实现的,我们只要继承这个类,并实现这个类的paint方法,就可以随心所欲的进行绘画了。
当然,绘画之前,我们少不了要了解我们的手机屏幕究竟有多大的画图空间,这可以通过调用Canvas类的getWidth和getHeight方法实现。
下面是一个简短的程序,向大家演示了怎么获画布的大小,同时,也算是一个小小的框架。
首先,当然是创建我们自己的画布,代码如下:
1.packagecom.xkland.j2me;
2.
3.importjavax.microedition.lcdui.Canvas;
4.importjavax.microedition.lcdui.Graphics;
5.
6.publicclassMyCanvasextendsCanvas{
7.
8. /***//**CreatesanewinstanceofMyCanvas*/
9. publicMyCanvas(){
10. }
11.
12. publicvoidclearBackground(Graphicsg){
13. intcolor=g.getColor();
14. g.setColor(0xffffff);
15. g.fillRect(0,0,getWidth(),getHeight());
16. g.setColor(color);
17. }
18.
19. publicvoidpaint(Graphicsg){
20. //清除背景
21. clearBackground(g);
22.
23. //显示可供绘图的区域的大小
24. g.drawString("宽度:
",10,10,Graphics.LEFT|Graphics.TOP);
25. g.drawString(String.valueOf(getWidth()),50,10,Graphics.LEFT|Graphics.TOP);
26. g.drawString("高度:
",10,25,Graphics.LEFT|Graphics.TOP);
27. g.drawString(String.valueOf(getHeight()),50,25,Graphics.LEFT|Graphics.TOP);
28. }
29.
30.}
复制代码
第二个类当然就是我们的Midlet了,因为它是主程序嘛。
在程序启动的时候调用display.setCurrent将画布设置为主界面,同时设置事件监听器。
代码比较简单,如下:
1.packagecom.xkland.j2me;
2.
3.importjavax.microedition.midlet.*;
4.importjavax.microedition.lcdui.*;
5.
6.publicclassCanvasTestextendsMIDlet{
7. privateCanvascanvas=newMyCanvas();
8. privateDisplaydisplay=null;
9. privateCommandexitCommand=newCommand("退出",Command.EXIT,1);
10.
11. publicvoidstartApp(){
12. if(display==null){
13. display=Display.getDisplay(this);
14. canvas.addCommand(exitCommand);
15. canvas.setCommandListener(newMyCommandListener(this,canvas));
16. display.setCurrent(canvas);
17. }
18. }
19.
20. publicvoidpauseApp(){
21. }
22.
23. publicvoiddestroyApp(booleanunconditional){
24. }
25.}
复制代码
第三个类当然是我们的事件监听器类了,等一下我们会讲到,Canvas支持许多低级事件,比如键盘的按键事件,所以我们这里把事件监听器单独抽取出来,代码如下:
1.packagecom.xkland.j2me;
2.
3.importjavax.microedition.lcdui.CommandListener;
4.importjavax.microedition.lcdui.Command;
5.importjavax.microedition.lcdui.Displayable;
6.importjavax.microedition.lcdui.Canvas;
7.
8.publicclassMyCommandListenerimplementsCommandListener{
9.
10. privateCanvasTestapp;
11. privateCanvascanvas;
12.
13. /***//**CreatesanewinstanceofMyCommandListener*/
14. publicMyCommandListener(CanvasTestapp,Canvascanvas){
15. this.app=app;
16. this.canvas=canvas;
17. }
18.
19. publicvoidcommandAction(Commandcmd,Displayabledisplayable){
20. if(cmd.getLabel().equalsIgnoreCase("退出")){
21. app.destroyApp(false);
22. app.notifyDestroyed();
23. }
24. }
25.
26.}
复制代码
下面是运行效果:
知道了画图区域的大小,同时又知道Canvas可以支持许多低级事件,我们就可以发挥我们自己的想象力创建一个小游戏了。
下面,我将写一个简单的拼图游戏,只需要使用上下左右四个方向键操作即可,在事件监听器中,我们只需响应Canvas的keyPressed()事件即可。
代码也不复杂,只需把上面的程序稍加扩展即可。
当然,我们还需要准备一些图片当素材。
首先,在网上随便找一张图片,使用图形编辑软件调整图片的大小,然后再裁成3*4共12幅图象。
把这12幅图象分别命名为1.png到12.png,同时还要准备一张全白的图片,命名为0.png,这张图片和前面的12张图片一样大小。
在项目所在的文件夹下建立一个文件夹,取名为pictures,把这些图片都拷贝进去。
在NetBeansIDE左边的文件选项卡中可以看到这些文件,如图:
但是,在生成项目的时候,这些文件并不会自动打包到项目中,我们必须将这个文件夹捆绑为该项目的资源。
在项目上点右键,在弹出的菜单中选择属性,弹出如下对话框,选中左边的“库和资源”,在右边点击“添加文件夹”按钮即可:
下面是我的MyCanvas类的全部代码,其它两个类的代码没有改变。
在这里,我使用的图片是174*280的大小,切割后的小图片每一个都是58*70的大小,空白的图片也是58*70的大小。
请看代码:
1.packagecom.xkland.j2me;
2.
3.importjavax.microedition.lcdui.Canvas;
4.importjavax.microedition.lcdui.Graphics;
5.importjavax.microedition.lcdui.Image;
6.importjava.util.Random;
7.
8.publicclassMyCanvasextendsCanvas{
9. publicint[][]pics=newint[4][4];
10. publicImage[]images=newImage[13];
11. publicintstep=0;
12. publicintspaceX=3;
13. publicintspaceY=0;
14. publicintspaceValue=0;
15.
16. /***//**CreatesanewinstanceofMyCanvas*/
17. publicMyCanvas(){
18. //随机填充数组
19. for(inti=0;i<4;i++){
20. for(intj=0;j<3;j++){
21. pics[i][j]=i*3+j+1;
22. }
23. }
24. pics[0][3]=0;
25.
26. Randomrand=newRandom();
27. for(inti=0;i<4;i++){
28. intx1=rand.nextInt(3);
29. inty1=rand.nextInt(4);
30. intx2=rand.nextInt(3);
31. inty2=rand.nextInt(4);
32. intn=pics[y1][x1];
33. pics[y1][x1]=pics[y2][x2];
34. pics[y2][x2]=n;
35. }
36.
37. //载入图片
38. for(inti=0;i<13;i++){
39. try{
40. images[i]=Image.createImage("/"+String.valueOf(i)+".png");
41. }catch(Exceptione){
42. //不做处理
43. }
44. }
45. }
46.
47. publicvoidclearBackground(Graphicsg){
48. intcolor=g.getColor();
49. g.setColor(0xcccccc);
50. g.fillRect(0,0,getWidth(),getHeight());
51. g.setColor(color);
52. }
53.
54. publicvoidpaint(Graphicsg){
55. //清除背景
56. clearBackground(g);
57.
58. //绘制网格
59. g.setColor(0x000000);
60. g.drawRect(1,3,236,284);
61. g.drawLine(1,74,237,74);
62. g.drawLine(1,145,178,145);
63. g.drawLine(1,216,178,216);
64. g.drawLine(60,3,60,287);
65. g.drawLine(119,3,119,287);
66. g.drawLine(178,3,178,287);
67.
68. //根据pics数组和images数组的内容绘图到网格中
69. for(inti=0;i<4;i++){
70. for(intj=0;j<3;j++){
71. g.drawImage(images[pics[i][j]],j*59+2,i*71+4,Graphics.TOP|Graphics.LEFT);
72. }
73. }
74. g.drawImage(images[pics[0][3]],179,4,Graphics.TOP|Graphics.LEFT);
75.
76. //绘制所用的步骤
77. g.drawString("步数:
",182,140,Graphics.TOP|Graphics.LEFT);
78. g.setColor(0xffffff);
79. g.fillRect(182,158,50,18);
80. g.setColor(0xff0000);
81. g.drawString(String.valueOf(step),187,160,Graphics.TOP|Graphics.LEFT);
82.
83. }
84.
85. publicvoidkeyPressed(intkeyCode){
86. switch(getGameAction(keyCode)){
87. caseRIGHT:
88. right();
89. break;
90. caseLEFT:
91. left();
92. break;
93. caseUP:
94. up();
95. break;
96. caseDOWN:
97. down();
98. break;
99. }
100. repaint();
101. }
102.
103. publicvoidup(){
104. if(spaceY<3){
105. pics[spaceY][spaceX]=pics[spaceY+1][spaceX];
106. pics[spaceY+1][spaceX]=0;
107. spaceY++;
108. step++;
109. }
110. }
111.
112. publicvoiddown(){
113. if(spaceY>0){
114. pics[spaceY][spaceX]=pics[spaceY-1][spaceX];
115. pics[spaceY-1][spaceX]=0;
116. spaceY--;
117. step++;
118. }
119.
120. }
121.
122. publicvoidleft(){
123. intrightLimit=2;
124. if(spaceY==0){
125. rightLimit=3;
126. }
127. if(spaceX128. pics[spaceY][spaceX]=pics[spaceY][spaceX+1];
129. pics[spaceY][spaceX+1]=0;
130. spaceX++;
131. step++;
132. }
133.
134. }
135.
136. publicvoidright(){
137. if(spaceX>0){
138. pics[spaceY][spaceX]=pics[spaceY][spaceX-1];
139. pics[spaceY][spaceX-1]=0;
140. spaceX--;
141. step++;
142. }
143.
144. }
145.}
复制代码
运行项目,得到如下的效果,使用上下左右四个键可以移动图片:
游戏过程中的截图:
游戏完成后的截图:
当然,大家也可以自己添加拼图完成后的判断代码,在拼图成功后自动弹出提示信息。