使用NetBeans进行J2ME开发三低级图形用户界面Canvas.docx

1、使用NetBeans进行J2ME开发三低级图形用户界面Canvas在这一篇中，我将向大家介绍图形用户界面中的低级图形用户界面。所谓低级图形用户界面，指的是那种我们可以自己在上面画图的控件，它是和TextBox， List等等这些用户控件刚好相对的概念，因为这些用户控件的形状是事先画好的，无需我们程序员操心，所以称为高级图形界面。低级图形用户界面什么东西都需要我们自己画，所以比较复杂，当然也更加灵活，只有想不到，没有画不出，所以我们先介绍它。在J2ME开发中，低级图形用户界面是由javax.microedition.lcdui.Canvas类实现的，我们只要继承这个类，并实现这个类的paint方

2、法，就可以随心所欲的进行绘画了。当然，绘画之前，我们少不了要了解我们的手机屏幕究竟有多大的画图空间，这可以通过调用Canvas类的getWidth和getHeight方法实现。下面是一个简短的程序，向大家演示了怎么获画布的大小，同时，也算是一个小小的框架。首先，当然是创建我们自己的画布，代码如下：1. package com.xkland.j2me;2. 3. import javax.microedition.lcdui.Canvas;4. import javax.microedition.lcdui.Graphics;5. 6. public class MyCanvas extends

3、 Canvas 7. 8. /* */* Creates a new instance of MyCanvas */9. public MyCanvas() 10. 11. 12. public void clearBackground(Graphics g)13. int color = g.getColor();14. g.setColor(0xffffff);15. g.fillRect(0,0,getWidth(),getHeight();16. g.setColor(color);17. 18. 19. public void paint(Graphics g)20. /清除背景21

4、. 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|Graphic

5、s.TOP);28. 29. 30. 复制代码第二个类当然就是我们的Midlet了，因为它是主程序嘛。在程序启动的时候调用display.setCurrent将画布设置为主界面，同时设置事件监听器。代码比较简单，如下：1. package com.xkland.j2me;2. 3. import javax.microedition.midlet.*;4. import javax.microedition.lcdui.*;5. 6. public class CanvasTest extends MIDlet7. private Canvas canvas = new MyCanvas();

6、8. private Display display = null;9. private Command exitCommand = new Command(退出,Command.EXIT,1);10. 11. public void startApp() 12. if(display=null)13. display = Display.getDisplay(this);14. canvas.addCommand(exitCommand);15. canvas.setCommandListener(new MyCommandListener(this,canvas);16. display.

7、setCurrent(canvas);17. 18. 19. 20. public void pauseApp() 21. 22. 23. public void destroyApp(boolean unconditional) 24. 25. 复制代码第三个类当然是我们的事件监听器类了，等一下我们会讲到，Canvas支持许多低级事件，比如键盘的按键事件，所以我们这里把事件监听器单独抽取出来，代码如下：1. package com.xkland.j2me;2. 3. import javax.microedition.lcdui.CommandListener;4. import javax

8、.microedition.lcdui.Command;5. import javax.microedition.lcdui.Displayable;6. import javax.microedition.lcdui.Canvas;7. 8. public class MyCommandListener implements CommandListener9. 10. private CanvasTest app;11. private Canvas canvas;12. 13. /* */* Creates a new instance of MyCommandListener */14.

9、 public MyCommandListener(CanvasTest app,Canvas canvas) 15. this.app = app;16. this.canvas = canvas;17. 18. 19. public void commandAction(Command cmd, Displayable displayable)20. if(cmd.getLabel().equalsIgnoreCase(退出)21. app.destroyApp(false);22. app.notifyDestroyed();23. 24. 25. 26. 复制代码下面是运行效果：知道了

10、画图区域的大小，同时又知道Canvas可以支持许多低级事件，我们就可以发挥我们自己的想象力创建一个小游戏了。下面，我将写一个简单的拼图游戏，只需要使用上下左右四个方向键操作即可，在事件监听器中，我们只需响应Canvas的keyPressed()事件即可。代码也不复杂，只需把上面的程序稍加扩展即可。当然，我们还需要准备一些图片当素材。首先，在网上随便找一张图片，使用图形编辑软件调整图片的大小，然后再裁成 3*4共12幅图象。把这12幅图象分别命名为1.png到12.png，同时还要准备一张全白的图片，命名为0.png，这张图片和前面的12张图片一样大小。在项目所在的文件夹下建立一个文件夹，取名为

11、pictures，把这些图片都拷贝进去。在NetBeans IDE左边的文件选项卡中可以看到这些文件，如图：但是，在生成项目的时候，这些文件并不会自动打包到项目中，我们必须将这个文件夹捆绑为该项目的资源。在项目上点右键，在弹出的菜单中选择属性，弹出如下对话框，选中左边的“库和资源”，在右边点击“添加文件夹”按钮即可：下面是我的MyCanvas类的全部代码，其它两个类的代码没有改变。在这里，我使用的图片是174*280的大小，切割后的小图片每一个都是58*70的大小，空白的图片也是58*70的大小。请看代码：1. package com.xkland.j2me;2. 3. import java

12、x.microedition.lcdui.Canvas;4. import javax.microedition.lcdui.Graphics;5. import javax.microedition.lcdui.Image;6. import java.util.Random;7. 8. public class MyCanvas extends Canvas 9. public int pics = new int44;10. public Image images = new Image13;11. public int step = 0;12. public int spaceX =

13、3;13. public int spaceY = 0;14. public int spaceValue = 0;15. 16. /* */* Creates a new instance of MyCanvas */17. public MyCanvas() 18. /随机填充数组19. for(int i=0;i4;i+)20. for(int j=0;j3;j+)21. picsij = i*3 + j + 1;22. 23. 24. pics03 = 0;25. 26. Random rand = new Random();27. for(int i=0; i4; i+)28. in

14、t x1 = rand.nextInt(3);29. int y1 = rand.nextInt(4);30. int x2 = rand.nextInt(3);31. int y2 = rand.nextInt(4);32. int n = picsy1x1;33. picsy1x1 = picsy2x2;34. picsy2x2 = n;35. 36. 37. /载入图片38. for(int i=0; i13; i+)39. try40. imagesi = Image.createImage(/ + String.valueOf(i) + .png);41. catch(Excepti

15、on e)42. /不做处理43. 44. 45. 46. 47. public void clearBackground(Graphics g)48. int color = g.getColor();49. g.setColor(0xcccccc);50. g.fillRect(0,0,getWidth(),getHeight();51. g.setColor(color);52. 53. 54. public void paint(Graphics g)55. /清除背景56. clearBackground(g);57. 58. /绘制网格59. g.setColor(0x000000

16、);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(int i=0; i4; i+)70. for(int j=0; j3; j+)71. g.drawI

17、mage(imagespicsij,j*59+2,i*71+4,Graphics.TOP|Graphics.LEFT);72. 73. 74. g.drawImage(imagespics03,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

18、(String.valueOf(step),187,160,Graphics.TOP|Graphics.LEFT);82. 83. 84. 85. public void keyPressed(int keyCode)86. switch(getGameAction(keyCode)87. case RIGHT:88. right();89. break;90. case LEFT:91. left();92. break;93. case UP:94. up();95. break;96. case DOWN:97. down();98. break;99. 100. repaint();1

19、01. 102. 103. public void up()104. if(spaceY 0)114. picsspaceYspaceX = picsspaceY-1spaceX;115. picsspaceY-1spaceX = 0;116. spaceY -;117. step +;118. 119. 120. 121. 122. public void left()123. int rightLimit = 2;124. if(spaceY = 0)125. rightLimit = 3;126. 127. if(spaceX 0 )138. picsspaceYspaceX = picsspaceYspaceX -1;139. picsspaceYspaceX-1 = 0;140. spaceX -;141. step +;142. 143. 144. 145. 复制代码运行项目，得到如下的效果，使用上下左右四个键可以移动图片：游戏过程中的截图：游戏完成后的截图：当然，大家也可以自己添加拼图完成后的判断代码，在拼图成功后自动弹出提示信息。