王之泰201771010131《面向物件程式設計(java)》第十二週學習總結
第一部分:理論知識學習部分
第10章 圖形程式設計
10.1 AWT與Swing簡介
1.使用者介面(User Interface) 的概念:使用者與計算機系統(各種程式)互動的介面
2.圖形使用者介面(Graphical User Interface)的概念: 以圖形方式呈現的使用者介面
3.AWT:
a. Java的抽象視窗工具箱(AbstractWindow Toolkit,AWT)包含在java.awt包中,它提供了許 多用來設計GUI的元件類和容器類。
b. AWT庫處理使用者介面元素的方法:把圖形元素的創 建和行為委託給本地GUI工具箱進行處理。
c. 應用AWT編寫依賴於本地使用者介面元素GUI會暴露 出一些缺陷。例如,選單、滾動條和文字域這些 使用者介面元素,在不同的平臺上,操作行為上存 在一些微妙的差異。
4. Swing
a. Swing使用者介面庫是非基於對等體的GUI工具箱。
b.Swing具有更豐富並且更方便的使用者介面元素集合。
c.Swing對底層平臺的依賴很少,因此與平臺相關的bug很少。
d.Swing會帶來交叉平臺上的統一視覺體驗。
e.Swing類庫被放在javax.swing包裡。
f. AWT與Swing的關係
(1) 大部分AWT元件都有其Swing的等價元件。
(2) Swing元件的名字一般是在AWT元件名前面新增一個字母“J”,如:JButton,JFrame,JPanel等。
10.2 框架的建立
10.2.1 元件
構成圖形使用者介面的元素,拿來即用 .
用圖形表示(能在螢幕上顯示,能和使用者進行互動) –Button、Checkbox、Scrollbar、Choice、Frame
10.2.2 容器
容器是Java中能容納和排列元件的元件。
常用的容器是框架(Frame,JFrame) 例: Frame fra= new Frame(“這是一個視窗”);
java.awt.Frame類的常用API(教材414頁) void setResizable(booleanb) 縮放框架 void setTitle(String s) 設定框架標題 void setIconImage(Image image) 將Image用 作框架圖示
10.2.3 新增元件
Container類提供了一個方法add(),用來在容器類 元件物件中新增其他元件。
容器本身也是一個元件,可以把一個容器新增到 另一個容器裡,實現容器巢狀。
10.2.4 框架(Frame)的建立
(1)建立空框架 :在Java中,常採用框架(Frame)建立初始介面, 即GUI的頂層視窗
AWT庫中有一個基於對等體的Frame類。 該類的Swing版本為JFrame,JFrame是Frame子類。
(2)框架定位與框架屬性
定位: 常用Component類的setLocation和setBounds方法 常用屬性
Title:框架標題
IconImage:框架圖示
(3)確定框架大小 : 通過呼叫Toolkit類的方法來得到螢幕尺寸資訊。
Toolkit kit = Toolkit.getDefaultToolkit(); //生成 Toolkit物件
Dimension screenSize= kit.getScreenSize(); //返回 Dimension物件的螢幕大小
intscreenWidth= screenSize.width; //獲得Dimension對 象螢幕的寬度
intscreenHeight=screenSize.height; //獲得Dimension 物件螢幕的高度
10.3 圖形程式設計
圖形程式設計這部分內容會在實驗中有所體現。
包含以下特點:
1 處理2D圖形
2 顏色的使用
2 字型的使用
10.4顯示影象
(1)在Java應用程式中,一旦影象儲存在本地或因 特網的某個位置上,就可以將它們直接讀入到java 應用程式中。
String filename = “…”; Image image= ImageIcon(filename).getImage();
(2)完成將一個影象檔案載入到程式中,再呼叫 Graphics類提供的DrawImage()顯示它。
public void paintComponent(Graphics g)
{ … g.drawImage(image, x, y, null); }
第二部分:實驗部分—— 圖形程式設計
實驗時間 2018-11-14
1、實驗目的與要求
(1) 掌握Java GUI中框架建立及屬性設定中常用類的API;
(2) 掌握Java GUI中2D圖形繪製常用類的API;
(3) 瞭解Java GUI中2D圖形中字型與顏色的設定方法;
(4) 瞭解Java GUI中2D影象的載入方法。
2、實驗內容和步驟
實驗1: 匯入第10章示例程式,測試程式並進行程式碼註釋。
測試程式1:
1.執行下列程式,觀察程式執行結果。
1 import javax.swing.*; 2 public class SimpleFrameTest 3 { 4 public static void main(String[] args) 5 { 6 JFrame frame = new JFrame(); 7 frame.setBounds(0, 0,300, 200); 8 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 9 frame.setVisible(true); 10 } 11 }
結果如下:
2.在elipse IDE中除錯執行教材407頁程式10-1,結合程式執行結果理解程式;與上面程式對比,思考異同;
1 package simpleFrame; 2 3 import java.awt.*; 4 import javax.swing.*; 5 6 /** 7 * @version 1.33 2015-05-12 8 * @author Cay Horstmann 9 */ 10 public class SimpleFrameTest 11 { 12 public static void main(String[] args) 13 { 14 EventQueue.invokeLater(() -> 15 { 16 SimpleFrame frame = new SimpleFrame(); 17 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 18 frame.setVisible(true); 19 }); 20 } 21 } 22 23 class SimpleFrame extends JFrame 24 { 25 private static final int DEFAULT_WIDTH = 300; 26 private static final int DEFAULT_HEIGHT = 200; 27 28 public SimpleFrame() 29 { 30 setSize(DEFAULT_WIDTH, DEFAULT_HEIGHT); 31 } 32 }
結果如下:
3.掌握空框架建立方法;
4.瞭解主執行緒與事件分派執行緒概念;
5.掌握GUI頂層視窗建立技術。
測試程式2:
1.在elipse IDE中除錯執行教材412頁程式10-2,結合程式執行結果理解程式;
2.掌握確定框架常用屬性的設定方法。
1 package sizedFrame; 2 3 import java.awt.*; 4 import javax.swing.*; 5 6 /** 7 * @version 1.34 2015-06-16 8 * @author Cay Horstmann 9 */ 10 public class SizedFrameTest 11 { 12 public static void main(String[] args) 13 { 14 EventQueue.invokeLater(() -> 15 { 16 JFrame frame = new SizedFrame(); 17 frame.setTitle("SizedFrame"); 18 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 19 frame.setVisible(true); 20 }); 21 } 22 } 23 24 class SizedFrame extends JFrame 25 { 26 public SizedFrame() 27 { 28 // 獲取螢幕尺寸 29 30 Toolkit kit = Toolkit.getDefaultToolkit(); 31 Dimension screenSize = kit.getScreenSize(); 32 int screenHeight = screenSize.height; 33 int screenWidth = screenSize.width; 34 35 // 設定框架寬度、高度並讓平臺選擇螢幕位置 36 37 setSize(screenWidth / 2, screenHeight / 2); 38 setLocationByPlatform(true); 39 40 // 設定幀圖示 41 42 Image img = new ImageIcon("icon.gif").getImage(); 43 setIconImage(img); 44 } 45 }
結果如下:
測試程式3:
1.在elipse IDE中除錯執行教材418頁程式10-3,結合執行結果理解程式;
2.掌握在框架中新增元件;
3.掌握自定義元件的用法。
1 package notHelloWorld; 2 3 import javax.swing.*; 4 import java.awt.*; 5 6 /** 7 * @version 1.33 2015-05-12 8 * @author Cay Horstmann 9 */ 10 public class NotHelloWorld 11 { 12 public static void main(String[] args) 13 { 14 EventQueue.invokeLater(() -> 15 { 16 JFrame frame = new NotHelloWorldFrame(); 17 frame.setTitle("NotHelloWorld"); 18 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 19 frame.setVisible(true); 20 }); 21 } 22 } 23 24 /** 25 * A frame that contains a message panel 26 */ 27 class NotHelloWorldFrame extends JFrame 28 { 29 public NotHelloWorldFrame() 30 { 31 add(new NotHelloWorldComponent()); 32 pack(); 33 } 34 } 35 36 /** 37 * A component that displays a message. 38 */ 39 class NotHelloWorldComponent extends JComponent 40 { 41 public static final int MESSAGE_X = 75; 42 public static final int MESSAGE_Y = 100; 43 44 private static final int DEFAULT_WIDTH = 300; 45 private static final int DEFAULT_HEIGHT = 200; 46 47 public void paintComponent(Graphics g) 48 { 49 g.drawString("Not a Hello, World program", MESSAGE_X, MESSAGE_Y); 50 } 51 52 public Dimension getPreferredSize() { return new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT); } 53 }
結果如下:
測試程式4:
1.在elipse IDE中除錯執行教材424 -425頁程式10-4,結合程式執行結果理解程式;
2.掌握2D圖形的繪製方法。
1 package draw; 2 3 import java.awt.*; 4 import java.awt.geom.*; 5 import javax.swing.*; 6 7 /** 8 * @version 1.33 2007-05-12 9 * @author Cay Horstmann 10 */ 11 public class DrawTest 12 { 13 public static void main(String[] args) 14 { 15 EventQueue.invokeLater(() -> 16 { 17 JFrame frame = new DrawFrame(); 18 frame.setTitle("DrawTest"); 19 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 20 frame.setVisible(true); 21 }); 22 } 23 } 24 25 /** 26 * A frame that contains a panel with drawings 27 */ 28 class DrawFrame extends JFrame 29 { 30 public DrawFrame() 31 { 32 add(new DrawComponent()); 33 pack(); 34 } 35 } 36 37 /** 38 * A component that displays rectangles and ellipses. 39 */ 40 class DrawComponent extends JComponent 41 { 42 private static final int DEFAULT_WIDTH = 400; 43 private static final int DEFAULT_HEIGHT = 400; 44 45 public void paintComponent(Graphics g) 46 { 47 Graphics2D g2 = (Graphics2D) g; 48 49 // 繪製矩形 50 51 double leftX = 100; 52 double topY = 100; 53 double width = 200; 54 double height = 150; 55 56 Rectangle2D rect = new Rectangle2D.Double(leftX, topY, width, height); 57 g2.draw(rect); 58 59 // 畫封閉橢圓 60 61 Ellipse2D ellipse = new Ellipse2D.Double(); 62 ellipse.setFrame(rect); 63 g2.draw(ellipse); 64 65 // 畫一條對角線 66 67 g2.draw(new Line2D.Double(leftX, topY, leftX + width, topY + height)); 68 69 // 用同一個中心畫一個圓 70 71 double centerX = rect.getCenterX(); 72 double centerY = rect.getCenterY(); 73 double radius = 150; 74 75 Ellipse2D circle = new Ellipse2D.Double(); 76 circle.setFrameFromCenter(centerX, centerY, centerX + radius, centerY + radius); 77 g2.draw(circle); 78 } 79 80 public Dimension getPreferredSize() { return new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT); } 81 }
結果如下:
測試程式5:
1.在elipse IDE中除錯執行教材432頁-433程式10-5,結合程式執行結果理解程式;
2.瞭解2D圖形中字型的設定的方法;
1 package font; 2 3 import java.awt.*; 4 import java.awt.font.*; 5 import java.awt.geom.*; 6 import javax.swing.*; 7 8 /** 9 * @version 1.34 2015-05-12 10 * @author Cay Horstmann 11 */ 12 public class FontTest 13 { 14 public static void main(String[] args) 15 { 16 EventQueue.invokeLater(() -> 17 { 18 JFrame frame = new FontFrame(); 19 frame.setTitle("FontTest"); 20 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 21 frame.setVisible(true); 22 }); 23 } 24 } 25 26 /** 27 * A frame with a text message component 28 */ 29 class FontFrame extends JFrame 30 { 31 public FontFrame() 32 { 33 add(new FontComponent()); 34 pack(); 35 } 36 } 37 38 /** 39 * A component that shows a centered message in a box. 40 */ 41 class FontComponent extends JComponent 42 { 43 private static final int DEFAULT_WIDTH = 300; 44 private static final int DEFAULT_HEIGHT = 200; 45 46 public void paintComponent(Graphics g) 47 { 48 Graphics2D g2 = (Graphics2D) g; 49 50 String message = "Hello, World!"; 51 52 Font f = new Font("Serif", Font.BOLD, 36); 53 g2.setFont(f); 54 55 // 測量訊息的大小 56 57 FontRenderContext context = g2.getFontRenderContext(); 58 Rectangle2D bounds = f.getStringBounds(message, context); 59 60 // 設定(x,y)=文字左上角 61 62 double x = (getWidth() - bounds.getWidth()) / 2; 63 double y = (getHeight() - bounds.getHeight()) / 2; 64 65 // 增加到Y到達基線 66 67 double ascent = -bounds.getY(); 68 double baseY = y + ascent; 69 70 // 汲取資訊 71 72 g2.drawString(message, (int) x, (int) baseY); 73 74 g2.setPaint(Color.LIGHT_GRAY); 75 76 // 繪製基線 77 78 g2.draw(new Line2D.Double(x, baseY, x + bounds.getWidth(), baseY)); 79 80 // 繪製封閉矩形 81 82 Rectangle2D rect = new Rectangle2D.Double(x, y, bounds.getWidth(), bounds.getHeight()); 83 g2.draw(rect); 84 } 85 86 public Dimension getPreferredSize() { return new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT); } 87 }
結果如下:
測試程式6:
1.在elipse IDE中除錯執行教材436頁-437程式10-6,結合程式執行結果理解程式;
2.瞭解2D圖形影象的顯示方法。
1 package image; 2 3 import java.awt.*; 4 import javax.swing.*; 5 6 /** 7 * @version 1.34 2015-05-12 8 * @author Cay Horstmann 9 */ 10 public class ImageTest 11 { 12 public static void main(String[] args) 13 { 14 EventQueue.invokeLater(() -> 15 { 16 JFrame frame = new ImageFrame(); 17 frame.setTitle("ImageTest"); 18 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 19 frame.setVisible(true); 20 }); 21 } 22 } 23 24 /** 25 * A frame with an image component 26 */ 27 class ImageFrame extends JFrame 28 { 29 public ImageFrame() 30 { 31 add(new ImageComponent()); 32 pack(); 33 } 34 } 35 36 /** 37 * A component that displays a tiled image 38 */ 39 class ImageComponent extends JComponent 40 { 41 private static final int DEFAULT_WIDTH = 300; 42 private static final int DEFAULT_HEIGHT = 200; 43 44 private Image image; 45 46 public ImageComponent() 47 { 48 image = new ImageIcon("blue-ball.gif").getImage(); 49 } 50 51 public void paintComponent(Graphics g) 52 { 53 if (image == null) return; 54 55 int imageWidth = image.getWidth(null); 56 int imageHeight = image.getHeight(null); 57 58 // 在左上角繪製圖像 59 60 g.drawImage(image, 0, 0, null); 61 // 在元件上平鋪影象 62 63 for (int i = 0; i * imageWidth <= getWidth(); i++) 64 for (int j = 0; j * imageHeight <= getHeight(); j++) 65 if (i + j > 0) 66 g.copyArea(0, 0, imageWidth, imageHeight, i * imageWidth, j * imageHeight); 67 } 68 69 public Dimension getPreferredSize() { return new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT); } 70 }
結果如下:
1 package image; 2 3 import java.awt.*; 4 import java.awt.event.WindowAdapter; 5 import java.awt.event.WindowEvent; 6 7 import javax.swing.*; 8 9 /** 10 * @version 1.34 2015-05-12 11 * @author Cay Horstmann 12 */ 13 public class ImageTest 14 { 15 @SuppressWarnings("null") 16 public static void main(String[] args) 17 { 18 EventQueue.invokeLater(() -> 19 { 20 JFrame frame = new ImageFrame(); 21 frame.setTitle("ImageTest"); 22 frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE); 23 frame.setVisible(true); 24 }); 25 26 } 27 28 } 29 30 /** 31 * A frame with an image component 32 */ 33 class ImageFrame extends JFrame 34 { 35 public ImageFrame() 36 { 37 add(new ImageComponent()); 38 pack(); 39 } 40 } 41 42 /** 43 * A component that displays a tiled image 44 */ 45 class ImageComponent extends JComponent 46 { 47 private static final int DEFAULT_WIDTH = 300; 48 private static final int DEFAULT_HEIGHT = 200; 49 50 private Image image; 51 52 public ImageComponent() 53 { 54 image = new ImageIcon("timg.jpg").getImage(); 55 } 56 57 public void paintComponent(Graphics g) 58 { 59 if (image == null) return; 60 61 int imageWidth = image.getWidth(null); 62 int imageHeight = image.getHeight(null); 63 64 // 在左上角繪製圖像 65 66 g.drawImage(image, 0, 0, null); 67 // 在元件上平鋪影象 68 69 for (int i = 0; i * imageWidth <= getWidth(); i++) 70 for (int j = 0; j * imageHeight <= getHeight(); j++) 71 if (i + j > 0) 72 g.copyArea(0, 0, imageWidth, imageHeight, i * imageWidth, j * imageHeight); 73 } 74 75 public Dimension getPreferredSize() { 76 return new Dimension(DEFAULT_WIDTH, DEFAULT_HEIGHT); 77 } 78 }
結果如下:
實驗2:課後完成PTA平臺題目集:2018秋季西北師範大學面向物件程式設計(Java)練習題集(ch6-ch9)
第三部分:總結
通過本週的學習,我瞭解了Java GUI中框架建立及屬性設定中常用類的API; GUI中2D圖形繪製常用類的API;GUI中2D圖形中字型與顏色的設定方法;GUI中2D圖形中字型與顏色的設定方法;以及利用空閒時間複習了一千6-9章的實驗,我覺得能夠很好的設計一個圖形使用者介面的話,對於以後軟體開發的使用者體驗有很大的幫助。畢竟開發的軟體使用者還是廣大使用者。而且通過本週6-9章的習題練習,在回顧知識的同時,讓自己查漏補缺。將知識有效的結合運用。