javascript - SetVisibleRect 使图像困惑(gwt)

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

这就是为什么您会在图像顶部看到图像损坏图标。

clear.cache.gif 应位于 war\module_name 文件夹中，并在每次编译项目时复制到此处。因此，您应该尝试以下操作:

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

我希望这会有所帮助。