带有 GWT Sprites 的 Retina 图像？答案

【问题标题】：Retina Images with GWT Sprites?带有 GWT Sprites 的 Retina 图像？
【发布时间】：2014-03-18 16:50:59
【问题描述】：

我想在 GWT 中使用视网膜图像。即，每个具有视网膜变体的图像应如下所示：

logo.png
logo@2x.png

我可以使用RetinaImages lib 加载视网膜图像：

ClientBundleFactory factory = GWT.create(ClientBundleFactory.class);
DemoClientBundle bundle = factory.create();
logoImage.setResource(bundle.logo());

问题是这只在使用 setResource() 时有效。

我想在 gwt sprites 中使用视网膜图像。例如：

public interface Resources extends ClientBundle {

    ImageResource logo();

    @Source({Css.DEFAULT_CSS })
    Css css();
}

在我的 css 文件中：

@sprite .somePanel {
   gwt-image: "logo";
}

现在可以正常工作了，因为当使用视网膜图像 (logo@2x.png) 时，图像在屏幕上的大小是原来的两倍。

如果是视网膜图像，如何将图像宽度和高度设置为一半？

【问题讨论】：

标签： java javascript html css gwt

【解决方案1】：

尝试设置图像的像素大小：

logoImage.setPixelSize(nominal_width, nominal_height);

其中标称宽度和高度是在资源文件中定义或在方法调用中直接指定的整数，并且应该是实际图像尺寸的一半。

【讨论】：

请注意，您需要图像 URL 才能使用 logoImage.setResource(bundle.logo().getSafeUri());