web-dev-qa-db-ja.com

GWTでの画像のスケーリング

Image ウィジェットのサイズを変更すると、GWTで画像要素のサイズが変更されますが、画面上の画像は再スケーリングされません。したがって、以下は機能しません。

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

これは、GWTがCSSを使用してHTML background-image要素の<img... />を画像として設定することにより、その Image ウィジェットを実装するためです。

実際の画像のサイズを変更するにはどうすればよいですか？

javagwtimage-scaling
22
Daniel

このブログエントリ を見ました。これは、ImageResourceの代わりにGWTDataResourceを使用することで問題を解決します。次のように使用すると、同じ手法が実際に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());
34
Daniel

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

画像を拡大縮小しないため

11
Hussar

私の最終的な解決策は、画像にロードハンドラーを追加して、ロードされた画像のサイズに応じてサイズを変更することでした（つまり、比率を尊重します）。

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は、画像の最大許容サイズを決定する定数です。

3
adranale

画像ローダーウィジェットを試してください http://code.google.com/p/gwt-image-loader FitImageクラスは、探しているものを提供します。

PS：私が修正したいくつかのマイナーなバグがあるので、問題からのパッチも適用します

3
Drejc

ImageResourceオブジェクトを受け入れるクラスを作成しました。これにより、画像の必要なピクセルサイズを設定できます。 CSSbackground-PositionとCSSbackground-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);
        }
1
Michael von Wenckstern

これが、canvas要素を使用してHTML5を使用して画像を拡大縮小する方法です。

http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5

Brandon Donnelson http://gwt-examples.googlecode.com http://c.gawkat.com

0
Brandon

私のすべてのテストから、safeURIはバンドルに1つの画像がある場合にのみ機能します...バンドルごとに1つのcache.pngがあるため、使用しても意味がありません。何も最適化されません。

0
Fabi Fabi