Image

优质

小牛编辑

162浏览

2023-12-01

介绍 (Introduction)

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

Class 声明 (Class Declaration)

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

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

CSS样式规则 (CSS Style Rules)

以下默认CSS样式规则将应用于所有Image小部件。您可以根据自己的要求覆盖它。

.gwt-Image { }

类构造函数 (Class Constructors)

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和可见性矩形创建剪切图像。

Class Methods

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 left, int top, int width, int height) 设置图像的可见性矩形。
19	static Image wrap(Element element) 创建一个包装现有元素的Image小部件。

方法继承 (Methods Inherited)

该类继承以下类中的方法 -

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

图像小部件示例

此示例将指导您完成在GWT中显示Image Widget的使用的简单步骤。

以下步骤更新我们在GWT - Create Application的GWT应用程序GWT - Create Application章节 -

步	描述
1	在com. 包下创建一个名为HelloWorld的项目，如GWT - Create Application一章中所述。
2	修改HelloWorld.gwt.xml ， HelloWorld.css ， HelloWorld.html和HelloWorld.java ，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证实现的逻辑的结果。

以下是修改后的模块描述符src/com.

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

/HelloWorld.java ，它将演示Image小部件的使用。

package com..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("http://www..com/images/gwt-mini.png");
      // Add image to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.add(image);
      RootPanel.get("gwtContainer").add(panel);
   }
}

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