多媒體
內 容 大 綱 繪圖 字型 顏色 影像 音效 動畫
Java語言對多媒體(multimedia)的支援，一直是Java語言的重要特色，尤其在全球資訊網大為流行的今日，豐富的多媒體更是使網頁可以吸引大眾目光的要素之一。在本章中，我們將介紹Java語言中對於繪圖(graphics)、顏色(colors)、影像(images)、音效(audios)及動畫(animations)等多媒體相關技術的處理方式。
繪圖 (1/7) Java語言使用java.awt類別庫中的Graphics類別來提供許多與繪圖(graphics)相關的方法，我們可藉由這些方法來繪製直線、矩形、橢圓、弧形及多邊形等，以下我們介紹幾個較常用的方法，並且使用範例程式來說明這些方法的使用方式：
繪圖 (2/7) Graphics類別常用方法摘要如下所列
繪圖 (3/7)
繪圖 (4/7) 我們使用以下的範例程式 繪圖方法測試.java 展示上列所有方法的用法： 範例程式(檔名: 繪圖方法測試.java) //說明:此程式可測試各種繪圖的用法 import java.awt.Font; import java.awt.Graphics; import java.applet.Applet; public class 繪圖方法測試 extends Applet { public void paint(Graphics 繪圖區) { 繪圖區.setFont( new Font( "Dialog", Font.PLAIN, 20 ) ); 繪圖區.drawString( "繪製直線:drawLine(x1,y1,x2,y2)", 20, 25 );
繪圖 (5/7) 繪圖區.drawLine(400,10,433,10); 繪圖區.drawLine(400,15,466,15); 繪圖區.drawString( "繪製矩形:drawRect(x,y,w,h)", 20, 50 ); 繪圖區.drawRect(400,25,100,25); 繪圖區.drawString( "繪製填實矩形:fillRect(x,y,w,h)", 20, 75 ); 繪圖區.fillRect(400,50,100,25); 繪圖區.drawString( "繪製橢圓:drawOval(x,y,w,h)", 20, 100 ); 繪圖區.drawOval(400,75,100,25); 繪圖區.drawString( "繪製填實橢圓:fillOval(x,y,w,h)", 20, 125 ); 繪圖區.fillOval(400,100,100,25); 繪圖區.drawString( "繪製弧形:drawArc(x,y,w,h,s,a)", 20, 150 );
繪圖 (6/7) 繪圖區.drawArc(400,125,100,25,90,180); 繪圖區.drawString( "繪製填實弧形:fillArc(x,y,w,h,s,a)", 20, 175 ); 繪圖區.fillArc(400,150,100,25,-90,180); 繪圖區.drawString( "繪製多邊形:drawPolygon(x[ ],y[ ],n)", 20,200 ); int[] x={450,400,500},y={175,200,200}; 繪圖區.drawPolygon(x,y,3); 繪圖區.drawString( "繪製填實多邊形:fillPolygon(x[ ],y[ ],n)", 20,225 ); int[] xx={450,400,500},yy={200,225,225}; 繪圖區.fillPolygon(xx,yy,3); } //方法:paint() 定義區塊結束 } //類別:繪圖方法測試 定義區塊結束
繪圖 (7/7) 網頁檔案(檔名：繪圖方法測試網頁.html) <html> <applet code="繪圖方法測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer繪圖方法測試網頁.html) 在以上的說明與範例中，我們已經知道，透過java.awt類別庫中的Graphics類別的drawString方法，可用以在繪圖區中顯示出字串。以下我們要介紹的是，如何使用java.awt類別庫中的Font類別來改變顯示字元的字型相關特性。
字型 (1/7) 我們可以使用java.awt類別庫中的Font類別來設定字型的相關特性，包括字型名稱、字型大小與字型樣式等。以下我們介紹Font類別： Font類別的建構方法摘要如下所列： 提示
字型 (2/7) 以下是Font類別常用方法摘要
字型 (3/7) 我們要設定繪圖區顯示字元的字型時只要呼叫Graphics類別裡的setFont(Object 物件)方法，並將屬於Font類別的物件當作參數傳入即可。相對的，Graphics類別的getFont方法可傳回Font物件。檔案 字型測試.java 測試Font類別的所有方法。
字型 (4/7) //檔名:字型測試.java //說明:此程式可測試各種字型的用法 import java.awt.Font; import java.awt.Graphics; import java.applet.Applet; public class 字型測試 extends Applet { public void paint( Graphics 繪圖區 ) { 繪圖區.drawString( "這是在未有任何Font設定前的顯示狀況", 20, 30 ); 繪圖區.drawString( "預設值:"+繪圖區.getFont().getName() + " " + 繪圖區.getFont().getSize()+"點 一般字體", 20, 50 ); 繪圖區.setFont( new Font( "細明體", Font.PLAIN, 12 ) ); 繪圖區.drawString( 繪圖區.getFont().getName() + " " + 繪圖區.getFont().getSize() + "點 一般", 20, 70 );
字型 (5/7) 繪圖區.setFont( new Font( "細明體", Font.ITALIC, 24 ) ); 繪圖區.drawString( 繪圖區.getFont().getName() + " " + 繪圖區.getFont().getSize() + "點 斜體(italic)", 20, 90 ); 繪圖區.setFont( new Font( "Dialog", Font.PLAIN, 24 ) ); 繪圖區.drawString( 繪圖區.getFont().getName() + " " + 繪圖區.getFont().getSize() + "point plain", 20, 110 ); 繪圖區.setFont( new Font( "DialogInput", Font.PLAIN, 24 ) ); 繪圖區.getFont().getSize() + "point plain", 20, 130 ); 繪圖區.setFont( new Font( "MonoSpaced", Font.PLAIN, 24 ) );
字型 (6/7) 繪圖區.getFont().getSize() + "point plain", 20, 150 ); 繪圖區.setFont( new Font( "Serif", Font.PLAIN, 24 ) ); 繪圖區.drawString( 繪圖區.getFont().getName() + " " + 繪圖區.getFont().getSize() + "point plain", 20, 170 ); 繪圖區.setFont( new Font( "SansSerif", Font.PLAIN, 24 ) ); 繪圖區.getFont().getSize() + "point plain", 20, 190 ); 繪圖區.setFont( new Font( "SansSerif", Font.BOLD, 24 ) ); 繪圖區.getFont().getSize() + "point bold", 20, 210 );
字型 (7/7) 繪圖區.setFont( new Font( "SansSerif", Font.ITALIC, 24 ) ); 繪圖區.drawString( 繪圖區.getFont().getName() + " " + 繪圖區.getFont().getSize() + "point italic", 20, 230 ); 繪圖區.setFont( new Font( "SansSerif", Font.ITALIC+Font.BOLD, 24 ) ); 繪圖區.getFont().getSize() + "point bold and italic", 20, 250 ); } //方法:paint() 定義區塊結束 }//類別:繪圖方法測試 定義區塊結束 網頁檔案(檔名：字型測試網頁.html) <html> <applet code="字型測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer字型測試網頁.html)
顏色 (1/8) 在Graphics類別繪圖相關方法中還有一個透過java.awt類別庫中Color類別物件設定顏色的機制，以下我們即說明Java程式設計設定顏色的作法，我們先介紹Color類別： Color類別的建構方法摘要如下所列：
顏色 (2/8) 提示 以下是Color類別常用方法摘要:
顏色 (3/8) Color類別定義了許多屬於Color類別本身的物件，這些物件對應至一些常用的顏色，以下是Color類別定義的常數的摘要說明：
顏色 (4/8) 在Graphics類別中使用setColor(Object 物件)方法來設定繪圖的顏色，設定顏色時只要將Color物件當參數傳給setColor方法即可。另外，Graphics類別亦提供getColor方法可以取得代表目前繪圖顏色的Color物件。
顏色 (5/8) 檔案 顏色測試.java 即是Color類別與Graphics類別配合使用的範例。 範例程式(檔名: 顏色測試.java) //說明:此程式可測試各種顏色的用法 import java.awt.Color; import java.awt.Graphics; import java.applet.Applet; public class 顏色測試 extends Applet { public void paint( Graphics 繪圖區 ) {
顏色 (6/8) // 使用整數設定繪圖顏色 繪圖區.setColor( new Color( 255, 0, 0 ) ); 繪圖區.fillRect( 25, 25, 100, 20 ); 繪圖區.drawString( "目前COLOR物件: " + 繪圖區.getColor(), 130, 40 ); // 使用浮點數設定繪圖顏色 繪圖區.setColor( new Color( 0.0f, 1.0f, 0.0f ) ); 繪圖區.fillRect( 25, 50, 100, 20 ); 繪圖區.drawString( "目前COLOR物件: " + 繪圖區.getColor(), 130, 65 ); // 使用內建顏色物件設定繪圖顏色
顏色 (7/8) 繪圖區.setColor( Color.blue ); 繪圖區.fillRect( 25, 75, 100, 20 ); 繪圖區.drawString( "目前COLOR物件: " + 繪圖區.getColor(), 130, 90 ); // 將個別RGB值印出 Color 顏色 = Color.magenta; 繪圖區.setColor( 顏色 ); 繪圖區.fillRect( 25, 100, 100, 20 ); 繪圖區.drawString( "目前(r,g,b)之值: (" + 顏色.getRed() + ", " + 顏色.getGreen() + ", " + 顏色.getBlue()+")", 130, 115 ); } //方法:paint() 定義區塊結束 } //類別:顏色測試 定義區塊結束
顏色 (8/8) 網頁檔案(檔名：顏色測試網頁.html) 執行結果(命令視窗指令：appletviewer顏色測試網頁.html) <applet code="顏色測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer顏色測試網頁.html)
影像 (1/6) 透過Image類別，Java語言支援GIF(Graphics Interchange Format)及JPG(Joint Photographic Experts Group)等著名的影像(image)檔案格式，配合Graphics類別中的drawImage方法與Applet類別的getImage方法，便能夠在Java小程式中載入並顯現影像。以下我們介紹Image類別的用法，其建構方法描述如下： 提示
影像 (2/6) Applet類別的getImage方法描述如下：
影像 (3/6) 以下我們描述Graphics類別的drawImage方法，此方法有許多形式，其說明如下：
影像 (4/6) 我們使用以下的範例來說明各種影像載入的用法，請注意，範例程式 影像載入測試.java 中使用Applet類別的getCodeBase方法，此方法可傳回Applet本身所在目錄的URL網路位址【註解】，這在呼叫getImage方法而必須傳入影像檔案所在目錄的URL時是非常有用的。
影像 (5/6) 範例程式(檔名: 影像載入測試.java) //檔名:影像載入測試.java //說明:此程式可測試影像載入的用法 import java.applet.Applet; import java.awt.Image; import java.awt.Graphics; public class 影像載入測試 extends Applet{ public void paint(Graphics 繪圖區) { Image 影像; 影像=getImage(getCodeBase(),"影像檔案.gif"); 繪圖區.drawImage(影像,0,0,this); 繪圖區.drawImage(影像,120,200,60,70,this); } //方法:paint() 定義區塊結束 } //類別:影像載入測試 定義區塊結束
影像 (6/6) 網頁檔案(檔名：影像載入測試網頁.html) 執行結果(命令視窗指令：appletviewer影像載入測試網頁.html) <applet code="影像載入測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer影像載入測試網頁.html)
音效 (1/4) 透過Applet類別的play方法，可以在小程式中撥放音效(audio)檔案，Java語言支援的音效檔案格式包括Sun audio 檔案格式(附加檔名.au)、Windows wave檔案格式(附加檔名.wav) 、Macintosh AIFF檔案格式(附加檔名.aif 或.aiff) 及Musical Instrument Digital Interface(MIDI)檔案格式(附加檔名.mid或.midi或.rmi) 等。
音效 (2/4) Applet類別的play方法描述如下：
音效 (3/4) 範例程式(檔名: 音效撥放測試.java) //檔名:音效撥放測試.java //說明:此程式可測試音效撥放 import java.applet.Applet; import java.awt.Graphics; public class 音效撥放 測試 extends Applet{ public void paint(Graphics 繪圖區) { 繪圖區.drawString("音效撥放測試",50,50); } //方法:paint() 定義區塊結束 public void init() { play(getCodeBase(),"音效檔案.wav"); } //方法:init() 定義區塊結束 } //類別:音效撥放測試 定義區塊結束
音效 (4/4) 網頁檔案(檔名：音效撥放測試網頁.html) 執行結果(命令視窗指令：appletviewer音效撥放測試網頁.html) <applet code="音效撥放測試.class" width="350" height="100"> </applet> </html> 執行結果(命令視窗指令：appletviewer音效撥放測試網頁.html)
動畫 (1/9) 依精確的時間控制快速顯示一系列有些微差異的影像(image)可以產生動畫(animation)的視覺效果，例如，電影以每秒24個影像畫面的方式播出而電視以每秒30個影像畫面的方式播出，一般而言，每秒鐘播出的影像畫面只要超過12個，則人類的眼睛就可以感覺到畫面是連續動作了，因此，如何掌握精確的時間控制，是產生動畫的基本依據。
動畫 (2/9) 類別庫javax.swing中的Timer類別提供了精確的時間控制機制，我們描述Timer類別常用的方法如下：
動畫 (3/9) 我們使用以下的範例來說明動畫產生的方法，這個範例程式連續載入10個格式為gif的影像檔案，並使用Timer類別控制每一個影像檔案顯示於繪圖區的時間為100毫秒(ms)( 100毫秒=1/10秒)，因此，每秒鐘即有10個影像檔案顯示於繪圖區中而讓人們產生連續動作之感覺。
動畫 (4/9) 範例程式(檔名: 動畫測試.java) //檔名:動畫測試.java //說明:此程式可測試動畫效果 動畫 (4/9) 範例程式(檔名: 動畫測試.java) //檔名:動畫測試.java //說明:此程式可測試動畫效果 import java.awt.Image; import java.awt.Graphics; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.applet.Applet; import javax.swing.Timer;
動畫 (5/9) public class 動畫測試 extends Applet implements ActionListener { 動畫 (5/9) public class 動畫測試 extends Applet implements ActionListener { Image[] 影像陣列; Timer 計時器; final int 每秒影像數=10; final int 延遲時間=1000/每秒影像數; //延遲時間單位為毫秒 int 目前影像編號=0; public void init() { 影像陣列 = new Image[每秒影像數]; for(int i = 0; i < 每秒影像數; i++) //逐一載入影像檔案
動畫 (6/9) 影像陣列[i] = getImage(getCodeBase(), i + ".gif"); 動畫 (6/9) 影像陣列[i] = getImage(getCodeBase(), i + ".gif"); } //方法:init() 定義區塊結束 public void start() { 計時器 = new Timer(延遲時間, this);//計時器時間到時會通知this(動畫測試)物件 計時器.start(); //啟動計時器 } //方法:start() 定義區塊結束 public void paint(Graphics 繪圖區) { 繪圖區.drawImage(影像陣列[目前影像編號], 0, 0, this); } //方法:paint() 定義區塊結束
動畫 (7/9) public void actionPerformed(ActionEvent 事件) { //計時器時間到時被呼叫的方法 動畫 (7/9) public void actionPerformed(ActionEvent 事件) { //計時器時間到時被呼叫的方法 目前影像編號=(目前影像編號+1) % 每秒影像數; repaint(); //此方法會清除繪圖區之後呼叫paint方法 } //方法:actionPerformed() 定義區塊結束 } //類別:動畫測試 定義區塊結束
動畫 (8/9) 網頁檔案(檔名：動畫測試網頁.html) 執行結果(命令視窗指令：appletviewer動畫測試網頁.html) 提示 動畫 (8/9) 網頁檔案(檔名：動畫測試網頁.html) <html> <applet code="動畫測試.class" width="260" height="120"> </applet> </html> 執行結果(命令視窗指令：appletviewer動畫測試網頁.html) 提示
動畫 (9/9) 範例程式8-6使用了Timer類別與事件(event)處理技術來控制影像的顯示時間為100毫秒(ms)( 100毫秒=1/10秒)，每次Timer類別所設定的計時器時間(1/10秒)到達時，都會產生屬於ActionEvent類別的事件，而引發動畫測試類別的actionPerformed方法的執行，actionPerformed方法中會將目前影像編號變數加1之後呼叫repaint方法，而repaint方法會於清除繪圖區之後呼叫paint方法以再「畫出」繪圖區之內容，也就是「畫出」目前影像編號變數所指定的影像檔案，如此週而復始的進行，就可以在繪圖區中每秒鐘顯現10個有細微差異的影像檔案(0.gif, 1.gif,…,9.gif)，而造成動畫的視覺效果了。 範例程式8-6使用的事件(event)處理技術將於第十章中有非常詳細的說明，讀者可以於讀完第十章的內容之後，再回到第八章來體會範例程式8-6的寫法，相信屆時會更為清楚程式的執行方式。
Q&A
執行結果
提示 除了影像、音效等多媒體相關檔案的處理之外，Java語言以類別庫javax.media支援許多影片撥放格式，包括AVI 檔案格式(附加檔名.avi)、GSM檔案格式(附加檔名.gsm) 、MPEG-1檔案格式(附加檔名.mpg 或.mpeg)、Apple QuickTime檔案格式(附加檔名.mov)、RMF檔案格式(附加檔名.rmf)、RTP檔案格式(附加檔名.rtp)及Vivo檔案格式(附加檔名.viv)等。
執行結果
執行結果
註解 URL: 我們使用URL(uniform resource locator一致資源定址，或稱universal resource locator通用資源定址)以取得Internet網際網路上的資料，一個URL一般是指向一個檔案或目錄。例如， http://www.ncsa.uiuc.edu/demoweb/url-primer.html 就是一個典型的URL，這個URL指出利用HTTP通訊協定可以取得www.ncsa.uiuc.edu主機上的demoweb目錄中的url-primer.html檔案(讀者恰好可以透過這個URL於瀏覽器中瀏覽有關URL的一些說明)。
提示 所謂GIF指的是Graphics Interchange Format(圖形交換格式)，著名的GIF89a格式，支援256色彩、透明色(transparency color)、交錯影像(interlaced image)、動畫(animation)影像等。 所謂JPG指的是Joint Photographic Experts Group(聯合影像專家小組格式)，JPG格式，支援全彩(1677萬色)、並有極高的資料壓縮率。
執行結果
提示 在電腦使用的監視器中用三種光源的強弱來組合出所有的顏色，三種光原色分別為R(Red)紅色、G(Green)綠色、B(Blue)藍色，這稱為RGB色彩模式。
提示 字型的大小點數為72點等於1英吋之長度。
執行結果
執行結果