NEC 手机JAVA 初级讲座-7
初级制图 －画图ー
1. 终端Java 的life cycle
从本讲开始我们就要学习终端Java 技术了！
终于开始学了啊。
目前为止已经学习的编程基础一定会派上用场的，尼克要加油啊。本讲我们学习在终端上制作图画。
在文章开始时谈到画图，那么首先从如何启动终端Java ，如何使其运行开始讲起。
这么说有电话挂进来时，程序会暂时停止是么？
是这样的。每次电话进来时程序都会中止，相反若程序仍然运行不是很麻烦么。
通话时游戏结束的话很讨厌啊。
为了避免这种情况，在终端Java 内定义了程序启动时、电话挂进来时以及程序结束时的处理。
好方便啊。
请看下图。终端Java 的life cycle 如下图所示。
１．终端发出运行命令，调出default constructor (无自变量)。 ２．调出startApp()，开始MIDlet 。
３．电话等进来时，运行pasuseApp()，MIDlet 停止。 ４．通话结束时，再运行startApp()，且再次打开MIDlet 。 ５．停止MIDlet 时，运行destroyApp()，MIDlet 停止。
1 2
3 4 5 6 7 8 9 10 11 12
博士，这里的default constructor 是什么？ 这个呀。让我们用模板的source code 来说明一下。
13
14 15
16 17
18
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
从14行到19行存在与类名相同名称的Templete 方法。这个就是constructor 。
它起什么作用呢？
作成类时，写在constructor 内的处理会自动运行。也就是说，constructor 是进行类的初始化的。
哦哦。可是，这个模板的constructor 是做什么的呀？ 噢。好问题啊，从现在起我们就开始讲解这个问题了。
2. 画图
2.1. canvas
1 2
3
4 5
6
7 8 9 10 11 12 13 14 15 16 17 18 19 20
为了在终端Java 上画图，要使用Canvas 类。 好的。画图从Canvas 类开始。
尼克，你有没有注意到终端Java 应用里面有许多画面？
画面？是指上讲以前所学的显示文字，输入文字的画面么？
恩。是的。上一讲以前都是利用text box 来显示文字的。另外也有选择要素的画面以及显示时钟的画面。而这一讲却要使用与以前完全不同的画面Canvas 来显示graphic 。
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2.2. 画线
g.drawLine(int 起点的x 坐标，int 起点的y 坐标，int 终点的x 坐标,int 终点的y 坐标);
上面的source code 是显示graphic 的程序模板。
增加了一个类呀。
是的。利用Canvas 时，除了主要的类之外，还需要一个显示graphic 的Canvas 类。
这也挺难的啊。。。
首先我们先在画面上试着画线。
是。
画线的程序如下所示书写。
从41行到45行记录着画图处理。
40,0)
40,255)
(0x
y
使用这个试试从(10,10)到(100,100)画线，怎么样？
应该是g.drawLine(10,10,100,100)吧。
对！
但是坐标原点在哪里呢？
恩？
根据坐标原点的不同描画的情况应该也不相同。。。
你说得对。坐标原点在画面的左上。N820的画面如下所示。
运行刚才的画线命令，如下所示。 左上角为原点，x 轴的值向右逐渐变大，y 轴的值向下逐渐变大。
2.3. 描画四边形
g.drawRect(int 定点的x 坐标, int 定点的y 坐标, int 高度, int 宽度);
接下来我们试着画四边形。
画四条线就行了吧。
呵呵，是这样的。但Java 里面也准备了专门描画四边形的方法。
使用这个方法试试从(10,10)画高100宽100的正方形，应该怎么做？
应该是g.drawRect(10,10,100,100)。
2.4. 画圆
g.drawArc(int 圆左上的x 坐标, int 圆左上的y 坐标, int 圆的宽度, int 圆的高度, int 圆的开始角度, int 圆弧的角度);
下面我们来画圆。
好的。
画圆的命令如下所示。
各变量的表示法见下图。
g.drawArc(100,100,80,80,0,360);
这个图最初画圆时应该怎么做呢？考虑一下。
呃，把height 与width 设为相同数值，arcAngle 设为360怎么样？
你这样做试试吧。
调整圆的高度、宽度，有时也会出现椭圆的情况。
2.5. 改变颜色
g.setColor(int 红色的值, int 绿色的值, int 蓝色的值);
恩。画的不错呀。圆弧的角度在360度以下时画出来的是弧。
一直都用黑线画，是不是比较无聊呢。
是啊，我想用红色或者黄色试试看。
呵呵，颜色的变换方法如下所示。
红色、绿色与蓝色组合可以生成各种各样的颜色。
果然。它们是三原色嘛。
那我们就画一下红色的四边形吧。
g.setColor(255,0,0); g.drawRect(10,10,100,100);
g.fillRect(int x 坐标, int y 坐标, int 高度, int 宽度);
那么涂满颜色的四边形也能被画出来么？
描画涂满颜色的四边形也有专门的命令。如下所示。
红线被画出来了。
2.6. 显示图像
Image image = Image.createImage("图像文件的路径");
下面的程序就变的稍微有点长了。试试做一做图像的显示，
图像是指照片之类的么？
是的，那就先来显示尼克的图像吧。N820可以显示PNG 形式的图像。首先，要准备PNG 形式的文件。
好的。
下面制作表示图像文件的image object 。
image object ？？
关于object ，反正以后还要学习object 指向，到时再说明吧。在这里，请把它当作程序里读取图像文件的数据。image object 的制作方法如下所示。 draw ～系的方法只是描画图形的线条，而fill ～系的方法则把图形涂满。
1 2 3 4 5 6 7 8
9 10 11
1 2
3
4
5 6
此时若设定了错误的图像文件路径，就会出现error 。在Java 里为避免此类error ，准备了“例外处理”。也就是定义了例外error 发生时的处理。 例如，图像文件的路径错误，这样就会导致例外error 的出现是吗？
是的。这时一般就会出现“图像文件的路径错误”等信息。如下所示书写例外处理。
使用例外处理读取图像的程序如下所示书写。此程序是在模拟器的message panel 里显示例外的内容而进行的例外处理。 上面的语句表示在image 变量里读取图像文件的数据。但是，只是读取数据还不能显示出来。 也有显示用的命令吧。
被你猜对了，显示命令的写法如下所示。
g.drawImage(image, int 显示位置的x 坐标, int 显示位置的y 坐标, int anchor);
(x,y)
TOP
BOTTOM VCENTER
LEFT RIGHT
HCENTER
博士！anchor 是什么东西啊？
问的好！所谓的anchor point ，是指决定图像位置的基准点。定义anchor point 时，利用逻辑计算符号「|」，分别指定横方向和纵方向的常数。
恩。好像有一些难啊。。。
习惯就好了。指定anchor point 为「 Graphics.LEFT | Graphics.TOP 」后，变成下面所示的图。 那么指定「 Graphics.HCENTER | Graphics.VCENTER 」的情况下又是什么样子呢？ 在画面的中间显示？
两个指定的ancho 交叉就是anchor point 。
(x,y)
TOP
BOTTOM
VCENTER
LEFT RIGHT
HCENTER
/project top
/src /bin /res
在这里放置图像
文件
对！是这样的。让我们实际在画面中间显示尼克的图像看看。画面的尺寸为高255
，宽240。
这么说，中间的坐标是(120 , 127)啊。恩？？那么图像文件放哪里好呢？
噢，是啊是啊。对于Project ，把source code 保存到“src ”文件夹，再把“res ”文件夹创建到“src ”或者保存类文件的“
bin ”所在的文件夹内，在其中放置图像文件。 接下来在模拟器中设定放置图像文件的文件夹。点击菜单的Options->MIDlet suite...。
1
2
3 4 5 6 7
然后指定刚才保存图像文件的文件夹为「Resource Directory 」。 按“OK ”键结束设定。 这样的话会变成什么样子呢？
drawString("将要显示的字符串", int x 坐标, int y 坐标, anchor point );
1
2
做的不错啊！ 可是anchor point 的BASELINE 是指哪里啊？
所谓的BASELINE 是指利用在画面中显示文字的anchor point ，在显示图像时使用的。
呃！？也可以显示文字啊！
要显示文需使用以下的方法，自己试试吧。 我的脸显示出来了！！
3. 下一讲
本讲我们学会了如何显示简单的graphic。
是的。家里的画好像利用线和四边形就可以画了。如果可以使用图像，那就更有意思了。
恩。自己试着做一做也很重要。下一讲我们将学习使用终端的按键。