我如何在 GWT 中使用图像精灵？答案

【问题标题】：how do i use image sprites in GWT?我如何在 GWT 中使用图像精灵？
【发布时间】：2011-05-30 22:09:47
【问题描述】：

我试图在图像资源中使用平铺图像，我正在参考 GWT 教程...

一个部分说你需要使用精灵： http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ImageResource

repeatStyle 是一个枚举值与 @sprite 指令表示该图像旨在平铺

所以，现在我需要添加一个精灵指令。在哪里？研究精灵，我来到这里： http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Image_Sprites

该示例指示创建两个文件：

MyCssResource
我的资源

我会在哪里写这个：

@sprite .mySpriteClass {gwt-image: "图像访问器";其他：属性；}

更多引用供参考：

@sprite 对 FooBundle 很敏感在其中声明了 CSSResource；一个名为的兄弟 ImageResource 方法在@sprite 声明中将是用于合成背景精灵。

【问题讨论】：

标签： css image gwt tile

【解决方案1】：

根据您所写的内容，我将假定 MyResources 是扩展 ClientBundle 的接口，而 MyCssResources 是扩展 CssResource 的接口：

interface MyResources extends ClientBundle {
  @Source("myImage.png")
  @ImageOptions(repeatStyle = RepeatStyle.BOTH)
  ImageResource myImage();

  @Source("myCss.css")
  MyCssResource myCss();
}

interface MyCssResource extends CssResource {
  String myBackground();
}

所以现在有两种方法可以使用从 MyResources 获得的 ImageResource。第一种是使用@sprite 指令将其附加到CSS 规则。 myCss.css：

@sprite .myBackground {
  gwt-image: "myImage";
  /* Additional CSS rules may be added. */
}

然后，任何具有 myBackground 类的东西都会以 myImage 作为其背景。所以，以 UiBinder 为例：

<ui:UiBinder> <!-- Preamble omitted for this example. -->
  <ui:with field="myResources" type="com.mycompany.MyResources"/>

  <g:FlowPanel styleName="{myResources.myCss.myBackground}"/>
</ui:UiBinder>

还可以使用定义的 ImageResource 直接实例化 Image 对象。 UiBinder：

<ui:UiBinder> <!-- Preamble omitted for this example. -->
  <ui:with field="myResources" type="com.mycompany.MyResources"/>

  <g:Image resource="{myResources.myImage}"/>
</ui:UiBinder>

没有 UiBinder：

MyResources myResources = GWT.create(MyResources.class);
Image myImage = new Image(myResources.myImage());

【讨论】：

非常感谢您的回答。为这么简单的事情奋斗了好几个小时！！！

【解决方案2】：

让我补充一下：

@sprite .myBackground {
  gwt-image: "myImage";
  /* Additional CSS rules may be added. */
}

变成

.myBackground {
  backgroud-image: url(-url of the image-)
  width: *width of the image*
  height: *height of the image*
}

记得在需要时覆盖它们：例如将高度和宽度设置为自动：

@sprite .myBackground {
  gwt-image: "myImage";
  height: auto;
  width: auto;
}

HTH，我费了好大劲才弄明白 ;)

【讨论】：

我一直在寻找自动的高度和宽度。谢谢！
很棒的小评论。帮助我更多地了解这个过程。谢谢！

【解决方案3】：

我也想补充一下

记得在 MyCssResource.java 上调用 ensureInjected() 否则

<g:FlowPanel styleName="{myResources.myCss.myBackground}"/>

不会工作..

【讨论】：

【解决方案4】：

如果您使用的是 gss，@sprite 在这种情况下不起作用。你应该使用gwt-sprite 喜欢：

.myBackground {
  gwt-sprite: "myImage";
}

【讨论】：