GWT - 影像部件

介紹

Image 部件在給定的 URL 上顯示影像。影像部件可以處於“未裁剪”模式（預設模式）或“裁剪”模式。在裁剪模式下，會在影像頂部疊加一個視口，以便顯示影像的一部分。在未裁剪模式下，沒有視口 - 將顯示整個影像。方法的操作方式將根據影像所在的模式而有所不同。這些差異在每種方法的文件中都有詳細說明。

類宣告

以下是 com.google.gwt.user.client.ui.Image 類的宣告 -

public class Image
   extends Widget
      implements SourcesLoadEvents, HasLoadHandlers, 
         HasErrorHandlers, SourcesClickEvents, 
            HasClickHandlers, HasAllMouseHandlers, 
               SourcesMouseEvents

CSS 樣式規則

以下預設 CSS 樣式規則將應用於所有 Image 部件。您可以根據需要覆蓋它。

.gwt-Image { }

類建構函式

序號	建構函式 & 描述
1	Image() 建立一個空影像。
2	protected Image(Element element) 子類可以使用此建構函式顯式使用現有元素。
3	Image(java.lang.String url) 使用指定的 url 建立一個影像。
4	Image(java.lang.String html, int left, int top, int width, int height) 建立一個具有指定 URL 和可見性矩形的裁剪影像。

類方法

序號	函式名稱 & 描述
1	void addClickListener(ClickListener listener) 新增一個監聽器介面以接收點選事件。
2	void addLoadListener(LoadListener listener) 新增一個監聽器介面以接收載入事件。
3	void addMouseListener(MouseListener listener) 新增一個監聽器介面以接收滑鼠事件。
4	void addMouseWheelListener(MouseWheelListener listener) 獲取此部件的父面板。
5	int getHeight() 獲取影像的高度。
6	int getOriginLeft() 獲取影像可見性矩形左上角頂點的水平座標。
7	int getOriginTop() 獲取影像可見性矩形左上角頂點的垂直座標。
8	java.lang.String getUrl() 獲取影像的 URL。
9	int getWidth() 獲取影像的寬度。
10	void onBrowserEvent(Event event) 移除之前新增的監聽器介面。
11	static void prefetch(java.lang.String url) 導致瀏覽器預取給定 URL 上的影像。
12	void removeClickListener(ClickListener listener) 此方法在部件將從瀏覽器的文件中分離之前立即呼叫。
13	void removeLoadListener(LoadListener listener) 移除之前新增的監聽器介面。
14	void removeMouseListener(MouseListener listener) 移除之前新增的監聽器介面。
15	void removeMouseWheelListener(MouseWheelListener listener) 移除之前新增的監聽器介面。
16	void setUrl(java.lang.String url) 設定要顯示的影像的 URL。
17	void setUrlAndVisibleRect(java.lang.String url, int left, int top, int width, int height) 同時設定影像的 url 和可見性矩形。
18	void setVisibleRect(int left, int top, int width, int height) 設定影像的可見性矩形。
19	static Image wrap(Element element) 建立一個包裝現有 <img> 元素的 Image 部件。

繼承的方法

此類繼承自以下類 -

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
java.lang.Object

影像部件示例

此示例將引導您完成簡單的步驟，以演示如何在 GWT 中使用影像部件。

以下步驟更新我們在GWT - 建立應用章節中建立的 GWT 應用 -

步驟	描述
1	在GWT - 建立應用章節中說明的包com.tutorialspoint下建立一個名為HelloWorld的專案。
2	修改HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html和HelloWorld.java，如下所述。保持其餘檔案不變。
3	編譯並執行應用程式以驗證已實現邏輯的結果。

以下是修改後的模組描述符src/com.tutorialspoint/HelloWorld.gwt.xml的內容。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

以下是修改後的樣式表文件war/HelloWorld.css的內容。

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

以下是修改後的 HTML 宿主檔案war/HelloWorld.html的內容。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Image Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

讓我們以下面的 Java 檔案src/com.tutorialspoint/HelloWorld.java內容為例，演示 Image 部件的使用。

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      // Create a Image widget 
      Image image = new Image();

      //set image source
      image.setUrl("https://tutorialspoint.tw/images/gwt-mini.png");

      // Add image to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.add(image);

      RootPanel.get("gwtContainer").add(panel);
   }
}

完成所有更改後，讓我們像在GWT - 建立應用章節中一樣，在開發模式下編譯並執行應用程式。如果您的應用程式一切正常，這將產生以下結果 -

gwt_basic_widgets.htm

列印頁面