22

在 GWT 中更改Image Widget 的大小会更改图像元素的大小,但不会重新缩放屏幕上的图像。因此,以下内容将不起作用:

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

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

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

4

7 回答 7

34

我看到了这个博客条目,它通过使用 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 开始,使用(参见此处):

Image image = new Image(myImageResource.getSafeUri());
image.setPixelSize(newWidth, myImageResource.getHeight() * newWidth / myImageResource.getWidth());
于 2010-02-14T07:49:03.280 回答
11

如果我们想在 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" />

因为它不缩放图像

于 2012-04-26T13:03:17.737 回答
3

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

PS:也应用问题的补丁,因为我已经修复了一些小错误

于 2010-02-17T09:14:52.927 回答
3

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

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_WIDTHMAX_IMAGE_HEIGHT是确定图像最大允许大小的常量。

于 2010-10-27T09:37:17.330 回答
1

我编写了一个接受 ImageResource 对象的类,您可以设置所需的图像像素大小。它使用 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);
        }
于 2013-02-26T21:30:13.427 回答
0

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

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

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

于 2011-03-25T14:16:35.903 回答
0

从我所有的测试来看,只有当你的包中有一个图像时,safeURI 才有效......所以使用它没有用,因为你有一个 Bundle 的 cache.png,所以它什么都不优化!

于 2013-05-25T10:51:04.850 回答