html - 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

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

-波什

Answer 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，完全不需要单独的图像下载。

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