GWT で画像ウィジェットのサイズを変更すると、画像要素のサイズが変更されますが、画面上の画像は再スケーリングされません。したがって、以下は機能しません。
Image image = new Image(myImageResource);
image.setHeight(newHeight);
image.setWidth(newWidth);
image.setPixelSize(newWidth, newHeight);
これは、CSS を使用してHTML要素の を画像として設定することにより、GWT がその画像ウィジェットを実装するためです。background-image<img... />
実際の画像のサイズを変更するにはどうすればよいですか?
ImageResource の代わりに GWT DataResource を使用して問題を解決するこのブログ エントリを見ました。次のように使用すると、同じ手法が実際に 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テンプレートで、<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" />
画像を拡大縮小しないため
私の最終的な解決策は、画像にロードハンドラーを追加して、ロードされた画像のサイズに応じてサイズを変更することでした（つまり、比率を尊重します）。
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 オブジェクトを受け入れるクラスを作成しました。イメージの必要なピクセル サイズを設定できます。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
ブランドン・ドネルソン http://gwt-examples.googlecode.com http://c.gawkat.com
私のすべてのテストから、safeURI はバンドルに 1 つの画像がある場合にのみ機能します...バンドルによって 1 つの cache.png があるため、それを使用するのは無意味です。