0
  • 在帖子底部回答

我创建了一个网站，该网站显示了许多图像并将它们绘制在画布上。这些图像是 PreloadedImage 实例，并在其加载事件上触发 draw 方法。这在 Chrome 中运行良好，但在 Internet Explorer 中，当使用 PreloadedImage.getWidth() 或 getOffsetWidth() 或通过 getElement().getStyle().getWidth() 要求时（在 Chrome 中，它们的宽度是正确的），它们的宽度为 0 ...

在 Eclipse 中检查 PreloadedImage 的实例时，我可以看到元素确实具有正确的宽度和高度，但是当 GWT 请求它时，结果为零，导致绘制不正确。

有任何想法吗？

  • 编辑 1：通过使用计时器等待加载完成来尝试：

我快速尝试等待图像渲染，但似乎根本没有加载：

currentImage = new PreloadedImage();
currentImage.addLoadHandler(new LoadHandler() {
   @Override
   public void onLoad(LoadEvent event) {
       Timer timer = new Timer() {
           @Override
           public void run() {
           System.out.println("timer check: width: " +currentImage.getWidth());
              if(currentImage.getWidth()>0) {
                  //draw the image
                  this.cancel();
              }
           }
        };
        timer.scheduleRepeating(100);
    }
});
  • 编辑2：更多信息：

加载图像后，在绘图之前，我会请求其尺寸。检查 currentImage（PreloadedImage 的实例）时，toString 方法返回以下内容：

<img aria-hidden="true" 
style="display: none; visibility: hidden;" 
class="PRELOADEDIMAGE" 
src="/imageservlet?filename=1368280253128&amp;height=1000" width="1505" height="1000">

请注意，宽度和高度设置正确。但是，当请求以下内容时：

currentImage.getWidth()
currentImage.getOffsetWidth()
String heightattr = e.getAttribute("height");

我始终得到零结果。我怀疑与符号的编码有问题，但 Internet Explorer 处理它的方式与 Chrome 相同（最后，相同的 url 用于获取图像，这是正确的）。

4

3 回答 3

2

我遇到了同样的问题，我无法在 IE 中获取不可见图像的尺寸。

您必须使其可见，获取宽度和高度并再次将其隐藏（这就是您所做的，但是以更简单的方式）。

    Image img = new Image(imgData);
    img.setVisible(false);
    contentPane.add(img);
    img.addLoadHandler(new LoadHandler() {
        @Override
        public void onLoad(LoadEvent event) {
            img.setVisible(true); //make it visible just to work on IE
            int original_width = img.getWidth();
            int original_height = img.getHeight();

            img.setVisible(false); // hide it again

            //other stuff here
        }
    });
于 2013-11-26T14:58:09.353 回答
0

好吧，傻，在这个问题上辛苦了几个小时并发布了问题之后，我或多或少地直接找到了答案：把

this.getElement().getStyle().setDisplay(Display.BLOCK);

在任何维度调用和

this.getElement().getStyle().setDisplay(Display.NONE);

如果有必要，在它之后，IE 就能够检索正确的宽度。

于 2013-05-31T13:25:58.260 回答
0

在图像上使用加载事件可能会很痛苦。我过去也遇到过类似的问题。我认为我使用的解决方案是放置一个 setTimeout(function(){...}, 10); 在 onLoad 函数中。它让浏览器有时间渲染图像并获得正确的尺寸

于 2013-05-12T13:29:27.507 回答