java - GXT3 : How to implement svg buttons

Question

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

更多细节:

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

Answer 1

在支持它们的浏览器中，可以像使用图像文件(png/jpg/etc)一样使用 SVG。 GXT/GWT 应该没什么区别，你只需要应用图像。

与其构建自己的小部件(当然，这是一个选项)，不如使用内置的小部件，这些小部件可以被告知使用任何图像或 css 类(取决于小部件)。

例如，GXT 的 TextButton有一个 setIcon采用 ImageResource 的方法.通常这些是在 ClientBundle 中创建的。 ，但 GWT 的 ClientBundle 的代码生成不知道 SVG 是什么。
ImageResource接口(interface)有一个内置于 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 也会很糟糕。谢天谢地，所有内置 ImageResource GWT 中的 s 已经捆绑到应用程序中，因此不需要 HTTP 调用。事实证明，我们也可以捆绑我们的 svg 文件，尽管我们需要让浏览器能够处理它。

将 SVG 文件与您的 Java 一起放入您的源代码中，我们将使用它制作一个捆绑包。我把这个很无聊的图标放到了一个名为 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-type 以便浏览器理解它是图像:

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

这可以通过向 GWT 中的 ImageResourceGenerator 添加对 .svg 文件的支持来简化，但这并不是一个非常常见的用例。

好的，那么 SVG 对光栅图像有什么影响？对于大图像，很多!对于相同的细节级别，它们可以小得多，因为它们可以很好地拉伸(stretch)，但对于小图标，它可能会被击中或错过。动态更改有关它们的一些细节更容易，但这确实超出了解决如何在 gwt 中使用 SVG 的问题的范围(请参阅 GXT 的图表/绘图库以获取许多简单的 SVG 渲染工具)，并且不经常按钮上的单个图像很重要。图标图像很小，在这里节省了几个字节，并且可能没有有效地利用时间 - 另外，SVG 在浏览器中呈现比简单得多的图像需要更多时间(尽管同样，对于非常小的图像来说差异将是最小的浏览器)。

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

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

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