第5章低级用户界面.ppt

《第5章低级用户界面.ppt》由会员分享，可在线阅读，更多相关《第5章低级用户界面.ppt（88页珍藏版）》请在三一办公上搜索。

1、Displayable的子类可以充满整个界面，其直接子类有两个：Screen:提供高级界面开发，界面效果都是由控件组成的；Canvas:提供低级界面开发，界面效果都是通过编程，在画布上画出来的。,低级用户界面,本章授课内容,低级用户界面简介Canvas类Graphics类,低级用户界面,低级API包括两个部分：Canvas类：画布类，在其上可以进行图形操作，同时它也是低级事件的接收者；Graphics类：绘图类，可以用来提供文本和图像，并且能够实现绘制和填充图形。,低级用户界面,Canvas和Graphics关系图,Canvas类,Canvas 组件表示屏幕上一个空白矩形区域，应用程序可以在该

2、区域内绘图，或者可以从该区域捕获用户的输入事件。,Canvas类,public abstract class Canvas extends Displayable应用程序必须为 Canvas 类创建子类，以获得有用的功能（如创建自定义组件）。Canvas类中定义了一个抽象方法paint(),它是Canvas最核心的方法，Canvas所有的子类都必须实现它。,在Canvas类中，有如下重要成员方法：1：protected abstract void paint(Graphics g)该方法是抽象方法，如果扩展了Canvas类，就必须对paint方法进行重写。该方法指定了如何在屏幕上绘制自定义图形

3、，该函数里面可以包含画图的代码。注意，该方法是在界面出现时自动调用的！,Canvas类,Canvas类,综上所述，画布开发的基本结构如下：,public class MIDlet1 extends MIDlet/画布类class MyCanvas extends Canvas public void paint(Graphics g)/在画布上画图 private MyCanvas mc=new MyCanvas();private Display dis;protected void startApp()throws MIDletStateChangeException dis=Displa

4、y.getDisplay(this);dis.setCurrent(mc);/其他代码,public final void repaint(int x,int y,int width,int height)：重绘屏幕上指定的区域。其中参数x和y是该矩形左上角的坐标，参数width和height分别指定了该矩形的宽度和高度。public final void repaint()：重绘整个屏幕。相当于：repaint(0,0,getWidth(),getHeight(),Canvas类,Canvas类,注意：这个方法是异步的，即在repaint()方法执行后，paint()方法也可能不会立即被调用

5、。repaint()方法的发出者必须是当前显示的Canvas对象，否则任何重绘命令都是没有意义的。,Canvas类,public final void serviceRepaints()另一个实现重绘的方法，该方法强制要求执行当前所有的重绘请求，并堵塞当前线程，直到重绘请求被执行。如果当前没有任何重绘请求，该方法会被忽略掉，不过，这个方法一定要小心使用，必须保证在当前情况下不会因为paint()方法中的资源被占用而引起死锁。,Canvas类,Display类中有个方法：public void callSerially(Runnable r)：该方法实现paint()和repaint()方法同步

6、。在MIDP中，所有与用户界面有关的调用都是顺序执行的，如果同时发生，就会放到一个队列里，执行完一个再执行另一个，当Display的对象调用callSerially(Runnable r)时，会调用r内部的run()方法，但是该方法会等到队列中的其他调用都返回后才执行。,Canvas类,public void setFullScreenMode(boolean mode)该函数可以设置画布是否以全屏幕显示。如果为true，则全屏幕显示，此时Title,Ticker以及Command都无法在屏幕上显示。,Canvas类,protected void showNotify():这个方法是保护型的，

7、可以被重写。这个方法在画布放在界面最前端显示时自动调用。protected void hideNotify()：这个方法是保护型的，可以被重写。这个方法在画布隐藏时自动调用。,Canvas类,设置画布的标题：public void setTitle(String s)为画布设置滚动条：public void setTicker(Ticker ticker)得到画布的宽度：public int getWidth()得到画布的高度 public int getHeight(),用Canvas开发简单画图系统,paint方法：protected abstract void paint(Graphic

8、s g)paint函数参数是一个Graphics对象Graphics类定义如下：public class Graphics extends Object它直接继承java.lang.Object类。,Graphics类,Graphics类提供简单的绘制功能，主要有以下三类：绘制文本：可以使用设备所支持的字体绘制指定的字符串绘制二维几何图形：可以绘制包括直线，矩形，圆弧等简单的二维几何图形。绘制图像：可以从图像文件中绘制不可变图像，也可以从缓存中绘制可变图像。,不变图像：可被存储于持久存储器，网络或者内存中，一旦生成就不能更改。可变图像：只能存在于内存中，并且可对可变图像进行修改。,Graphi

9、cs类一般不用构造函数来实例化其对象，获得Graphics对象有两个方法：用paint()方法传入参数用Image类中的getGraphics()方法得到Graphics对象。,用Canvas开发简单画图系统,Graphics坐标,一般的数学坐标原点在左下角，x轴数值往右递增，y轴数值往上递增。,Graphics坐标,而手机开发中屏幕坐标原点在右上角，x轴数值往右递增，y轴数值往下递增，正好与传统坐标相反。,画笔对象的重要功能有：用RGB组合的方法设置画笔颜色：public void setColor(int RGB)该函数可以设置画笔的颜色，传入的参数是一个16进制数，用0 xRRGGBB表

10、示，每个分量为00-FF之间。,设置画笔颜色,用RGB分量方法设置画笔颜色：public void setColor(int red,int green,int blue)该函数传入红色、绿色和蓝色分量，值皆为0-255之间。,设置画笔颜色,获取画笔颜色分量,得到红色分量：public int getRedComponent()得到绿色分量：public int getGreenComponent()得到蓝色分量：public int getBlueComponent(),设置画笔线型,public void setStrokeStyle(int style)该函数能够设置画线的线型，其参数可

11、有两种选择：Graphics.SOLID：实线；Graphics.DOTTED：虚线。public int getStrokeStyle()：获取线型,用Canvas开发简单画图系统,Graphics常见的画图函数：1：画线：public void drawLine(int x1,int y1,int x2,int y2)该函数从坐标(x1,y1)到(x2,y2)画一条线。界面上左上角的坐标为(0,0)，越往右X越大，越往下Y越大。,用Canvas开发简单画图系统,2：画矩形：public void drawRect(int x,int y,int width,int height)该函数以(

12、x,y)为左上角坐标，width为宽度，height为高度画一个矩形。,用Canvas开发简单画图系统,3：画圆角矩形：public void drawRoundRect(int x,int y,int width,int height,int arcWidth,int arcHeight)该函数画一个圆角矩形，以(x,y)为左上角坐标，width为宽度，height为高度，arcWidth为圆角水平直径，arcHeight为圆角垂直直径。,用Canvas开发简单画图系统,arcWidth 为圆角水平直径，arcHeight 为圆角垂直直径。,arcHeight,arcWidth,4：画圆弧(

13、椭圆弧)：public void drawArc(int x,int y,int width,int height,int startAngle,int arcAngle)该函数画一段圆弧，在画图系统中，任何的圆或椭圆都可以包含在一个矩形内，因此，确定了矩形，就确定了圆弧。该函数中，圆弧所在的矩形以(x,y)为左上角坐标，width为宽度，height为高度，以startAngle为开始的角度，arcAngle为画出的角度。注意，在圆形画图过程中，从中心水平向右表示0度，逆时针为正方向。,用Canvas开发简单画图系统,5：绘制填充矩形：void fillRect(int x,int y,in

14、t width,int height)该函数从坐标（x,y）开始画一个长width，宽height.的实心矩形。6：填充圆角方框 public void fillRoundRect(intx,inty,intwidth,intheight,intarcWidth,intarcHeight),用Canvas开发简单画图系统,7：填充椭圆 public void fillArc(intx,inty,intwidth,intheight,intstartAngle,intarcAngle)8：填充三角型 public void fillTriangle(intx1,inty1,intx2,inty2

15、,intx3,inty3),用Canvas开发简单画图系统,上节课回顾,低级用户界面简介Canvas类setFullScreenMode(boolean mode)：该函数可以设置画布是否以全屏幕显示。protected void showNotify():在画布放在界面最前端显示时自动调用。protected void hideNotify()：在画布隐藏时自动调用。,上节课回顾,paint()方法：包含画图的代码,界面出现时自动调用。重画的三种方法：repaint():调用paint()方法,异步方法。serviceRepaints()：堵塞当前线程，使repaint和paint同步。ca

16、llSerially(Runnable r)：实现paint()和repaint()方法同步。等到队列中的其他调用都返回后才执行。Display类的方法。,上节课回顾,用Canvas开发简单画图系统：Graphics类设置颜色：setColor()设置线型：setStrokeStyle(int style)二维图形的绘制：画线，画矩形，画圆角矩形，画圆弧，绘制字符串，字体的设置,本节课内容,文字绘制和Font类图形的剪裁图形的卷动设计图像处理,文字绘制,Graphics类中提供了多个方法绘制文本。drawString()drawChar()drawChars()drawSubstring(),

17、文字绘制,绘制指定字符void drawChar(char character,int x,int y,int anchor)绘制指定字符数组void drawChars(char character,int offset,int len,int x,int y,int anchor)绘制字符串子串void drawSubstring(String str,int offset,int len,int x,int y,int anchor)str是制定绘制的字符串文本，offset制定子字符串的起始位置，len指定子字符串的长度。,绘制字符串：void drawString(String st

18、r,int x,int y,int anchor)参数 1 是字符串的内容，如“中国人”；参数 2 和参数3 是参考点在屏幕上的坐标(x,y)，注意，不是左上角在屏幕上的坐标(x,y)！因为参考点不一定是左上角的那个点！参考点到底确定为哪一点呢？由第四个参数决定。第四个参数由两个值合成，这两个值之间用“|”隔开。其中一个值表示水平方向，另一个值表示垂直方向。,文字绘制,画笔之字符串绘制,由于字符串本身显示就占有一定的屏幕控件，占用的空间是个矩形的空间。anchor的作用就是设置字符串占用屏幕的矩形方块哪个部分的坐标。,字符串占用空间,表示水平方向的值通常可以在以下内容中选择：1：Graphic

19、s.LEFT：锚点位于文本或图像的左方2：Graphics.HCENTER：锚点位于文本或图像的水平中央3：Graphics.RIGHT：锚点位于文本或图像的右方表示垂直方向的值，可以选择：1：Graphics.BOTTOM：锚点位于文本或图像的下部2：Graphics.TOP：锚点位于文本或图像的上部3：Graphics.BASELINE：锚点位于文本的基线根据定义，锚点的值必须有水平常量和垂直常量组合表示。,画笔之字符串绘制,画笔之字符串绘制,画笔之字符串绘制,举例：g.drawString(“字符串”,40,40,Graphics.TOP|Graphics.LEFT)Graphics.T

20、OP|Graphics.LEFT的含义是表示“字符串”这3个字符占用的矩形框的左上角位于坐标（40,40）的位置。,画笔之字符串绘制,如果anchor设置为Graphics.BOTTOM|Graphics.LEFT,画笔之字符串绘制,开发手机程序的过程中，经常需要使图片或者字符串在屏幕上居中显示，那么如何处理呢？Canvas类提供了获得屏幕宽度和高度的函数，获得屏幕宽度的函数是getWidth()，获得屏幕高度的函数是getHeight()。,画笔之字符串绘制,使用以下语句可以显示居中的字符串：,g.drawString(“字符串,this.getWidth()/2,this.getHeigh

21、t()/2,Graphics.BOTTOM|Graphics.HCENTER);,画笔之字体设置-Font类,Graphics 中还提供了对字体的控制方法，每个Graphics都有一个Font对象与其关联，来进行文字的渲染操作。设置字体：public void setFont(Font font)可以调用其类方法setFont(null)，即可使字体恢复到默认状态。,画笔之字体设置,得到字体对象：static Font getFont(int face,int Style,int size)：获得一个对象以表示字体所具有指定的外观，样式和大小。其中：face参数，用来定义字体的外观。Style

22、参数，用来定义字体的样式。Font类定义的样式参数。size参数，定义字体大小。Font类定义的字号大小常数。,画笔之字体设置,例：,Font fnt=Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD,Font.SIZE_LARGE);g.setFont(fnt);g.drawString(好好学习,80,80,Graphics.LEFT|Graphics.BOTTOM);,画笔之字体设置,得到字体对象有一个重要作用就是可以得知每个字的宽度和高度，Font有以下方法：得到字符高度：public int getHeight()得到字符宽度：public

23、int charWidth(char ch)public int charsWidth(char ch,int offset,int length),画笔之字体设置,通过如下方法得到字符串所占宽度：public int stringWidth(String str)获取字符子串所占宽度：public int substringWidth(String str,int offset,int len),画笔之字体设置,举例：,图形剪裁,在某些情况下可能需要在Canvas中设置一个工作区域，或者只想把绘制内容放到Canvas的一个小区域中。Graphics类提供了一个这样的区域，称为裁剪区域。绘图操

24、作中涉及的像素落到该区域内都可以进行操作，如果落到该区域之外，即使程序对其进行操作，它也不受影响。当屏幕重画的时候，可以保证屏幕其他部分的内容不必重画，而仅仅重画需要更新的部分内容。,图形剪裁,该区域是个矩形区域，通常使用(x,y,w,h)的形式来表示，其中，x,y表示该区域的左上角坐标，w,h表示这个矩形的宽度和高度。public void setClip(intx,inty,intwidth,intheight)：定义剪裁区域。,图形剪裁,public int getClipX()：获取剪裁区域中相对于绘图环境中坐标原点的X轴坐标。public int getClipY()：获取剪裁区域中

25、相对于绘图环境中坐标原点的Y轴坐标。public int getClipHeight()：获取当前剪裁区域的宽度。public int getClipWidth()：获取当前剪裁区域的高度。,图形剪裁,一般使用了裁减函数以后，应该恢复到原来的裁剪区域。如下代码所示：int oldClipX=g.getClipX();int oldClipY=g.getClipY();int oldClipWidth=g.getClipWidth();int oldClipHeight=g.getClipHeight();/设置新裁减区域的大小g.setClip(0，0，this.getWidth()/2,th

26、is.getHeight()/2);。/执行画图操作/恢复原来的画布裁剪区域的信息g.setClip(oldClipX,oldClipY,oldClipWidth,oldClipHeight);,Graphics类的卷动设计,public void translate(intx,inty)：该函数将原坐标系的(x,y)作为新坐标系的原点。如果想恢复原坐标系，则调用translate(-x,-y);,Graphics类的卷动设计,已经转换的坐标原点可以用如下方法查看：public int getTranslateX()public int getTranslateY()这两个方法返回的坐标值与当

27、前坐标系无关，其返回值是默认坐标系。,图像处理,Graphics对象除了用来绘制简单的二维几何图形和文本之外，还可以绘制图像，这些图像可以来自网络或者本地图像文件。Graphics 只是负责将图像显示在屏幕上，实际的图像处理都是通过Image类实现。Image对象的存在与屏幕设备完全独立，它存在于设备的存储器中，通过Graphics中的方法或者高级屏幕界面组件如ImageItem等显示到屏幕上。,图像处理,Image类是被设计成存储图像数据的类，一旦创建了一个Image对象，它们将把存储图像数据放在内存中，并不会显示在屏幕上，只要当Graphics对象使用绘图函数绘制Image对象的时候，图片

28、才会显示在屏幕上。,Image类的分类,Image类分为可变和不可变两种类型。不可变的Image对象：是从资源文件，二进制数据，网络资源，RGB数值及其他Image直接创建的，一旦读取数据，创建完成，Image对象就无法再变化。可变的Image对象：是一个在内存中存储的对象，可以在内存中修改图像数据以后再显示出来的对象，由于一切操作都在内存中进行，并没有显示在屏幕上，所以称为可变对象。,Image类的创建,Image对象的生成是使用Image类中的系列静态方法createImage()生成对象。不可变图像对象的创建可变图像对象的创建,不可变图像对象的创建,创建不可变图像对象的方法有好几个，如下

29、所示：从一个指定名称的源图象文件中创建一个不可改变的图象。public static Image createImage(Stringname)throws IOException 参数说明：name：源图像文件路径，注意参数中的字符串必须以”/”打头。,不可变图像对象的创建,从一个字节数组存储中创建一个不可变图象public static Image createImage(byteimageData,intimageOffset,intimageLength)参数说明：imageData：图像字节数组imageOffset：起始数据位置imageLength：数据的长度,不可变图像对象的创

30、建,从二进制数据流中创建一个不可变图象。public static Image createImage(java.io.InputStream stream)throws java.io.IOException参数说明：stream：包含图象数据字节流,不可变图像对象的创建,从一个Image对象创建另一个Image对象，并可以旋转。public static Image createImage(Imageimage,intx,inty,intwidth,intheight,inttransform)参数说明：x,y是图像左上角的坐标width和height是图像的宽度和高度transform是

31、图像旋转的角度,不可变图像对象的创建,旋转的角度，有如下可选：1：Sprite.TRANS_NONE：不旋转2：Sprite.TRANS_ROT90：旋转90度3：Sprite.TRANS_ROT180：旋转180度4：Sprite.TRANS_ROT270：旋转270度,5：Sprite.TRANS_MIRROR：镜像6：Sprite.TRANS_MIRROR_ROT90：镜像，然后旋转90度7：Sprite.TRANS_MIRROR_ROT180：镜像，然后旋转180度8：Sprite.TRANS_MIRROR_ROT270：镜像，然后旋转270度,不可变图像对象的创建,可变图像对象的创建

32、,可变的Image对象其实就是一个在内存中存储的对象，可以在内存中修改图像数据以后再显示出来的对象，由于一切操作都在内存中进行，并没有显示在屏幕上，所以称为可变对象。,可变图像对象的创建,创建一个可变的Image对象，使用到的createImage构造函数如下所示：public static Image createImage(int width,int height),其中参数width,height表示所创建的图像的大小，其值必须大于0，否则会抛出异常。,可变图像对象的创建,创建可变图像后经常都需要提取该图像的Graphics对象，以便对可变图像进行修改。,示例：Image img=Ima

33、ge.createImage(100,100);/创建可变图像Graphics graphics=img.getGraphics();/获取可变图像的Graphics对象graphics.fillArc(10,10,60,50,180,180);/绘图,可变图像对象的创建,将一个图像对象转化成不可变图像：public static Image createImage(Image source)参数说明：source 源图像备注：此方法一般用于将可变图像转化为不可变图像，但是不可变图像不能转化成可变图像。,画笔之图形绘制,Graphics中绘制图片：void drawImage(Image im

34、g,int x,int y,int anchor)该函数第一个参数是图片对象，第二个参数和第三个参数是参考点的坐标(x,y)，参考点由第四个参数决定，类似字符串的绘制，注意：没有BASELINE常量，新增了VCENTER常量。,在Graphics类中，还有一个函数也可以画图片：,在画图系统中画图片,在画图系统中画图片,参数1表示图片对象；参数2到5表示在图片上取一个矩形块，左上角坐标为(x_src,y_src)，宽度为width，高度为height；参数6表示将这个矩形块画到画布上的时候，进行旋转的角度。参数7和8表示将矩形块画到画布上，矩形块上参考点的位置，参考点由最后一个参数确定。,在画图

35、系统中画图片,例如：有一副图片，我们将其上一半切下来画在界面上，左上角位置（0，0）。,案例：RotateImageMIDlet.java,图像双缓冲技术,图像双缓冲技术：先把屏幕画在缓冲之中，然后再绘制在显示屏上，而不是直接绘制在显示屏上。某些设备支持双缓冲，可使用Canvas类的isDoubleBuffered()方法事先判断设备是否支持双缓冲。对于本身不支持双缓冲的设备，可以使用可变图像复制不可变图像的方法实现类似双缓冲的效果。,图像双缓冲技术,Step1:声明一个可变图像，并初始化这个图像Step2:获得访问可变图像的Graphics对象Step3:Graphics对象绘图Step4:

36、释放缓冲区的Graphics对象，将其置为nullStep5:paint方法中将缓冲区的内容绘制到屏幕上。注意：是绘制可变图像的对象。,图像双缓冲技术,一个可变的Image对象可以复制一个不可变的对象，然后绘画出来，代码如下所示：Image source;/源Image不可变对象source=Image.createImage(.);Image copy=Image.createImage(source.getWidth(),source.getHeight();Graphics g=copy.getGraphics();/获得相应Graphics对象g.drawImage(source,0,

37、0,TOP|LEFT);用完后注意手动将Graphics对象设置为null.课本：175页案例！BufferDrawExample.java,实验分析,实现一个时钟实例主要涉及到以下几个技术特点：（1）如何获得当地时间（2）如何绘画时钟的分针和时针（3）如何控制时钟的分针和时针移动的速度,获得当地时间,java.util.Calendar类是J2ME标准库提供的日历工具类。创建一个Calendar对象：Calendar calendar=Calendar.getInstance();在Calendar类中把日期分成年、月、日、时、分、秒、微秒、星期八个部分，每一个部分又有一个或多个静态常量与之

38、对应。calendar=Calendar.getInstance(TimeZone.getTimeZone(GMT+8:00);,Calendar类里面提供了多个成员函数，但是最重要的2个函数如下所示：这两个函数的field变量的值是上面表格中的,MONTH,DATE,DAY_OF_WEEK,HOUR_OF_DAY,HOUR,AM_PM,MINUTE,SECOND,和 MILLISECOND，通过这些field变量，可以获得需要的时间数据。,获得当地时间,例如，获得当天时间的所在年份的具体代码如下所示：,获得当地时间,时分秒指针的移动,秒针移动的角度（6度）：angle=（2/360）*second*6=*second/30假设圆心的位置的坐标是（cx，cy），变量ls为绘制秒针的直线的长度，则直线的另外一个点的坐标如下所示：sx=cx+ls*SIN(angle)sy=cy-ls*COS(angle),用程序实现这几个数学式子的代码如下所示：分钟的移动角度和秒种的移动角度式一致的，也是每次移动*second/30度。,时分秒指针的移动,时钟的移动角度略有不同，时针、分针、秒针的动画显示速度使用线程的sleep函数来控制，每隔1秒的时间请求重画一次屏幕，并计算新的坐标。,时分秒指针的移动,