绘图与多媒体.ppt

Ch09繪圖與多媒體 JAVA程式設計進階 I 2020 1 10 2 大綱 繪圖的基礎Graphics類別的色彩 文字與繪圖圖片的載入與顯示動畫效果JavaApplet的圖片載入音樂的播放 2020 1 10 3 Graphics繪圖類別 取得Graphics繪圖類別 在JavaApplet程式範例已經說明過paint 方法繪出文字和簡單圖形 使用的是Graphics類別的方法 在Java執行繪圖功能需要使用 圖形內容 GraphicsContexts 的Graphics物件 繪製的文字 影像和圖形都是繪製在此畫布物件上 如同將GUI元件新增到JFrame物件的ContentPane物件一般 2020 1 10 4 範例1 使用Applet呈現圖 Ch11 10 javaimportjava applet Applet importjava awt publicclassCh11 10extendsApplet publicvoidpaint Graphicsg setBackground Color lightGray g setColor Color red g fillRect 10 10 100 100 Ch11 10 htmlCh11 10 html 2020 1 10 5 Graphics繪圖類別 paint 方法 繼承自Component元件的paint 方法在呼叫時 其傳入參數就是Graphics物件 如下所示 publicvoidpaint Graphicsg 在上述的paint 方法呼叫繪圖方法 就可以在元件上繪出圖形 2020 1 10 6 範例2 使用JFrame類別的畫布 importjavax swing importjava awt importjava awt event classCh11 11extendsJFrame Ch11 11 super JFrame畫布 Containerc getContentPane c setBackground Color lightGray publicvoidpaint Graphicsg g setColor Color red g fillRect 10 10 100 100 publicstaticvoidmain String args 建立Swing應用程式Ch11 11app newCh11 11 關閉視窗事件 結束程式的執行app addWindowListener newWindowAdapter publicvoidwindowClosing WindowEventevt System exit 0 app setSize 300 200 設定尺寸app setVisible true 顯示視窗 2020 1 10 7 Graphics繪圖類別 getGraphics 方法 在paint 方法之外的其它方法執行繪圖 可以使用getGraphics 方法取得元件的Graphics物件 如下所示 Graphicsg app getGraphics 上述程式碼取得app元件的Graphics物件 接著就可以呼叫繪圖方法在元件上繪出圖形 2020 1 10 8 範例3 使用getGraphics importjavax swing importjava awt importjava awt event classCh11 12extendsJFrame Ch11 12 super JFrame畫布 Containerc getContentPane c setBackground Color lightGray publicstaticvoidmain String args 建立Swing應用程式Ch11 12app newCh11 12 關閉視窗事件 結束程式的執行app addWindowListener newWindowAdapter publicvoidwindowClosing WindowEventevt System exit 0 app setSize 300 200 設定尺寸app setVisible true 顯示視窗 利用getGraphics 取得GraphicsContextGraphicsg app getGraphics g setColor Color red g fillRect 10 10 100 100 2020 1 10 9 Graphics繪圖類別 Swing的paintComponent 方法 對於繼承自Swing元件的類別 例如 JPanel建立的畫布時 繪圖方法的程式碼是位於覆寫的paintComponent 方法 如下所示 classUserPanelextendsJPanel 建構子publicUserPanel publicvoidpaintComponent Graphicsg 2020 1 10 10 範例4 JPanel類別的畫布 importjavax swing importjava awt importjava awt event classCh11 13extendsJFrame GraphicPanelgPanel newGraphicPanel Ch11 13 super JPanel畫布 Containerc getContentPane c setLayout newFlowLayout c setBackground Color lightGray c add gPanel Graphicsg gPanel getGraphics repaint classGraphicPanelextendsJPanel GraphicPanel setPreferredSize newDimension 200 150 publicvoidpainComponent Graphicsg super paintComponent g g setColor Color red g fillRect 10 10 100 100 publicstaticvoidmain String args 建立Swing應用程式Ch11 13app newCh11 13 關閉視窗事件 結束程式的執行app addWindowListener newWindowAdapter publicvoidwindowClosing WindowEventevt System exit 0 app setSize 300 200 設定尺寸app setVisible true 顯示視窗 2020 1 10 11 Graphics繪圖類別 再談paint 和repaint 方法 Swing元件屬於JComponent的子類別 同時繼承Component的paint 和repaint 方法 因為元件繪圖操作大都是呼叫paint 方法完成 paint 方法非常總明 能夠在使用者調整視窗尺寸 例如 縮小和放大元件的視窗 等操作後 或是執行setText 等方法改變元件內容時 自動重新呼叫repaint 方法重繪調整後的圖形和元件 2020 1 10 12 座標系統與JComponent元件 說明 電腦螢幕的座標系統是使用 像素 Pixels 為單位 Graphics物件的畫布是一張長方形區域 左上角為原點 其座標是 0 0 X軸從左到右 Y軸由上到下 如下圖所示 2020 1 10 13 座標系統與JComponent元件 取得尺寸 座標系統可以使用JComponent元件的getWidth getHeight 方法取得元件的寬和高 因為元件的四周預設有邊線 所以需要使用getInsets 取得邊線left right top和bottom的尺寸 如下所示 Insetsins getInsets intwidth getWidth ins left ins right intheight getHeight ins top ins bottom 2020 1 10 14 JFrame類別的畫布 說明 Java應用程式可以將整個JFrame視窗或某個Swing元件作為畫布 如果是JFrame畫布 只需在paint 方法撰寫繪圖方法的程式碼 就可以在視窗繪出所需圖形 2020 1 10 15 JFrame類別的畫布 繪圖 如果不是在paint 方法 Java程式碼需要使用getGraphics 方法取得Grphics物件後 在Graphics物件繪出所需圖形 如下所示 Graphicsg app getGraphics g setColor Color green g fillOval 100 100 40 40 2020 1 10 16 JPanel類別的畫布 Swing的JPanel元件可以取代AWT的Canvas類別畫布 JPanel預設提供 雙緩衝區 DoubleBuffering 繪圖功能 所有元件的繪圖都是在幕後完成後 才會一次顯示到螢幕上 所以可以加速圖形的顯示 2020 1 10 17 指定色彩 建立Color物件 Java色彩是java awt Color的Color物件 這是使用RGB色彩以不同程度的紅 綠和藍3原色混合出的Color色彩物件 如下所示 ColormyColor newColor r g b 上述參數r g和b如為int整數 其範圍是0 255 如為float是0 0 1 0 2020 1 10 18 指定色彩 指定色彩方法 在建立好Color物件後 可以使用Graphics類別的方法指定色彩 相關方法如下表所示 2020 1 10 19 指定字型 建立Font物件 Java的字型是java awt Font的Font物件 這是代表指定尺寸和樣式的字型 如下所示 FolotmyFont newFont 新細明體 Font PLAIN 30 上述參數分別是字型名稱 樣式和尺寸 2020 1 10 20 指定字型 指定字型方法 在建立好Font物件後 可以使用Graphics類別的方法指定字型 相關方法如下表所示 2020 1 10 21 字型定位尺寸FontMetrics 說明 FontMetrics物件可以取得字串和字型細部定位尺寸 以便在畫布上能夠準確編排文字內容 相關字型的細部尺寸 如下圖所示 2020 1 10 22 字型定位尺寸FontMetrics 相關方法 FontMetrics類別的相關方法 如下表所示 2020 1 10 23 圖形和字串的繪圖方法 1 Graphics類別提供多種方法可以繪出線條 長方形 圓邊長方形 圓形或橢圓形 如下表所示 2020 1 10 24 圖形和字串的繪圖方法 2 2020 1 10 25 圖形和字串的繪圖方法 3 2020 1 10 26 填滿圖形的繪圖方法 1 Graphics類別還提供繪出填滿圖形的相關方法 如下表所示 2020 1 10 27 填滿圖形的繪圖方法 2 2020 1 10 28 填滿圖形的繪圖方法 3 2020 1 10 29 圖片的載入與顯示 說明 Java程式是使用Image物件來載入圖片 Image是抽象類別 其繼承的子類別可以儲存多種格式的圖片檔案 在使用上是以Toolkit抽象類別 AbstractWindowToolkit實作的抽象類別 的方法將圖檔載入成為Image物件 2020 1 10 30 圖片的載入與顯示 載入 首先使用getDefaultToolkit 取得Toolkit物件 如下所示 Toolkittoolkit Toolkit getDefaultToolkit 程式碼在取得Toolkit物件toolkit後 使用getImage 方法載入圖檔 例如 取得JPG圖檔sample jpg的Image物件 其程式碼如下所示 Imageimage toolkit getImage sample jpg 2020 1 10 31 圖片的載入與顯示 顯示 在paint 或paintComponent 方法使用drawImage 顯示圖檔的Image物件 如下所示 g drawImage image 5 5 this 程式碼是在座標 5 5 顯示名為image的Image物件 實作ImageObserver介面的物件是元件本身this 因為繼承自Component類別的Swing元件都已經實作ImageObserver介面 所以使用元件本身即可 2020 1 10 32 範例5 讀取圖片 importjavax swing importjava awt importjava awt event classCh11 15extendsJFrame 建構子Ch11 15 super 載入與顯示圖片 Containerc getContentPane Toolkittoolkit Toolkit getDefaultToolkit Imageimage toolkit getImage MickeyChristmas jpg ImagePanelimagePane newImagePanel image c add imagePane classImagePanelextendsJPanel privateImageimage 建構子ImagePanel Imageimage this image image publicvoidpaintComponent Graphicsg super paintComponent g g drawImage image 5 5 this publicstaticvoidmain String args Ch11 15app newCh11 15 關閉視窗事件 結束程式的執行app addWindowListener newWindowAdapter publicvoidwindowClosing WindowEventevt System exit 0 app setSize 370 320 設定尺寸app setVisible true 顯示視窗 2020 1 10 33 圖片的載入與顯示 圖例 2020 1 10 34 調整圖片尺寸 圖片的放大與縮小 drawImage 方法新增參數width和height 分別是圖片的寬和高 如果設定的尺寸比原圖形小是縮小圖片 反之就是放大圖片 booleandrawImage Imageimage intx inty intwidth intheight ImageObserverobserver 2020 1 10 35 調整圖片尺寸 圖片的翻轉與剪裁 booleandrawImage Imageimage intx1 inty1 intx2 inty2 intsx1 intsy1 intsx2 intsy2 ImageObserverobserver drawImage 方法參數的4個座標分成2組 其說明如下表所示 2020 1 10 36 調整圖片尺寸 圖片翻轉 首先來看翻轉圖片情況 如果sample gif原始圖片尺寸的寬是width 高是height 原始圖片的左上角座標是 0 0 右下角座標為 width height 翻轉操作如下 原尺寸上下翻轉 原始圖片座標分別為 0 height 和 width 0 換句話說 原始圖片的左下角成為顯示圖片的左上角 而右上角成為右下角 原尺寸左右翻轉 原始圖片座標分別為 width 0 和 0 height 換句話說 原始圖片的右上角成為顯示圖片的左上角 而左下角成為右下角 2020 1 10 37 調整圖片尺寸 圖片的剪裁 翻轉與剪裁圖片是使用第2組座標 如果第2組座標的尺寸只有部分的圖片 就會剪裁圖片 2020 1 10 38 範例6 圖片放大 縮小 旋轉 classImagePanelextendsJPanel privateImageimage 建構子ImagePanel Imageimage setPreferredSize newDimension 900 620 this image image publicvoidpaintComponent Graphicsg intx y width height width image getWidth this height image getHeight this super paintComponent g x 0 y 5 g drawImage image x y this 縮小1 2x width 設定第二張圖的起始位置g drawImage image x y width 2 height 2 this 上下旋轉x width 2 g drawImage image x y x width y height 0 height width 0 this 左右旋轉x 0 y height 5 g drawImage image x y x height 2 y width 2 width 0 0 height this 放大並剪裁 取原圖的1 4並放大到原圖大小 x height 2 g drawImage image x y x width y height 0 0 width 2 height 2 this 2020 1 10 39 動畫效果 動畫效果是使用卡通片的製作原理 快速顯示一張張靜態圖片 因為每張圖片擁有少許改變 例如 位移或尺寸 或定時在不同位置繪出圖形 在人類視覺殘留的情況下 就會產生動畫效果 2020 1 10 40 Timer類別的時間控制 說明 在Java程式建立動畫效果是使用Timer計時器類別控制繪圖或圖片顯示 Timer類別可以在間隔時間自動產生事件 以便指定傾聽者物件進行處理 Timer類別的建構子 如下表所示 2020 1 10 41 Timer類別的時間控制 使用 Timer類別的使用十分的簡單 只需先建立好Timer物件 如下所示 Timertimer newTimer 300 this 上述程式碼建立Timer物件且設定300毫秒間隔時間產生事件 傾聽者物件是本身 接著就可以呼叫下表Timer類別的方法啟動 重新啟動和停止計時器 2020 1 10 42 Timer類別的時間控制 方法1 呼叫下表Timer類別的方法啟動 重新啟動和停止計時器 如下表所示 2020 1 10 43 Timer類別的時間控制 方法2 Timer類別的其它相關方法 如下表所示 2020 1 10 44 圖片移動的動畫效果 在Java程式只需使用Timer類別配合圖片載入與顯示 就可以建立圖片移動橫跨螢幕的動畫效果 2020 1 10 45 範例7 動畫 importjavax swing importjava awt importjava awt event 繼承JFrame類別 實作ActionListener介面publicclassCh11 08extendsJFrameimplementsActionListener privateintoffset 10 privateImageim privateTimertimer privateAnimationPaneanimationPane 建構子publicCh11 08 super 動畫功能的顯示範例 intdelay 100 timer newTimer delay this timer setInitialDelay 0 Containerc getContentPane c setLayout newFlowLayout c setBackground Color gray Toolkittoolkit Toolkit getDefaultToolkit im toolkit getImage 023 gif animationPane newAnimationPane im c add animationPane timer start app setSize 300 150 設定尺寸app setVisible true 顯示視窗 顯示動畫的JPanelclassAnimationPaneextendsJPanel Imageimage 建構子publicAnimationPane Imageimage setPreferredSize newDimension 250 100 setBackground Color lightGray this image image publicvoidpaintComponent Graphicsg super paintComponent g intwidth getWidth intheight getHeight 計算圖片的尺寸intimgWidth image getWidth this intimgHeight image getHeight this g drawImage image offset 5 imgWidth width imgWidth height imgHeight 2 this 實作事件處理方法publicvoidactionPerformed ActionEventevt offset animationPane repaint 重繪 主程式publicstaticvoidmain String args 建立Swing應用程式Ch11 08app newCh11 08 關閉視窗事件 結束程式的執行app addWindowListener newWindowAdapter publicvoidwindowClosing WindowEventevt System exit 0 2020 1 10 46 範例8 動畫 會更換圖片 importjava awt importjava applet publicclassCh11 09extendsAppletimplementsRunnable Threadfly intx y dx dy flag num i Image Img publicvoidinit x getWidth y 50 dx 5 dy 0 Img newImage 4 num 1 Img 0 getImage getDocumentBase 013 gif Img 1 getImage getDocumentBase 023 gif Img 2 getImage getDocumentBase 024 gif Img 3 getImage getDocumentBase 001 gif publicvoidstart fly newThread this fly start publicvoidrun while true x x dx y y dy flag num 4 repaint num num 1 if x 0 x getWidth try Thread sleep 1500 catch InterruptedExceptione publicvoidpaint Graphicsg g drawImage Img flag x y x 10 y 25 this 2020 1 10 47 JavaApplet的圖片載入 Applet 在JavaApplet程式載入和顯示圖片是使用getImage 方法將圖片載入成為Image物件 例如 建立URL物件來載入圖片 如下所示 Imageimage getImage newURL 2020 1 10 48 JavaApplet的圖片載入 JApplet JavaApplet繼承自JApplet可以使用Swing的ImageIcon物件來載入和顯示圖片 例如 使用ImageIcon載入Baby jpg圖檔的程式碼 如下所示 ImageIconimage1 newImageIcon Baby jpg 在載入圖片成為ImageIcon物件後 就可以使用paintIcon 方法顯示圖片 如下所示 image1 paintIcon this g 5 5 2020 1 10 49 音樂的播放 說明 在JavaApplet不只可以顯示圖片 還可以播放音樂檔案 目前支援的音樂檔案格式有au aiff wav mid和rmf 2020 1 10 50 音樂的播放 載入 在JavaAPI的java applet 套件的Applet類別提供getAudioClip 方法建立AudioClip物件載入音樂檔案 如下所示 AudioClipaudio getAudioClip getDocumentBase Microsoft wav 程式碼建立AudioClip物件 參數為URL物件和音樂檔案名稱 2020 1 10 51 音樂的播放 播放 在建立好AudioClip物件後 就可以使用AudioClip介面的3個方法控制音樂的播放 如下表所示 2020 1 10 52 範例8 播放音樂 使用Applet importjava awt importjava awt event importjavax swing importjava applet 繼承JApplet類別 實作ActionListener介面publicclassCh11 07extendsJAppletimplementsActionListener privateAudioClipaudio privateJButtonplay loop stop 初始方法publicvoidinit 取得參數Stringfile getParameter FILE Containerc getContentPane c setBackground Color gray c setLayout newFlowLayout FlowLayout CENTER audio getAudioClip getDocumentBase file play newJButton 播放 play addActionListener this c add play loop newJButton 循環播放 loop addActionListener this c add loop stop newJButton 停止 stop addActionListener this c add stop 實作事件處理方法publicvoidactionPerformed ActionEventevt if evt getSource play audio play elseif evt getSource loop audio loop elseif evt getSource stop audio stop 2020 1 10 53 範例8 播放音樂 使用Applet 續 Ch11 07 htm 2020 1 10 54 範例9 播放音樂 使用Sound importjava io importjavax sound sampled publicclassCh11 07 02 publicstaticvoidmain Stringargs try System out println 播放聲音檔案 jay1 wav Filesf newFile jay1 wav 取得聲音輸入串流AudioInputStreamastr AudioSystem getAudioInputStream sf 取得聲音形式AudioFormatafmt astr getFormat 建立訊號線資訊物件DataLine Infoinf newDataLine Info SourceDataLine class afmt 取得符合指定訊號線資訊的訊號線SourceDataLinel SourceDataLine AudioSystem getLine inf 以指定形式開啟訊號線l open afmt 開始訊號線的讀寫l start 讀寫緩寫區byte buf newbyte 65536 從聲音串流讀入資料寫入混音器for intn 0 n astr read buf 0 buf length 0 l write buf 0 n 清掉混音器內的資料l drain 關閉l close catch Exceptione e printStackTrace System exit 0 2020 1 10 55 範例10 滑鼠控制圖像移動 importjava awt importjava applet publicclassCh11 21extendsAppletimplementsRunnable Threadflag intx y dx dy ImageImg PointclickPoint Stringmessage publicvoidinit x y 50 dx 5 dy 0 Img getImage getDocumentBase 010 gif publicbooleanmouseDown Eventevt intmx intmy if mx 400 2020 1 10 56 範例10 滑鼠控制圖像移動 續 publicvoidstart flag newThread this flag start publicvoidrun while true x x dx y y dy repaint if x getWidth dx 5 elseif y 70 getHeight dy 5 try Thread sleep 250 catch InterruptedExceptione publicvoidpaint Graphicsg g drawString message 5 15 g drawRect 400 400 10 10 g drawRect 400 440 10 10 g drawRect 380 420 10 10 g drawRect 420 420 10 10 g drawImage Img x y this 2020 1 10 57 範例11 方向鍵控制圖像移動 importjava awt importjava applet publicclassCh11 22extendsAppletimplementsRunnable Threadflag intx y dx dy ImageImg publicvoidinit x y 50 dx 5 dy 0 Img getImage getDocumentBase 010 gif publicbooleankeyDown Eventevt intkey switch key caseEvent UP dx 0 dy 5 break caseEvent DOWN dx 0 dy 5 break caseEvent LEFT dx 5 dy 0 break caseEvent RIGHT dx 5 dy 0 returntrue publicvoidstart flag newThread this flag start 2020 1 10 58 範例11 方向鍵控制圖像移動 續 publicvoidrun while true x x dx y y dy repaint if x getWidth dx 5 elseif y 70 getHeight dy 5 try Thread sleep 250 catch InterruptedExceptione publicvoidpaint Graphicsg g drawImage Img x y this 2020 1 10 59 研究 用球擊中靶塊 importjava awt importjava lang importjava applet publicclassBlockHitextendsAppletimplementsRunnable intfieldx1 0 intfieldy1 0 intfieldx2 256 intfieldy2 306 intblock xnum 10 intblock ynum 8 intblock width 15 intblock height 5 intblock left board 6 intblock up board 46 intblock lower board 116 intpad width 20 Graphicsg ThreadtheBall intblockState newint block xnum block ynum intpadx intballX ballY intballDX ballDY intspeed interaseCount intpadHitCount intscore intleft booleanonGame booleanonFireBall PanelpControl LabellScore lLeft ButtonbControl intthreadProcessing publicvoidinit setLayout newBorderLayout setBackground Color green g getGraphics pControl newPanel pControl setBackground Color gray pControl setLayout newFlowLayout bControl newButton START lScore newLabel SCORE 0 lLeft newLabel LEFT 5 pControl add bControl pControl add lScore pControl add lLeft add South pControl publicvoidstart gameInit onGame false onFireBall false 2020 1 10 60 voidgameInit for intx 0 x block xnum x for inty 0 y block ynum y blockState x y 1 padx fieldx2 2 score 0 addScore 0 left 5 subLeft 0 eraseCount 0 bControl setLabel START threadProcessing 0 repaint publicvoidpaint Graphicsg g drawRect fieldx1 fieldy1 fieldx2 fieldy2 g setColor Color blue for inty 0 y block ynum y for intx 0 x block xnum x if blockState x y 1 g fillRect block left board x block width 10 block up board y block height 5 block width block height publicvoidremakeBlock g setColor Color blue for intx 0 x block xnum x for inty 0 y block ynum y blockState x y 1 g fillRect block left board x block width 10 block up board y block height 5 block width block height publicbooleanaction Evente Objecto if e targetinstanceofButton if START equals o if onGame false gameInit bControl setLabel STOP onGame true elseif STOP equals o stop bControl setLabel START onGame false onFireBall false returntrue returnfalse 2020 1 10 61 publicbooleanmouseDown java awt Evente intx inty if onGame true if onFireBall false ballX padx 10 10 1 if ballX block xnum block width 10 5 ballX block xnum bl