GWT - Image 小部件

简介

Image 图像小部件显示给定 URL 处的图像。图像小部件可以处于"未剪辑"模式(默认模式)或"剪辑"模式。在剪辑模式下，视口覆盖在图像顶部，以便显示图像的子集。在未剪辑模式下，没有视口 - 整个图像将可见。方法将根据图像所处的模式以不同的方式运行。这些差异在每种方法的文档中有详细说明。

类声明

以下是 com.google.gwt.user.client.ui.Image 类的声明 −

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

CSS 样式规则

以下默认 CSS 样式规则将应用于所有图像小部件。您可以根据需要覆盖它。

.gwt-Image { }

类构造函数

Sr.No.	构造函数 &描述
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 和可见性矩形的剪辑图像。

类方法

Sr.No.	函数名称 &描述
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左侧，int 顶部，int 宽度，int 高度) 设置图像的可见性矩形。
19	静态图像包装(元素元素) 创建一个包装现有 <img> 元素的图像小部件。

继承的方法

该类继承了以下类的方法 −

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

图像小部件示例

此示例将带您完成一些简单的步骤，展示如何在 GWT 中使用图像小部件。

按照以下步骤更新我们在 GWT - 创建应用程序 一章中创建的 GWT 应用程序 −

步骤	描述
1	在 com.tutorialspoint 包下创建一个名为 HelloWorld 的项目，如 GWT - 创建应用程序一章中所述。
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() {
    // 创建图像小部件
    Image image = new Image();
    
    //设置图像源
    image.setUrl("http://www.tutorialspoint.com/images/gwt-mini.png");
    
    // 将图像添加到根面板。
    VerticalPanel panel = new VerticalPanel();
    panel.add(image);
    
    RootPanel.get("gwtContainer").add(panel);
   }
}

完成所有更改后，让我们像在 GWT - 创建应用程序一章中一样，在开发模式下编译并运行应用程序。如果您的应用程序一切正常，这将产生以下结果 −