Question

更改GWT中Image窗口小部件的大小会更改图像元素的大小，但不会在屏幕上重新缩放图像。因此，以下方法无效：

Image image = new Image(myImageResource);
image.setHeight(newHeight);
image.setWidth(newWidth);
image.setPixelSize(newWidth, newHeight);

这是因为GWT通过使用CSS将HTML background-image元素的<img... />设置为图像来实现其Image窗口小部件。

如何让实际图像调整大小？

Answer 1

我看到了this blog entry，它通过使用GWT DataResource而不是ImageResource来解决问题。事实证明，相同的技术实际上将与ImageResource一起使用，如果您按如下方式使用它：

Image image = new Image(myImageResource.getURL());
image.setPixelSize(getLength(), getHeight());

保持宽高比计算如下：

Image image = new Image(myImageResource.getURL());
image.setPixelSize(newWidth, myImageResource.getHeight() * newWidth / myImageResource.getWidth());

从GWT 2.4开始，使用（见here）：

Image image = new Image(myImageResource.getSafeUri());
image.setPixelSize(newWidth, myImageResource.getHeight() * newWidth / myImageResource.getWidth());

Answer 2

如果我们想在UIbinder中做同样的事情。然后从外部资源：

例如我们有资源

@Source("images/logo.png")
ImageResource getLogo();

在UiBinder模板中声明<ui:with>元素：

<ui:with field='res' type='com.myapp.client.Resources'/>

及以下：

<g:Image url='{res.getLogo.getSafeUri.asString}'  pixelSize="Width, Height" />

旧版GWT中的

：

<g:Image url='{res.getLogo.getURL}'  pixelSize="Width, Height" />

但现在 - 已弃用。

不要使用：

<g:Image resource='{res.getLogo}' pixelSize="Width, Height" />

因为它不能缩放图像

Answer 3

尝试图像加载器小部件http://code.google.com/p/gwt-image-loader FitImage类提供您要查找的内容。

PS：也适用于问题的补丁，因为我修复了一些小错误

Answer 4

我的最终解决方案是在图像上添加一个加载处理程序，以根据加载图像的尺寸调整大小（即尊重比率）。

image.addLoadHandler(new LoadHandler() {
        @Override
        public void onLoad(LoadEvent event) {
            Element element = event.getRelativeElement();
            if (element == image.getElement()) {
                int originalHeight = image.getOffsetHeight();
                int originalWidth = image.getOffsetWidth();
                if (originalHeight > originalWidth) {
                    image.setHeight(MAX_IMAGE_HEIGHT + "px");
                } else {
                    image.setWidth(MAX_IMAGE_WIDTH + "px");
                }
            }
        }
    });

其中MAX_IMAGE_WIDTH和MAX_IMAGE_HEIGHT是确定图像允许的最大大小的常量。

Answer 5

我编写了一个接受ImageResource对象的类，您可以设置Image的所需像素大小。它使用CSS background-Position和CSS background-size来实现目标：

ScalableImage类的源代码是：

package de.tu_freiberg.informatik.vonwenckstern.client;
// class is written by Michael von Wenckstern, and is also used in ist diploma Thesis
// (this is only for my super visor, that he does not think I copied it from stackoverflow
// without mention the source) - this class is free to use for every body

import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Image;

public class ScalableImage extends Image {
    private int width;
    private int height;
    private ImageResource res;

    public ScalableImage(ImageResource res, int width, int height) {
        this.setUrl(res.getSafeUri());
        this.res = res;
        this.width = width;
        this.height = height;
    }

    @Override
    public void onLoad() {
        int widthOfBigImage = this.getOffsetWidth();
        int heightOfBigImage = this.getOffsetHeight();
        double scaleX = width / res.getWidth();
        double scaleY = height / res.getHeight();
        this.setResource(res);
        DOM.setStyleAttribute(getElement(), "backgroundPosition", Integer.toString((int) (res.getLeft() * -1 * scaleX))+"px "+
                Integer.toString((int) (res.getTop() * -1 * scaleY))+"px ");
        DOM.setStyleAttribute(getElement(), "backgroundSize", Integer.toString((int) (widthOfBigImage * scaleX))+"px "+
                Integer.toString((int) (heightOfBigImage * scaleY))+"px ");
        this.setPixelSize((int) (res.getWidth()* scaleX), (int) (res.getHeight() * scaleY));
    }
}

您可以按照以下方式使用此课程：

rootPanel.add(new ScalableImage(Images.Util.getImages().img0(), 60, 60));

如果将此类与PushButton一起使用，则必须将PushButton添加到RootPanel，否则不会调用onLoad（）函数。示例源代码如下所示：

for(ImageResource imRes: latexIconsClientBundle) {
            ScalableImage im = new ScalableImage(imRes, 60, 60);
            RootPanel.get().add(im); // PushButton class does not fire onAttach event, so we need to attach the image to the RootPanel
            PushButton btn = new PushButton(im);
            btn.setPixelSize(60, 60);
            if(++col > 9) {
                row++;
                col = 0;
            }
            this.setWidget(row, col, btn);
        }

Answer 6

以下是我使用canvas元素使用HTML5缩放图像的方法。

http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5

布兰登唐纳森 http://gwt-examples.googlecode.com http://c.gawkat.com

Answer 7

从我的所有测试中，safeURI只有在你的包中有一个图像才能工作......因为你有一个cache.png所以没有使用它，所以没有优化！

在GWT中缩放图像

7 个答案: