Question

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

到目前为止一切正常，两张图片基本上都正确显示。然而，背景图像在左上角有“破碎的图像” - 图形，即使它完美显示，并且每当我将鼠标悬停在右边的另一个图像上时也会更新。然而，真正重要的是，我在上面悬停的图像部分仅在加载背景图像之前显示一秒钟，因为背景图像将覆盖另一个图像。离开背景会导致图像的一部分正常显示，但也会显示“破碎的图像” - 图像。不在两个图像上使用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）

2 个答案: