1、第4章 低級用戶界面 Canvas繪圖 Canvas事件事件Canvas繪圖w畫布概述w用Canvas開發簡單畫圖系統w在畫圖系統中畫字符串w在畫圖系統中畫圖片簡介w 在前面的章節中，介紹了高級界面的開發。高級界面就是界面上的效果都是由控件組成的；與此對應的是低級界面，就是界面效果都是通過編程，在畫布上畫出來的。w Displayable的子類可以充滿整個界面，其直接子類有兩個：Canvas和Screen。其中，Screen的子類就是以前講解高級界面，而Canvas就提供了低級界面開發的支持。w 本章重點講解的是以下API： 1：畫布類：畫布類： 2：畫筆類：畫筆類： 畫布概述w javax.

2、microedition.lcdui.Canvas(畫布)是Displayable的子類，也能充滿整個界面。因此，Canvas添加到界面上的方法和Form完全相同。w Canvas類有1個構造函數： 這個函數是保護性的，無法直接使用，因此，一般方法是對這個函數是保護性的，無法直接使用，因此，一般方法是對Canvas進行擴展。在畫布上畫一些內容，最后顯示在進行擴展。在畫布上畫一些內容，最后顯示在MIDlet上。上。畫布概述w 在Canvas類中，有如下重要成員函數： 1： 該函數是抽象函數，如果擴展了Canvas類，就必須對paint函數進行重寫。該函數里面可以包含畫圖的代碼。 注意，該方法是在

3、界面出現時自動調用的！2： public final void repaint( ) 該函數負責調用paint函數。3： 該函數可以設置畫布是否以全屏幕顯示。如果為true，則全屏幕顯示。畫布概述w 綜上所述，畫布開發的基本結構如下：public class MIDlet1 extends MIDlet /畫布類class MyCanvas extends Canvas public void paint(Graphics g) /在畫布上畫圖 private MyCanvas mc = new MyCanvas(); private Display dis; protected void s

4、tartApp() throws MIDletStateChangeException dis = Display.getDisplay(this); dis.setCurrent(mc); /其他代碼 用Canvas開發簡單畫圖系統w paint函數參數是一個Graphics對象。Graphics類定義如下： 它直接繼承它直接繼承java.lang.Object類，一般不用構造函類，一般不用構造函數來實例化其對象，值得一提的是，可以通過數來實例化其對象，值得一提的是，可以通過paint函數的參數，直接得到畫布上的畫筆對象，函數的參數，直接得到畫布上的畫筆對象，不需要實例化。不需要實例化。用C

5、anvas開發簡單畫圖系統w 畫筆對象的重要功能有：1：用：用RGB組合的方法設置畫筆顏色：組合的方法設置畫筆顏色： 該函數可以設置畫筆的顏色，傳入的參數是一個16進制數，用0 xRRGGBB表示，每個分量為00-FF之間。2：用：用RGB分量方法設置畫筆顏色：分量方法設置畫筆顏色： 該函數傳入紅色、綠色和藍色分量，值皆為該函數傳入紅色、綠色和藍色分量，值皆為0-255之間。之間。 用Canvas開發簡單畫圖系統w 3： 該函數能夠設置畫線的線型，其參數可有兩種選擇：該函數能夠設置畫線的線型，其參數可有兩種選擇： Graphics.SOLID：實線；：實線；Graphics.DOTTED：虛線

6、。：虛線。w 4：得到紅色分量：w 5：得到綠色分量： w 6：得到藍色分量： 用Canvas開發簡單畫圖系統w Graphics常見的畫圖函數： 1：畫線：畫線： 該函數從坐標(x1,y1)到(x2,y2)畫一條線。 界面上左上角的坐標為(0,0)，越往右X越大，越往下Y越大。用Canvas開發簡單畫圖系統2：畫矩形：畫矩形： 該函數以(x,y)為左上角坐標，width為寬度，height為高度畫一個矩形。3：畫圓角矩形：畫圓角矩形： 該函數畫一個圓角矩形，以該函數畫一個圓角矩形，以(x,y)為左上角坐標，為左上角坐標，width為寬度，為寬度，height為高度，為高度，arcWidth為

7、圓角水平直徑，為圓角水平直徑，arcHeight為圓角垂為圓角垂直直徑。直直徑。用Canvas開發簡單畫圖系統4：畫圓弧：畫圓弧(橢圓弧橢圓弧)： 該函數畫一段圓弧，在畫圖系統中，任何的圓或橢圓都該函數畫一段圓弧，在畫圖系統中，任何的圓或橢圓都可以包含在一個矩形內，因此，確定了矩形，就確定了可以包含在一個矩形內，因此，確定了矩形，就確定了圓弧。該函數中，圓弧所在的矩形以圓弧。該函數中，圓弧所在的矩形以(x,y)為左上角坐標，為左上角坐標，width為寬度，為寬度，height為高度，以為高度，以startAngle為開始的角為開始的角度，度，arcAngle為畫出的角度。注意，在圓形畫圖過程中

8、，為畫出的角度。注意，在圓形畫圖過程中，從中心水平向右表示從中心水平向右表示0度，逆時針為正方向。度，逆時針為正方向。在畫圖系統中畫字符串w 在畫布上畫字符串并不難，在畫布上畫字符串并不難，Graphics類中有以下重類中有以下重要函數：要函數： 該函數的參數意義如下：該函數的參數意義如下： 參數1是字符串的內容，如“中國人”； 參數2和參數3是參考點在屏幕上的坐標(x,y)，注意，不是左上角在屏幕上的坐標(x,y) ！ 參考點由第四個參數決定。第四個參數由兩個值合成，這兩個值之間用“|”隔開。其中一個值表示水平方向，另一個值表示垂直方向。在畫圖系統中畫字符串w 表示水平方向的通常可以在以下內

9、容中選擇： 1：Graphics.LEFT 2：Graphics.HCENTER 3：Graphics.RIGHT w 表示垂直方向的值，可以選擇： 1：Graphics.BOTTOM 2：Graphics.TOP 3：Graphics.BASELINE。在畫圖系統中畫字符串w 在畫出字符串時，除了可以給畫筆設置顏色之外，還可以給畫筆設置字體，用到如下函數：w 可以用以下函數得到字體： 在畫圖系統中畫字符串w 得到字體有一個重要作用就是可以得知每個字的寬度和高度，Font有幾個函數：1：得到字符高度：得到字符高度： 2：得到字符寬度：得到字符寬度： 3：也可以通過如下函數得到字符串的所占寬度：

10、也可以通過如下函數得到字符串的所占寬度： 在畫圖系統中畫圖片w Graphics類中有以下重要函數：該函數第一個參數是圖片對象，第二個參數和第該函數第一個參數是圖片對象，第二個參數和第三個參數是參考點的坐標三個參數是參考點的坐標(x,y)，參考點由第四個，參考點由第四個參數決定，其方法和上一節相同。參數決定，其方法和上一節相同。 在畫圖系統中畫圖片w 在Graphics類中，還有一個函數也可以畫圖片： 參數參數1表示圖片對象；表示圖片對象； 參數參數2到到5表示在圖片上取一個矩形塊，左上角坐標為表示在圖片上取一個矩形塊，左上角坐標為(x_src,y_src)，寬度為寬度為width，高度為，高

11、度為height； 參數參數6表示將這個矩形塊畫到畫布上的時候，進行旋轉的角度。表示將這個矩形塊畫到畫布上的時候，進行旋轉的角度。 參數參數7和和8表示將矩形塊畫到畫布上，矩形塊上參考點的位置，參考點表示將矩形塊畫到畫布上，矩形塊上參考點的位置，參考點由最后一個參數確定。由最后一個參數確定。在畫圖系統中畫圖片w 旋轉的角度，有如下可選： 1：Sprite.TRANS_NONE：不旋轉：不旋轉 2：Sprite.TRANS_ROT90：旋轉：旋轉90度度 3：Sprite.TRANS_ROT180：旋轉：旋轉180度度 4：Sprite.TRANS_ROT270：旋轉：旋轉270度度 5：Spr

12、ite.TRANS_MIRROR：鏡像：鏡像 6：Sprite.TRANS_MIRROR_ROT90：鏡像，然后旋轉：鏡像，然后旋轉90度度 7：Sprite.TRANS_MIRROR_ROT180：鏡像，然后旋轉：鏡像，然后旋轉180度度 8：Sprite.TRANS_MIRROR_ROT270：鏡像，然后旋轉：鏡像，然后旋轉270度度上機習題w 1. 開發如上圖的界面： 在該程序中，界面上每隔在該程序中，界面上每隔100毫秒，在隨機的位置，以隨機毫秒，在隨機的位置，以隨機的顏色，畫一個隨機大小的實的顏色，畫一個隨機大小的實心圓。心圓。提示：該綜合案例，需要將多提示：該綜合案例，需要將多線程

13、、隨機數等知識結合起來。線程、隨機數等知識結合起來。 w 2. 開發如下圖的界面： 第4章 低級用戶界面 Canvas繪圖 Canvas事件事件Canvas事件w按鍵事件w指針事件簡介w 在上一節中，介紹了Canvas繪圖。但是，在很多應用中，畫布上的效果應該可以由用戶自己控制，如通過鍵盤或者通過指針來進行控制繪圖功能。因此，本節內容將重點圍繞Canvas的事件：按鍵事件和指針事件來進行講述。w 應該指出的是，JavaME中針對按鍵和指針事件，沒有專門分出監聽接口，這些事件的監聽，直接可以由畫布完成，簡化了編程開發。按鍵事件w javax.microedition.lcdui.Canvas支持

14、按鍵事件。如上圖所示的界面，MIDlet上顯示一個畫布，并且全屏幕顯示： w 在界面上有一個手機的圖片，可以用手機上的如中圖按鍵進行控制： w 上下左右鍵能夠控制圖片在界面上向各個方向移動，而中間的選擇鍵則能夠讓圖片旋轉，如，當按下中間的選擇鍵時，圖中的手機圖片會變成如下圖形狀： w 這就是按鍵事件的效果。按鍵事件w Canvas類在支持按鍵事件方面，有三個重要函數： 1：當按鍵按下的時候，自動調用：當按鍵按下的時候，自動調用： 2：當按鍵一直按下的時候，自動調用：當按鍵一直按下的時候，自動調用： 3：當按鍵釋放的時候，自動調用：當按鍵釋放的時候，自動調用： 按鍵事件w 在這三個函數中，都有一

15、個整型參數keyCode，表示鍵盤上事件發生時按鍵所對應的代碼值，如當某個按鍵被按下時，keyPressed方法的參數就變成那個鍵所對應的鍵值。各個按鍵及其對應的值如下表所示： 按鍵名稱按鍵值靜態變量149Canvas.KEY_NUM1 250Canvas.KEY_NUM2 351Canvas.KEY_NUM3 452Canvas.KEY_NUM4 按鍵事件553Canvas.KEY_NUM5 654Canvas.KEY_NUM6755Canvas.KEY_NUM7856Canvas.KEY_NUM8957Canvas.KEY_NUM9048Canvas.KEY_NUM0POUND35Canv

16、as.KEY_POUNDASTERISK42Canvas.KEY_STAR按鍵事件w 對于“上”，“下”，“左”，“右”，“中”這5個鍵來說，按下它們之后，所觸發的keyCode，并不是文檔中的Canvas.UP、Canvas.DOWN、Canvas.LEFT、Canvas.RIGHT和Canvas.FIRE所對應的值。w 實際上，這些keyCode必須轉換為gameAction之后才能與文檔中的值做判斷。按鍵事件w Canvas類中重要函數：將一個將一個keyCode轉成轉成gameAction： 如下代碼： 將會打印：8。而查看Canvas文檔可以得知，Canvas.FIRE的值剛好就是8

17、。/“選擇”鍵所對應的keyCode int keyCode = -5; System.out.println(getGameAction(-5); 按鍵事件w 除了上、下、左、右四個鍵之外，在數字鍵盤上除了上、下、左、右四個鍵之外，在數字鍵盤上還有還有4個鍵也經常用到游戲中，它們是個鍵也經常用到游戲中，它們是“1”、“3”、“7”、“9”鍵。鍵。w 在游戲開發的過程中，在游戲開發的過程中，“1”、“3”、“7”、“9”這這4個鍵經常被用到，打開個鍵經常被用到，打開Canvas文檔，會發現文檔，會發現里面有幾個靜態成員變量：里面有幾個靜態成員變量： Canvas.GAME_A，值為9； Can

18、vas.GAME_B，值為10； Canvas.GAME_C，值為11； Canvas.GAME_D，值為12。按鍵事件w JavaME規定，“1”鍵在游戲中，其keyCode為49，gameAction為9，即等于Canvas.GAME_A；同理，“3”鍵的gameAction為Canvas.GAME_B；“7”鍵的gameAction為Canvas.GAME_C；“9”鍵的gameAction為Canvas.GAME_D。w 例如，如下代碼：w 將會打印：10。而查看Canvas文檔可以得知，Canvas.GAME_B的值剛好就是10。 /“3”所對應的keyCode int keyCode = 51; /或者：int keyCode = Canvas.KEY_NUM3; System.out.println(getGameAction(keyCode); 按鍵事件w 常見的功能鍵，其值如下表所示： 鍵名稱keyCode相應