第12章 繪圖與多媒體 12-1 繪圖的基礎 12-2 Graphics類別的色彩、文字與繪圖 12-3 圖片的載入與顯示

Presentation on theme: "第12章 繪圖與多媒體 12-1 繪圖的基礎 12-2 Graphics類別的色彩、文字與繪圖 12-3 圖片的載入與顯示"— Presentation transcript:

1 第12章 繪圖與多媒體 12-1 繪圖的基礎 12-2 Graphics類別的色彩、文字與繪圖 12-3 圖片的載入與顯示
12-4 動畫效果 12-5 Java Applet的圖片載入 12-6 音樂的播放

2 12-1 繪圖的基礎 12-1-1 Graphics繪圖類別 12-1-2 座標系統與JComponent元件
JFrame類別的畫布 JPanel類別的畫布

3 12-1-1 Graphics繪圖類別-取得Graphics繪圖類別
在Java Applet程式範例已經說明過paint()方法繪出文字和簡單圖形，使用的是Graphics類別的方法。 在Java執行繪圖功能需要使用「圖形內容」（Graphics Contexts）的Graphics物件，繪製的文字、影像和圖形都是繪製在此畫布物件上，如同將GUI元件新增到JFrame物件的ContentPane物件一般。

4 12-1-1 Graphics繪圖類別-paint()方法
繼承自Component元件的paint()方法在呼叫時，其傳入參數就是Graphics物件，如下所示： public void paint(Graphics g) { ……… } 在上述的paint()方法呼叫繪圖方法，就可以在元件上繪出圖形。

5 12-1-1 Graphics繪圖類別-getGraphics()方法
在paint()方法之外的其它方法執行繪圖，可以使用getGraphics()方法取得元件的Graphics物件，如下所示： Graphics g = app.getGraphics(); 上述程式碼取得app元件的Graphics物件，接著就可以呼叫繪圖方法在元件上繪出圖形。

6 12-1-1 Graphics繪圖類別-Swing的paintComponent()方法
對於繼承自Swing元件的類別。例如：JPanel建立的畫布時，繪圖方法的程式碼是位於覆寫的paintComponent()方法，如下所示： class UserPanel extends JPanel { // 建構子 public UserPanel() { ……… } public void paintComponent(Graphics g) }

7 12-1-1 Graphics繪圖類別-再談paint()和repaint()方法
Swing元件屬於JComponent的子類別，同時繼承Component的paint()和repaint()方法，因為元件繪圖操作大都是呼叫paint()方法完成，paint()方法非常總明，能夠在使用者調整視窗尺寸（例如：縮小和放大元件的視窗）等操作後，或是執行setText()等方法改變元件內容時，自動重新呼叫repaint()方法重繪調整後的圖形和元件。

8 12-1-2 座標系統與JComponent元件-說明
電腦螢幕的座標系統是使用「像素」（Pixels）為單位，Graphics物件的畫布是一張長方形區域，左上角為原點，其座標是(0, 0)，X軸從左到右，Y軸由上到下，如下圖所示：

9 12-1-2 座標系統與JComponent元件-取得尺寸
座標系統可以使用JComponent元件的getWidth()、getHeight()方法取得元件的寬和高，因為元件的四周預設有邊線，所以需要使用getInsets()取得邊線left、right、top和bottom的尺寸，如下所示： Insets ins = getInsets(); int width = getWidth() - (ins.left + ins.right); int height = getHeight() - (ins.top + ins.bottom);

10 JFrame類別的畫布-說明 Java應用程式可以將整個JFrame視窗或某個Swing元件作為畫布，如果是JFrame畫布，只需在paint()方法撰寫繪圖方法的程式碼，就可以在視窗繪出所需圖形。

11 JFrame類別的畫布-繪圖 如果不是在paint()方法，Java程式碼需要使用getGraphics()方法取得Grphics物件後，在Graphics物件繪出所需圖形，如下所示： Graphics g = app.getGraphics(); g.setColor(Color.green); g.fillOval(100, 100, 40, 40);

12 JPanel類別的畫布 Swing的JPanel元件可以取代AWT的Canvas類別畫布，JPanel預設提供「雙緩衝區」（Double Buffering）繪圖功能，所有元件的繪圖都是在幕後完成後，才會一次顯示到螢幕上，所以可以加速圖形的顯示。

13 12-2 Graphics類別的色彩、文字與繪圖
指定色彩 指定字型 字型定位尺寸FontMetrics 圖形和字串的繪圖方法 填滿圖形的繪圖方法

14 指定色彩-建立Color物件 Java色彩是java.awt.Color的Color物件，這是使用RGB色彩以不同程度的紅、綠和藍3原色混合出的Color色彩物件，如下所示： Color myColor = new Color(r, g, b); 上述參數r、g和b如為int整數，其範圍是0~255，如為float是0.0~1.0。

15 指定色彩-指定色彩方法 在建立好Color物件後，可以使用Graphics類別的方法指定色彩，相關方法如下表所示：

16 12-2-2 指定字型-建立Font物件 Java的字型是java.awt.Font的Font物件，這是代表指定尺寸和樣式的字型，如下所示：
Folot myFont = new Font("新細明體", Font.PLAIN, 30); 上述參數分別是字型名稱、樣式和尺寸。

17 指定字型-指定字型方法 在建立好Font物件後，可以使用Graphics類別的方法指定字型，相關方法如下表所示：

18 12-2-3 字型定位尺寸FontMetrics-說明

19 12-2-3 字型定位尺寸FontMetrics-相關方法

20 圖形和字串的繪圖方法-1 Graphics類別提供多種方法可以繪出線條、長方形、圓邊長方形、圓形或橢圓形，如下表所示：

21 圖形和字串的繪圖方法-2

22 圖形和字串的繪圖方法-3

23 填滿圖形的繪圖方法-1 Graphics類別還提供繪出填滿圖形的相關方法，如下表所示：

24 填滿圖形的繪圖方法-2

25 填滿圖形的繪圖方法-3

26 12-3 圖片的載入與顯示 圖片的載入與顯示 調整圖片尺寸

27 圖片的載入與顯示-說明 Java程式是使用Image物件來載入圖片，Image是抽象類別，其繼承的子類別可以儲存多種格式的圖片檔案。 在使用上是以Toolkit抽象類別（Abstract Window Toolkit實作的抽象類別）的方法將圖檔載入成為Image物件。

28 12-3-1 圖片的載入與顯示-載入 首先使用getDefaultToolkit()取得Toolkit物件，如下所示：
Toolkit toolkit = Toolkit.getDefaultToolkit(); 程式碼在取得Toolkit物件toolkit後，使用getImage()方法載入圖檔，例如：取得JPG圖檔sample.jpg的Image物件，其程式碼如下所示： Image image = toolkit.getImage("sample.jpg");

29 圖片的載入與顯示-顯示 在paint()或paintComponent()方法使用drawImage()顯示圖檔的Image物件，如下所示： g.drawImage(image, 5, 5, this); 程式碼是在座標(5, 5)顯示名為image的Image物件，實作ImageObserver介面的物件是元件本身this，因為繼承自Component類別的Swing元件都已經實作ImageObserver介面，所以使用元件本身即可。

30 圖片的載入與顯示-圖例

31 調整圖片尺寸-圖片的放大與縮小 drawImage()方法新增參數width和height，分別是圖片的寬和高，如果設定的尺寸比原圖形小是縮小圖片，反之就是放大圖片。 boolean drawImage(Image image, int x, int y, int width, int height, ImageObserver observer)

32 調整圖片尺寸-圖片的翻轉與剪裁 boolean drawImage(Image image, int x1, int y1, int x2, int y2, int sx1, int sy1, int sx2, int sy2, ImageObserver observer) drawImage()方法參數的4個座標分成2組，其說明如下表所示：

33 調整圖片尺寸-圖片翻轉 首先來看翻轉圖片情況：如果sample.gif原始圖片尺寸的寬是width，高是height，原始圖片的左上角座標是(0, 0)，右下角座標為(width, height)，翻轉操作如下： 原尺寸上下翻轉：原始圖片座標分別為(0, height)和(width, 0)，換句話說，原始圖片的左下角成為顯示圖片的左上角，而右上角成為右下角。 原尺寸左右翻轉：原始圖片座標分別為(width, 0)和(0, height)，換句話說，原始圖片的右上角成為顯示圖片的左上角，而左下角成為右下角。

34 調整圖片尺寸-圖片的剪裁 翻轉與剪裁圖片是使用第2組座標，如果第2組座標的尺寸只有部分的圖片，就會剪裁圖片。

35 12-4 動畫效果 Timer類別的時間控制 圖片移動的動畫效果

36 12-4 動畫效果 動畫效果是使用卡通片的製作原理，快速顯示一張張靜態圖片，因為每張圖片擁有少許改變。例如：位移或尺寸，或定時在不同位置繪出圖形，在人類視覺殘留的情況下，就會產生動畫效果。

37 Timer類別的時間控制-說明 在Java程式建立動畫效果是使用Timer計時器類別控制繪圖或圖片顯示，Timer類別可以在間隔時間自動產生事件，以便指定傾聽者物件進行處理。Timer類別的建構子，如下表所示：

38 12-4-1 Timer類別的時間控制-使用 Timer類別的使用十分的簡單，只需先建立好Timer物件，如下所示：
Timer timer = new Timer(300, this); 上述程式碼建立Timer物件且設定300毫秒間隔時間產生事件，傾聽者物件是本身，接著就可以呼叫下表Timer類別的方法啟動、重新啟動和停止計時器。

39 Timer類別的時間控制-方法1 呼叫下表Timer類別的方法啟動、重新啟動和停止計時器，如下表所示：

40 Timer類別的時間控制-方法2 Timer類別的其它相關方法，如下表所示：

41 圖片移動的動畫效果 在Java程式只需使用Timer類別配合圖片載入與顯示，就可以建立圖片移動橫跨螢幕的動畫效果。

42 12-5 Java Applet的圖片載入-Applet
在Java Applet程式載入和顯示圖片是使用getImage()方法將圖片載入成為Image物件，例如：建立URL物件來載入圖片，如下所示： Image image = getImage( new URL(" 使用getDocumentBase()或getCodeBase()方法取得檔案的URL位置，如下圖所示： Image image = getImage(getDocumentBase(),"sample.gif");

43 12-5 Java Applet的圖片載入-JApplet
Java Applet繼承自JApplet可以使用Swing的ImageIcon物件來載入和顯示圖片。例如：使用ImageIcon載入Baby.jpg圖檔的程式碼，如下所示： ImageIcon image1 = new ImageIcon("Baby.jpg"); 在載入圖片成為ImageIcon物件後，就可以使用paintIcon()方法顯示圖片，如下所示： image1.paintIcon(this, g, 5, 5);

44 12-6 音樂的播放-說明 在Java Applet不只可以顯示圖片，還可以播放音樂檔案，目前支援的音樂檔案格式有au、aiff、wav、mid和rmf。

45 12-6 音樂的播放-載入 在Java API的java.applet.*套件的Applet類別提供getAudioClip()方法建立AudioClip物件載入音樂檔案，如下所示： AudioClip audio = getAudioClip(getDocumentBase(),"Microsoft.wav"); 程式碼建立AudioClip物件，參數為URL物件和音樂檔案名稱。

46 12-6 音樂的播放-播放 在建立好AudioClip物件後，就可以使用AudioClip介面的3個方法控制音樂的播放，如下表所示：