GWT 剪辑的图像答案

【问题标题】：GWT Clipped imageGWT 剪辑的图像
【发布时间】：2010-12-01 23:26:46
【问题描述】：

我正在创建一个小部件，其中图像的一部分将突出显示，其余部分的不透明度为 0.5。

为此，我使用了两个图像。背面的完整图像，不透明度为 0.5。我想在前面突出显示的图像部分。前面的图片是GWT的Clipped image。

我有一个场景，我必须调整背面图像的大小。有什么办法可以调整前面的剪切图像的大小吗？

【问题讨论】：

【解决方案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

否则，您最好的选择可能是在服务器上剪辑或缩放（或两者）图像。对不起！

-波什

【讨论】：

【解决方案2】：

GWT 2.0+ 的另一种选择是，如果您不介意提供不同的图像，请定义一个具有不同 DataResources 的 ClientBundle，每个图像一个。接下来，您应该使用 DataResource 的 url 来设置图像的 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，完全无需单独下载图像。

顺便问一下：你真的需要调整大小吗？视觉上不是很好。

【讨论】：