在GWT中缩放图像
在GWT中更改图像窗口小部件的大小会更改图像元素的大小，但不会在屏幕上重新缩放图像。 因此，以下方法不起作用：
Image image = new Image(myImageResource); image.setHeight(newHeight); image.setWidth(newWidth); image.setPixelSize(newWidth, newHeight); 这是因为GWT通过使用CSS将HTML background-image设置为background-image来实现其Image小部件。
如何让实际图像resize？
我看到了这个博客条目 ，它通过使用GWT DataResource而不是ImageResource来解决问题。 事实certificate，相同的技术实际上将与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());
如果我们想在UIbinder中做同样的事情。 从外部资源然后：
例如，我们有资源
@Source("images/logo.png") ImageResource getLogo();
在UiBinder模板中声明
以下：
在较旧的GWT版本中：
但现在 – 不推荐。
不使用：
因为它不会缩放图像
尝试图像加载器小部件http://code.google.com/p/gwt-image-loader FitImage类提供您要查找的内容。
PS：也适用于问题补丁，因为我修复了一些小错误
我的最终解决方案是在图像上添加一个加载处理程序，以根据加载图像的尺寸resize（即尊重比率）。
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是确定图像最大允许大小的常量。
我写了一个接受ImageResource对象的类，你可以设置Image的想要像素大小。 它使用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); }
以下是我使用canvas元素使用HTML5缩放图像的方法。
http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5
Brandon Donnelson http://gwt-examples.googlecode.com http://c.gawkat.com
从我的所有测试中，safeURI只有在你的捆绑包中有一个图像才能工作……因为你有一个cache.png捆绑所以没用它，所以没有优化！