如何建立一個 swing 元件 -- 以 imagecomponent 為例

16
如如如如 swing 如如 -- 如 ImageComponent 如如 如如如

Upload: nyoko

Post on 20-Jan-2016

39 views

Category:

Documents


0 download

DESCRIPTION

如何建立一個 swing 元件 -- 以 ImageComponent 為例. 井民全. Step 1: 繼承 javax.swing.JComponent. javax.swing.JComponent. 要將你的元件秀在 frame 中 . 元件必須是 Jcomponent 的一種. 你的元件. 繼承 UML 表示圖. class ImageComponent extends JComponent { // … }. Step 2: 加入兩個必要的 methods. 為了要讓 layout 管理器得知你 物件的大小 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

如何建立一個 swing 元件-- 以 ImageComponent 為例

井民全

Page 2: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

Step 1:繼承 javax.swing.JComponent

要將你的元件秀在 frame 中 . 元件必須是 Jcomponent 的一種 .

javax.swing.JComponent

你的元件

class ImageComponent extends JComponent { // …}

繼承 UML 表示圖

Page 3: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

Step 2:加入兩個必要的 methods

為了要讓 layout 管理器得知你物件的大小 public Dimension getPreferredSize()

顯示你的物件外觀 public void paint(Graphics g)

javax.swing.JComponent

你的元件

getPreferedSize()Paint(Graphics g)

類別圖

Page 4: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

實作 methodsclass ImageComponent extends JComponent { public Dimension getPreferredSize(){ return new Dimension(Width,Height) }

}

java.awt.Dimension

public void paint(Graphics g){ // 畫出 Image ( 現在先以簡單的圖代替 ) g.drawRect(10,10,100,100);}

Page 5: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

Step 3: 如何把元件加入容器

建立 JFrame File -> new -> JFrame 取出容器getContentPane()把元件加到容器中getContentPane().add( 你的元件 )

javax.swing.JFrame

MyFrame

類別圖

Page 6: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

MyFrame 實作class MyFrame extends javax.swing.JFrame { public void Assign(ImageComponent Image) {

this.getContentPane().add(Image);pack();this.show();

}}

把元件加入容器中依據元件的大小自動設定Frame 的 size

注意 : 如果你不加上 this.show()

圖形將不會秀出

Page 7: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

測試你的元件

void main(String args[]){ MyFrame frame1 = new MyFrame ();

ImageComponent image=new ImageComponent(); MyFrame.Assign(image);}

程式範例 : Step1

MyFrameImage

depend ImageComponent

getPreferedSize()Paint(Graphics g)

Page 8: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

測試你的元件– 加入一堆物件 ( 新增 )

ImageComponent1

ImageComponent2

MyFrame

你需要一個物件幫你管理物件如何排列 !!

如何設定管理物件 ? VerticalFlowLayout Layout=new VerticalFlowLayout() this->getContentPane().setLayout( Layout );

Page 9: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

測試你的元件– 加入一堆物件 ( 新增 )class MyFrame extends javax.swing.JFrame { VerticalFlowLayout Layout=new VerticalFlowLayout();

public MyFrame() { this->getContentPane().setLayout( Layout ); }

public void Assign(ImageComponent Image) {

this.getContentPane().add(Image);pack();this.show();

}}

Page 10: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

測試你的元件– 加入一堆物件 ( 新增 )void main(String args[]){ MyFrame frame1 = new MyFrame ();

ImageComponent image=new ImageComponent(); MyFrame.Assign(image); ImageComponent image2=new ImageComponent(); MyFrame.Assign(image2);}

Page 11: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

利用 interface-- 處理必要的 methods

進階的內容

Page 12: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

好了 , 如何加入 Image

從檔案讀取 Image 利用 Toolkit 取得 image 物件

建立 MediaTracker 等待 image 下載

當 image 準備好後 , 利用 PixelGrabber 把資料讀進來

java.awt.image image;image=Toolkit.getDefaultToolkit().getImage(filename);

java.awt.Toolkit

Page 13: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

建立 MediaTracker -- 等待 image 下載

// 等待 Image 載入

MediaTracker mt=new MediaTracker(this);mt.addImage(image,0);try{

mt.waitForAll();}catch(InterruptedException e) {

throw new Exception(" 載入圖形錯誤 ");}

java.awt.MediaTracker

圖形 id

Page 14: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

利用 PixelGrabber 把資料讀進來

// 取得 image 的圖素Height=image.getHeight(null); width=image.getWidth(null);int [] pixels=new int[Height*Width];

PixelGrabber pg=new PixelGrabber(image,0,0,Width,Height,pixels,0,Width);

try{pg.grabPixels();

}catch(InterruptedException e) {}

java.awt.image.*;

指定讀取方框

Page 15: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

ARGB Color Model

Alpha Red Green Blue31 24 23 16 15 8 7 0

Int type 32 bits

Red Value = 0xf & (p >>16);Green Value = 0xff & (p>>8);Blue Value = 0xff & p

Page 16: 如何建立一個 swing 元件 -- 以 ImageComponent 為例

整合在一起

See Project “Step2”: LoadFromFile(…) method