在 GWT 中缩放图像 [英] Scaling an Image in GWT

问题描述

更改 图像 GWT 中的小部件会更改图像元素的大小，但不会重新缩放屏幕上的图像.因此，以下操作不起作用:

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

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

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?

推荐答案

我看到了 this blog entry，它通过使用 GWT DataResource 而不是 ImageResource 解决了这个问题.事实证明，相同的技术实际上可以用于 ImageResource，如果您按如下方式使用它:

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

从 GWT 2.4 开始，使用(参见 此处):

As of GWT 2.4, use (see here):

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

这篇关于在 GWT 中缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！