在GWT中缩放图像

Question

改变的大小的图像在GWT部件改变所述图像元素的大小,但不重新调整屏幕上的图像.因此,以下方法不起作用:

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

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

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

Answer 1

我看到了这个博客条目,它通过使用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());

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

因为它不会缩放图像