html - GWTクリップ画像

Question

画像の一部が強調表示され、残りの部分の不透明度が0.5になるウィジェットを作成しています。

このために私は2つの画像を使用しています。不透明度0.5の背面の完全な画像。前面で強調表示したい画像の部分。正面の画像はGWTのクリップ画像です。

背面の画像のサイズを変更する必要があるシナリオがあります。前面のクリップされた画像のサイズを変更する方法はありますか？

Answer 1

GWTは、次の例のように、CSS2スタイルを使用して（空白の画像コンテンツとともに）クリップされた画像を実装します。

width: 300px; height: 300px; 
background: url("/team.png") no-repeat scroll -5px -5px transparent;

残念ながら、CSS2は背景（URL提供）画像のスケーリングをサポートしていないため、組み込みのGWTライブラリを使用してクリップされた画像をスケーリングする自然な方法はありません。

1つのオプションは、
http ：//code.google.com/p/google-web-toolkit-incubator/wiki/GWTCanvasで説明されているように、キャンバスを使用して画像をロードすることです。

それ以外の場合は、サーバー上の画像をクリップまたはスケーリング（あるいはその両方）するのが最善のオプションです。ごめん！

-ボッシュ

Answer 2

異なるイメージを提供することを気にしない場合のGWT2.0+の代替案の1つは、イメージごとに1つずつ、異なるDataResourcesを使用してClientBundleを定義することです。次に、画像のURLを設定するためにDataResourceのURLを使用する必要があります。

interface MyClientBundle extends ClientBundle {
   @Source("img1.png")
   DataResource myImg1();
   @Source("img2.png")
   DataResource myImg2();
}

private static final MyClientBundle BUNDLE = GWT.create(MyClientBundle.class);

それから...

new Image(BUNDLE.myImg1().getUrl());

それは機能するはずであり、GWTはそれをサポートするブラウザの「data：」URLを生成できるため、個別の画像をダウンロードする必要はまったくありません。

ちなみに、本当にサイズを変更する必要がありますか？視覚的にはあまり良くありません。