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.com/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

打印页面