Question

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

为此，我使用了两张图片。背面的完整图像，不透明度为0.5。我希望在前面突出显示图像的部分。前面的图像是GWT的剪辑图像。

我有一个场景，我必须调整背面图像的大小。有没有办法在前面调整剪裁图像的大小？

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+的一种替代方案，如果您不介意提供不同的图像，则定义具有不同DataResource的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，完全不需要单独的图像下载。

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

GWT剪裁图像

2 个答案: