SetVisibleRect 与图像混淆（gwt）答案

【问题标题】：SetVisibleRect messes with the image (gwt)SetVisibleRect 与图像混淆（gwt）
【发布时间】：2016-05-28 16:56:44
【问题描述】：

所以我在 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。

有人可以帮帮我吗？

【问题讨论】：

标签： javascript java html image gwt

【解决方案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文件夹中
清除浏览器缓存

我希望这会有所帮助。

【讨论】：

【解决方案2】：

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

【讨论】：