制作一个简单的叠加类?

时间:2010-01-25 18:16:02

标签: gwt svg jsni

我想在GWT中创建一些非常简单的覆盖类来包装一些SVG的东西。我基本上想要绘制一个矩形,这就是我在javascript中的表现:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
document.body.appendChild(svg);

var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
rect.setAttribute("width","300");
rect.setAttribute("height","100");
svg.appendChild(rect);

现在我无法将其转换为GWT。我希望我可以围绕所有这些电话做一个非常薄的覆盖,如下所示:

public class SVGPanel extends JavaScriptObject {
    protected SVGPanel() {}

    public static native SVGPanel create(String width, String height) /*-{
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', width);
        svg.setAttribute('height', height);
        return svg;
    }-*/;
}

public MyProject implements EntryPoint {

    public void onModuleLoad() { 
        SVGPanel panel = SVGPanel.create("100%", "100%");
        Document.get().getBody().appendChild(panel);
    }
}

是的,但我没有掌握如何从SVG内容的javascript表示跳转到GWT java类。首先,SVGPanel类扩展了JavaScriptObject,但我不能简单地将它添加到Document body类,因为它期望Element类型。如果有人能够指出正确的方式来建立这座桥梁,我应该能够在那之后继续前进。

另外,我不确定这是否是合并一些简单SVG类的最佳方式,我应该使用DOM类对它们进行建模而不是尝试使用JSNI吗?

由于

2 个答案:

答案 0 :(得分:2)

您需要为appendChild提供一个元素。因此,只需使您的overlay类扩展Element而不是JavaScriptObject。

public class SVGPanel extends Element {

请注意,Element是JavaScriptObject的子类。

答案 1 :(得分:0)

我认为值得查看gwt-svg - 虽然看起来他们在2007年左右停止了开发,但代码库似乎足够稳固,很好地说明了你想要做的事情,而且它有一些不错的功能,比如特殊的实现(邪恶的)IE6。即使代码不能按原样运行,希望它能让你有一个想法开始(也许你甚至可以发布你的工作开源,以便其他人可以从中受益)。

还有GWTCanvas - 这可能是你想要实现的:)如果没有,至少要检查他们的API,看看他们是如何处理的。

祝你好运!