15

我想知道是否可以在面板中包含 SVG 内容（或在 GWT 中可以使用的任何内容），能够以编程方式向 SVG 添加更多内容（例如添加圆或曲线），并处理鼠标事件（这将是在 SVG 或 GWT 中？）。我尝试创建一个 HTML 对象，添加以下内容：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="50" cy="50" r="30" />
</svg>

那没有用（输出中没有任何可见），但我不确定是因为我做错了还是不允许这样做。

我可以使用 Google Visualization 的 LineChart 在 GWT 中做一个简单的示例，但我想摆脱 Google Visualization 并能够自己生成 SVG 并进一步自定义它。我环顾四周，许多资源都指向使用 Canvas，但我不确定这是否是最好的路线。

我对这里的例子也有点困惑。我尝试了一个简单的复制粘贴在本地尝试，但它似乎根本不起作用。但是，我能够获得另一个仅使用 HTM 的示例（嵌入 src 指向 SVG 文件）L + 单独的 SVG 文件，但我无法使用 GWT 使用 RootPanel.get(...) 访问它。

编辑：我已经阅读了有关 SVG 不能与托管浏览器一起使用的信息，并且编译它确实有效，但我不确定如何引用 SVG（我已通过 将其放入 HTML 中）。如果我可以访问它，那么大概我可以添加到它的innerHTML。我已经尝试过 RootPanel.get("hi").getElement().setInnerHTML("...") 但这似乎不起作用还是我搞砸了？ 我想目标是能够操作我以某种方式链接的 SVG 文件（无论是在 GWT 还是在 HTML 中），并能够根据用户的输入对其进行修改。

第二次编辑 到目前为止，我一直在实际的 SVG 文件中编写功能。在我们的设置中，我们的 SVG 是一个嵌入式对象，我们将“文档”传递给嵌入式 SVG。将信息从嵌入对象传入和传出 HTML 是非常可行的，因为 HTML 可以访问我们的 SVG 函数，而 SVG 可以访问“文档”。

这样做有更透明的方法（Rapahel），FireBug 可以直接看到 SVG，这很好，但现在不太必要。到目前为止，我认为我看过的任何解决方案都不是 IFrame，但我可能是错的。一点警告，SVG 有时会很慢。

我想说我的问题已经解决了（有点？），但我目前没有使用 Raphael、jQuery 或 GWT，但如果我想使用 GWT，我在回答中描述的方法应该仍然有效。

4

8 回答 8

9

我不完全明白为什么，但是 createElementNS JavaScript 方法允许您在 html 中创建并正确格式化 xhtml。

因为资源管理器中没有等价物，GWT 没有实现 createElementNS，但您可以使用快速的本地方法： 

private static native Element createElementNS(final String ns, 
        final String name)/*-{
    return document.createElementNS(ns, name);
}-*/;

将其放入 SVGPanel 类是有意义的。

import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.ComplexPanel;

public class SVGPanel extends ComplexPanel{

    private static final String SVG_NAMESPACE = "http://www.w3.org/2000/svg";

    public SVGPanel() {
        setElement(createElementNS(SVG_NAMESPACE, "svg"));
        showcaseSVG(); //Demonstrate that SVG works! Inexplicably!
    }

    private void showcaseSVG(){
        Element svgElement = createElementNS(SVG_NAMESPACE, "circle");
        svgElement.setAttribute("cx", "50");
        svgElement.setAttribute("cy", "50");
        svgElement.setAttribute("r", "30");
        getElement().appendChild(svgElement);
    }
}

当添加到您的程序中时，这应该会产生一些简单的 SVG。恭喜！你现在把它贴在 xhtml 人身上。

于 2009-11-03T10:17:14.910 回答
6

哇。这个问题已经被搁置了一段时间。- 一个很棒的（确定的？）GWT SVG 库已经发布了！见lib-gwt-svg。那里没有任何东西几乎一样好。作者（Lukas Laag）反应迅速，一直在努力保持库的更新和最佳状态。上面的链接将带您到一些令人印象深刻的演示，您可以随时参与lib-gwt-svg 论坛。

于 2011-04-26T13:43:14.090 回答
5

我们刚刚开源了一个 GWT 小部件，它允许您将 GWT 与 Raphael 集成： http ://code.google.com/p/raphaelgwt/

这个小部件最初是为 Hydro4GE 创建的，并在官方 GWT 博客的一篇文章中提到。

于 2010-02-04T14:30:08.420 回答
3

您可能对 html 与 xhtml 的问题感到困惑：内联 SVG 需要被解释为 XML/XHTML，但至少对我而言，我无法说服 GWT 将 applicaton/xhtml+xml 作为内容类型。对于您想知道的本地测试：尝试将文件另存为 .xhtml 并将其加载到 Firefox - 然后它可以工作，因为在这种情况下 FF 将其解释为 XHTML。

有关背景信息，请参见http://wiki.svg.org/Inline_SVG。

如果您找到问题的解决方案，请发布。问候， 阿克塞尔

于 2009-03-31T12:47:17.407 回答
3

在玩了一会儿之后，我在使用Raphaël（处理跨浏览器兼容性）方面取得了最大的成功，尽管我怀疑这些方面的任何东西都可以正常工作。基本上我在JavaScript中执行以下操作：

var r = Raphael("someID", WND_WIDTH, WND_HEIGHT);
// additional configuration and setup if needed....

然后我会在GWT中执行以下操作：

public native JavaScriptObject getRaphael() /*-{
  return $wnd.r;
}-*/;

// I now have access to the JavaScript object and could do the following:

public native void drawCircle(JavaScriptObject obj, int x, int y, int r) /*-{
  obj.circle(x, y, r);
}-*/;

我也一直在阅读，似乎将 Raphaël 移植到 GWT（这篇文章很好读）不仅会提高性能（根据我在 Google Groups 上阅读但目前找不到的一些帖子 - 他们提到了编译器做了很多工作）但也方便了编码和调试。

所以我实现了能够直接操作 SVG 的目标（直到我将 Raphaël 移植到 Java 或至少创建包装器）。我还没有认真研究过 Google Visualization API，但我怀疑它可能也能正常工作，但我不确定它是否足够强大以满足我的需求。

正如 Raphaël 的网站上所说，我认为我遗漏了一件重要的事情：

这意味着您创建的每个图形对象也是一个 DOM 对象，因此您可以附加 JavaScript 事件处理程序或稍后修改它们。

于 2009-04-07T18:57:57.297 回答
1

如果您看不到 SVG，可能是因为您的浏览器将您的文档视为 HTML 文件而不是 XHTML 文件。尝试更改文件的扩展名（.xhtml），检查 html 格式是否正确，添加 html 'meta' 标签等。

仅供参考，还有一个用于 GWT 的 SVG 模块：http: //gwt-widget.sourceforge.net/

皮埃尔

于 2009-04-07T19:11:01.757 回答
0

请注意，SVG 将无法在当前 GWT Shell（托管模式）高达 1.6（含）中工作，因为：

1）在windows上，它使用IE组件

2) 在 Linux 上，它使用 Firefox 1.0 或同等的 mozilla 运行时，不支持 SVG。

编译后的代码在非 IE 浏览器中运行良好。

此外，无论浏览器中的 HTML/XHTML 是什么，它都可以工作，因为在 GWT 中您使用 createElementNS（您可以使用 JSNI 自己编写方法）。此外，您的 SVG 标签可能需要宽度/高度属性（请参阅 SVG 规范）。

于 2009-05-04T17:38:12.977 回答
0

有趣的！

我试图通过 GWT/Java 代码使用 Raphael，但我似乎无法使用你的技巧。

我的 HTML 页面中有以下块：

<script  type="text/javascript" language="javascript" ><br/>
     window.onload=function(){
     var rr = Raphael(20,20, 200,200);
     rr.circle(50,40,30);
     }
</script>

当我在 Firefox 中编译/浏览页面时，我的页面中出现了我的圆圈，没问题。

然后我将以下本机 java 添加到我的模块入口点方法并调用它：

 private native JavaScriptObject returnRaphael() /*-{
            return $wnd.rr;
        }-*/;

调试显示返回的对象总是null...

另外，我不明白为什么我不能简单地在我的 Java 代码中执行以下操作：

public native void createRaphael()/*-{
    Raphael("some_div", 200,200);
}-*/;

GWT 一直告诉我 Raphael 不存在，但是，正如我通过 firebug 看到的那样，该库完全包含在内。这也不起作用：

public native void createRaphael()/*-{
    $wnd.Raphael("some_div", 200,200);
}-*/;

令人惊讶的是，我设法使用它访问 draw2d (openJacob draw2d) 类和函数，$wnd但不是我的 Raphael 对象......一定有一些我没有得到的东西......

于 2009-05-14T16:57:09.080 回答