SetVisibleRect 弄乱了图像（gwt）

Question

所以我在 gwt 中有一个程序，它在右侧列出了几张图像，当鼠标悬停在其中一张上时，一些附加信息会显示在左侧的自定义小部件中，包括图像的一部分和特殊背景，它是更大的背景图像本身的一部分，对于取决于图像的小部件。

到目前为止一切正常，两张图片基本上都显示正确。然而，背景图像在左上角有 "broken image"-图标，即使它显示完美，并且每当我将鼠标悬停在右侧的另一个图像上时也会更新。不过，真正重要的是，我悬停的图像部分仅在背景图像加载前一瞬间显示，因为背景图像会覆盖另一幅图像。省略背景会导致图像的一部分正常显示，但也会显示 "broken image"-icon。不在两个图像上使用 setVisibleRect() 可以让一切正常工作，但显示的图像当然是错误的。到目前为止，这是我来自自定义小部件的代码，用于显示悬停在图像上的所需部分：

public void setBild(Image bild) {
    this.bild.setUrl(bild.getUrl());
    this.bild.setVisibleRect(38,61,134,94);
    this.bild.getElement().getStyle().setZIndex(2);
}

其中 this.bild 是我的自定义小部件中的图像。

同样在根据一些信息获取背景的方法中，我有：

        if(!hintergrund.isAttached()){
        this.add(hintergrund);
        this.setWidgetLeftWidth(hintergrund, 0, Unit.PX, 230, Unit.PX);
        this.setWidgetTopHeight(hintergrund, 0, Unit.PX, 650, Unit.PX);
    }



    if(k.getFarbe().equals("rot")) hintergrund.setVisibleRect(460, 0, 230, 650);
    if(k.getFarbe().equals("hell")) hintergrund.setVisibleRect(230, 0, 230, 650);
    if(k.getFarbe().equals("braun")) hintergrund.setVisibleRect(0, 0, 230, 650);
    if(k.getFarbe().equals("grun")) hintergrund.setVisibleRect(0, 650, 230, 650);
    if(k.getFarbe().equals("grau")) hintergrund.setVisibleRect(230, 650, 230, 650);
    if(k.getFarbe().equals("lila;braun")) hintergrund.setVisibleRect(460, 650, 230, 650);

    hintergrund.getElement().getStyle().setZIndex(1);

其中 hintergrund 是背景图像。

当我将鼠标悬停在图像上时，我的编译器会给我消息

[WARN] 404 - GET /labyrinthweb/clear.cache.gif (127.0.0.1) 1393 bytes


Request headers
      Host: 127.0.0.1:8888
      User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0
      Accept: image/png,image/*;q=0.8,*/*;q=0.5
      Accept-Language: en-US,en;q=0.5
      Accept-Encoding: gzip, deflate
      Referer: http://127.0.0.1:8888/LabyrinthWeb.html
      Cookie: optionen=310; JSESSIONID=vyr356eyxfph1lzazwqw8rkn8
      Connection: keep-alive
   Response headers
      Content-Type: text/html;charset=ISO-8859-1
      Cache-Control: must-revalidate,no-cache,no-store
      Content-Length: 1393

我也声明了

<script type="text/javascript" language="javascript" 
src="labyrinthweb/labyrinthweb.nocache.js"></script>

在我的 html-文件中，并在我的 *.gwt.xml-文件中将我的模块重命名为 labyrinthweb。

有人可以帮我吗？

Answer 1

这就是 Image 小部件的工作原理：它的 url 属性指向默认的 1x1 像素透明 gif。为了能够进行图像裁剪（和其他操作），真实图像显示为小部件的背景。 setVisibleRect 这样做很容易，小部件只需设置 background-position 属性并更改大小。

你的问题是你错过了默认的透明 gif clear.cache.gif:

[WARN] 404 - GET /labyrinthweb/clear.cache.gif (127.0.0.1) 1393 bytes

这就是为什么您会在图片上方看到 broken-image 图标的原因。

clear.cache.gif 应该位于 war\module_name 文件夹中，并在每次编译项目时复制到那里。所以你应该尝试以下方法：

重新编译项目
检查 clear.cache.gif 是否在 war\module_name 文件夹中
清除浏览器缓存

希望对您有所帮助。

Answer 2

另一个 gwt 重新编译实际上修复了所有问题:)

SetVisibleRect 弄乱了图像（gwt）

SetVisibleRect messes with the image (gwt)

html

javascript

java

gwt

image