Java 在 GWT 中缩放图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2260458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scaling an Image in GWT
提问by Daniel
Changing the size of an ImageWidget in GWT changes the size of the image element, but does not rescale the image on the screen. Therefore, the following will not work:
改变的大小的图像在GWT部件改变所述图像元素的大小，但不重新调整屏幕上的图像。因此，以下操作将不起作用：
Image image = new Image(myImageResource);
image.setHeight(newHeight);
image.setWidth(newWidth);
image.setPixelSize(newWidth, newHeight);
This is because GWT implements its Imagewidget by setting the background-imageof the HTML <img... />element as the image, using CSS.
这是因为 GWT通过使用 CSS将 HTML元素的 设置为图像来实现其图像小部件。background-image<img... />
How does one get the actual image to resize?
如何让实际图像调整大小？
采纳答案by Daniel
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:
我看到了这个博客条目，它通过使用 GWT DataResource 而不是 ImageResource 解决了这个问题。事实证明，如果您按如下方式使用 ImageResource，同样的技术实际上可以使用它：
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):
从 GWT 2.4 开始，使用（参见此处）：
Image image = new Image(myImageResource.getSafeUri());
image.setPixelSize(newWidth, myImageResource.getHeight() * newWidth / myImageResource.getWidth());
回答by Drejc
Try the image loader widget http://code.google.com/p/gwt-image-loaderThe FitImage class provides what you are looking for.
尝试使用图像加载器小部件http://code.google.com/p/gwt-image-loaderFitImage 类提供您正在寻找的内容。
PS: apply also patches from issues, as there are some minor bugs which I have fixed
PS：也应用来自问题的补丁，因为我已经修复了一些小错误
回答by adranale
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_WIDTHand MAX_IMAGE_HEIGHTare constants that determine the maximum allowed size of the image.
其中MAX_IMAGE_WIDTH和MAX_IMAGE_HEIGHT是确定图像允许的最大尺寸的常量。
回答by Brandon
Here is how I use the canvas element to scale images using HTML5.
下面是我如何使用 canvas 元素使用 HTML5 缩放图像。
http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5
http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5
Brandon Donnelson http://gwt-examples.googlecode.comhttp://c.gawkat.com
布兰登·唐纳尔森 http://gwt-examples.googlecode.comhttp://c.gawkat.com
回答by Hussar
If we want to do the same in UIbinder. From an external resource then :
如果我们想在 UIbinder 中做同样的事情。从外部资源然后：
For example we have in recource
例如，我们在资源中
@Source("images/logo.png")
ImageResource getLogo();
In UiBinder template declare the <ui:with>element:
在 UiBinder 模板中声明<ui:with>元素：
<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:
在较旧的 GWT 版本中：
<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
因为它不缩放图像
回答by Michael von Wenckstern
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:
我编写了一个接受 ImageResource 对象的类，您可以设置所需的图像像素大小。它使用 CSS background-Position 和 CSS background-size 来实现目标：
The source code of the class ScalableImage is:
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));
}
}
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:
如果您将此类与 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);
}
回答by Fabi Fabi
From all my test, safeURI work only if you have ONE image in your bundle...So useless to use it because you have one cache.png by Bundle, so it is optimize nothing !
从我所有的测试来看，只有当你的包中有一个图像时，safeURI 才起作用......所以使用它是没有用的，因为你有一个缓存.png 包，所以它什么都不优化！
