在 GWT 中缩放图像

发布于 2024-08-21 15:37:05 字数 443 浏览 4 评论 0原文

更改

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

这是因为 GWT 实现了其 Image 小部件，通过设置 HTML 元素的 background-image作为图像，使用 CSS。

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

原文

Changing the size of an Image Widget in GWT changes the size of the image element, but does not rescale the image on the screen. Therefore, the following will not work:

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

This is because GWT implements its Image widget by setting the background-image of the HTML <img... /> element as the image, using CSS.

How does one get the actual image to resize?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏日浅笑〃 2024-08-28 15:37:05

我看到此博客条目，它解决了使用 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());

I saw this blog entry, which solves the problem by using a GWT DataResource instead of ImageResource. It turns out that the same technique will actually work with ImageResource, if you use it as follows:

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

To keep aspect ratio calculate it like:

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

As of GWT 2.4, use (see here):

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

回复收藏 0 原文

白云悠悠 2024-08-28 15:37:05

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

例如，我们在资源

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

中在 UiBinder 模板中声明元素：

<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" />

因为它不会缩放图像

If we want to do the same in UIbinder. From an external resource then :

For example we have in recource

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

In UiBinder template declare the <ui:with> element:

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

and below:

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

in older GWT version:

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

but now - Deprecated.

Do not use:

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

becouse it doesn't scale images

回复收藏 0 原文

往日 2024-08-28 15:37:05

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

PS：还应用问题中的补丁，因为我已经修复了一些小错误

回复收藏 0 原文

负佳期 2024-08-28 15:37:05

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

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

my final solution was to add a load handler on the image to resize it according to the dimensions of the loaded image (i.e. respectnig the ratio).

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");
                }
            }
        }
    });

where MAX_IMAGE_WIDTH and MAX_IMAGE_HEIGHT are constants that determine the maximum allowed size of the image.

回复收藏 0 原文

何止钟意 2024-08-28 15:37:05

我编写了一个接受 ImageResource 对象的类，您可以设置所需的图像像素大小。它使用CSSbackground-Position和CSSbackground-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);
        }

I wrote a class which accepts a ImageResource object, and you can set the wanted Pixel size of the Image. It uses CSS background-Position and CSS background-size to achive the aim:

The source code of the class ScalableImage is:

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));
    }
}

You can use this class as followed:

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

If you use this class together with a PushButton, than you have to add the PushButton to the RootPanel, because otherwise the onLoad() function is not called.
An example source code would look like:

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);
        }

回复收藏 0 原文