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

使用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（spaceX

128.        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.}

复制代码

运行项目，得到如下的效果，使用上下左右四个键可以移动图片：

　　游戏过程中的截图：

　　游戏完成后的截图：

　　当然，大家也可以自己添加拼图完成后的判断代码，在拼图成功后自动弹出提示信息。