在 GWT 中缩放图像

java gwt image-scaling

2022-09-02 00:31:06

在 GWT 中更改图像构件的大小会更改图像元素的大小，但不会在屏幕上重新缩放图像。因此，以下操作将不起作用：

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

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

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

答案 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());

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

因为它不会缩放图像