GXT3：如何实现svg按钮

Question

与png / gif图标相比，使用SVG图标有很多优点。因此，我想实现一个svg按钮类来充当gwt小部件。 GXT 3中是否已存在某些内容？或者什么是实现这样的小部件的最佳选择？感谢。

更多详情：

我需要一个纯粹的可点击的svg图标就像一个按钮小部件。它需要具有鼠标单击处理程序，并能够在三种状态下应用不同的CSS：正常，悬停，禁用。我不想要一个带有svg图标的按钮。

Answer 1

在支持它们的浏览器中，SVG可以像使用图像文件（png / jpg / etc）一样使用。 GXT / GWT不应该有所作为，你只需要应用图像。

您可以使用可以被告知使用任何图像或css类（取决于小部件）的内置小部件，而不是构建您自己的小部件（当然，这是一个选项）。

例如，GXT的TextButton有一个setIcon方法，需要ImageResource。通常这些是在ClientBundle中创建的，但GWT＆{39}的代码生成并不知道SVG是什么。

ClientBundle接口具有内置于GWT的实现ImageResource，允许您指定所需的所有参数。第二个参数是url，即图像的路径，只要浏览器支持它就会呈现。因此，我们需要将要使用的SVG文件放入ImageResourcePrototype。

ImageResourcePrototype

现在，你可以通过传入一个普通的URL来做到这一点，但是我们并不比普通的图像更好，因为我们仍然需要往返服务器 - 大多数图标按钮只有几kb ，但HTTP调用的开销可能很糟糕，所以你的SVG也会一样糟糕。值得庆幸的是，GWT中的所有内置 ImageResource icon = new ImageResourcePrototype("icon", UriUtils.fromSafeConstant("/path/to/my.svg"), 0, 0, 20, 20, false, false); TextButton button = new TextButton("square", icon); RootPanel.get().add(button); 都已捆绑到应用程序中，因此不需要HTTP调用。事实证明我们也可以捆绑我们的svg文件，尽管我们需要让它适合浏览器来处理它。

使用Java将SVG文件放在源代码中，然后我们就可以创建一个包。我把这个非常无聊的图标放到一个名为ImageResource的文件中：

icon.svg

接下来，在我们的应用中使用它。我做了一个入口点，只是抓住这个图标并将其放入一个按钮。我们在这里使用<svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> </svg> 将该文件称为我们应用内部的数据网址，但我们需要正确指定mime类型，以便浏览器了解它是一个图像：

DataResource

通过将.svg文件的支持添加到GWT中的ImageResourceGenerator可以使这更容易，但事实证明这不是一个非常常见的用例。

好的，那么SVG对光栅图像的作用是什么？对于大图像，很多！它们可以在相同的细节水平上小得多，因为它们可以很好地伸展，但对于小图标，它可以被击中或错过。更容易在运行中更改有关它们的一些细节，但这实际上超出了解决如何在gwt中使用SVG的问题范围（有关很多简单的SVG渲染，请参阅GXT＆＃39的图表/绘图库）工具），对于按钮上的单个图像并不重要。图标图像很小，在这里节省了几个字节，可能没有有效的时间使用 - 而且，SVG在浏览器中渲染所需的时间比更简单的图像更多（尽管如此，对于非常小的图像，差异将是最小的浏览器）。

编辑，尝试解决问题编辑而不是原始点。

SVG元素几乎是正常的dom元素，但要检查您需要支持哪些浏览器以确保它们能够正常工作。 https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction简要介绍了如何构建元素以纠正命名空间，以便浏览器正确使用它们。除此之外，它们在GWT中的行为大致与正常的dom元素相同。我通常会建议你将它们视为GWT中的普通dom元素，因此你的小部件不应该将处理程序附加到子元素，而只是在每个小部件上正常使用public class SampleIconEntryPoint implements EntryPoint { interface Bundle extends ClientBundle { @Source("icon.svg") @MimeType("image/svg+xml") DataResource icon(); } @Override public void onModuleLoad() { Bundle bundle = GWT.create(Bundle.class); ImageResource icon = new ImageResourcePrototype("icon", bundle.icon().getSafeUri(), 0, 0, 50, 50, false, false); TextButton button = new TextButton("square", icon); RootPanel.get().add(button); } } 。鉴于svg元素相互重叠的能力（基于dom中的顺序），如果你需要确切地知道鼠标是什么，你可以考虑其他方法来查看哪个元素在其他元素之上（尽管对于一个按钮，这不重要。）

如上所述，GXT的绘图工具提供了一个DrawComponent类，它可以使用SVG并让您获取每个绘制的精灵发生的事件，并针对不同的浏览器问题进行规范化（如果可能，支持画布，或者必要时支持VML） ）。