GXT3：如何实现svg按钮

Question

与png / gif图标相比，使用SVG图标具有很多优势。 结果，我想实现一个svg button类来充当gwt小部件。 GXT 3中已经存在一些东西吗？ 或实现这种小部件的最佳选择是什么？ 谢谢。

---

更多细节：

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

Answer 1

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

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

例如，GXT的TextButton具有setIcon方法，该方法采用ImageResource 。 通常，这些都是在ClientBundle中创建的，但是GWT的ClientBundle的代码生成不知道什么是SVG。

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

    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);

现在，您可以通过传递一个普通的URL来做到这一点，但是我们并没有比普通的图像更好，因为我们仍然需要往返于服务器-大多数图标按钮只有几个kb，但是HTTP调用可能很糟糕，因此您的SVG也会同样糟糕。 幸运的是，GWT中所有内置的ImageResource都已捆绑到应用程序中，因此不需要HTTP调用。 事实证明，我们也可以捆绑svg文件，尽管我们需要使它恰好适合浏览器处理。

使用Java将SVG文件放入您的源代码中，我们将制作成一个捆绑包。 我将这个非常无聊的图标放入了一个名为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>

接下来，在我们的应用程序中使用它。 我创建了一个入口点，只需抓住此图标并将其放入按钮即可。 我们在这里使用DataResource来从应用程序内部将文件作为数据url引用，但是我们需要正确指定mime类型，以使浏览器理解它是图像：

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文件的支持添加到GWT中的ImageResourceGenerator，可以使此操作更容易，但是事实证明，这不是一个很常见的用例。

---

好的，SVG对栅格图像有什么作用？ 对于大图像，很多！ 由于可以很好地拉伸，因此对于相同的细节级别，它们可以小得多，但是对于小图标，可能会命中或遗漏。 随时更改它们的一些细节较为容易，但这确实超出了解决如何在gwt中使用SVG的问题的范围（有关许多简单的SVG渲染工具，请参见GXT的图表/绘图库），而且这种情况并不常见一个按钮上的单个图像很重要。 图标图像很小，并且在此处节省了几个字节，因此可能无法有效利用时间-此外，SVG在浏览器中呈现的时间比简单得多的图像要花费更多的时间（尽管同样，对于很小的图像，差异将很小浏览器）。

---

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

SVG元素几乎是普通的dom元素，但是请检查您需要支持哪些浏览器以确保它们可以正常运行。 https://developer.mozilla.org/zh-CN/docs/SVG_In_HTML_Introduction快速介绍了如何构建元素以更正它们的命名空间，以便浏览器可以正确使用它们。 除此之外，它们在GWT中的行为与普通dom元素大致相同。 我通常建议您将它们像GWT中的普通dom元素一样对待 ，因此，小部件不应将处理程序附加到子元素，而应在每个小部件上正常使用addDomHandler 。 鉴于svg元素具有相互重叠的能力（基于dom的顺序），如果您需要确切地知道鼠标悬停在哪个位置，则可以考虑其他方法来查看哪个元素位于其他元素之上（尽管对于按钮而言，没关系）。

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