GWT剪輯圖像

Question

我正在創建一個小部件，其中圖像的一部分將突出顯示，其餘部分將具有不透明度0.5。

爲此，我使用兩個圖像。後面的完整圖像，不透明度爲0.5。我想要在前面突出顯示圖像部分。正面圖像是GWT的Clipped圖像。

我有一個場景，我不得不調整後面的圖像。有沒有辦法在前面調整剪切圖像的大小？

Answer 1

GWT實現利用CSS2風格截取圖像（連同空白圖像內容），如下面的例子：

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

不幸的是CSS2不支持縮放背景（URL提供的）圖像，所以沒有一種使用內置GWT庫縮放剪裁圖像的自然方式。

一種選擇是使用帆布，以及圖像加載到它，如在描述：
http://code.google.com/p/google-web-toolkit-incubator/wiki/GWTCanvas

否則，最好的選擇可能是任一片段或尺度（或兩者）上的圖像服務器。抱歉!

-Bosh

Answer 2

一個與GWT 2.0及以上版本可供選擇，如果你不介意擔任不同的圖像是定義不同DataResources，每個圖像的ClientBundle。接下來，您應該使用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可以生成「數據：」 URL對瀏覽器的支持它，無需單獨的圖像下載所有的需要。

順便說一下：你真的需要調整大小嗎？在視覺上它不是很好。