在GWT中使用SVG [英] Using SVG in GWT

问题描述

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

 < svg xmlns =http：// www .w3.org / 2000 / svgversion =1.1> 
 < / svg> 
  

没有任何效果（输出中没有任何可见的内容），但我不确定是否是因为我做错了，或者它是不允许的。

我可以在GWT中用Google Visualization的LineChart做一个简单的例子，但我想远离Google Visualization和能够自己生成SVG并进一步对其进行自定义。我环顾四周，很多资源指向使用Canvas，但我不确定这是否是最好的路线。

我也对这个例子感到困惑此处。我尝试了一个简单的复制粘贴来尝试在本地尝试，但它似乎根本不起作用。然而，我能够获得另一个样例，只是HTM（嵌入src指向SVG文件）L +单独的SVG文件，但我无法使用RootPanel.get（...）使用GWT访问它。我已阅读有关SVG不与托管浏览器工作并编译它确实工作，但我不确定如何引用SVG（我已放置进入HTML通过）。如果我可以访问它，那么大概我可以添加到它的内部HTML。我尝试了RootPanel.get（嗨）。getElement（）。setInnerHTML（...）但似乎没有工作或我搞砸了？ 我想我的目标是能够操作一个我以某种方式链接的SVG文件（不管是在GWT还是在HTML中）并且能够根据用户的输入来修改它。

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

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

我会说我的问题已经解决了（有点？），但我没有使用Raphael，jQuery，也没有使用GWT在目前，但我在我的答案中描述的方法仍应该工作，如果我想要使用GWT。

位，我一直使用Raphaël（它可以处理跨浏览器的兼容性），尽管我怀疑那些东西线将工作得很好。基本上，我在 JavaScript 中执行以下操作：

  var r = Raphael（someID，WND_WIDTH， WND_HEIGHT）; 
 //需要额外的配置和设置.... 
  

然后我会做以下是 GWT ：

  public native JavaScriptObject getRaphael（）/ *  -  {
 return $ wnd.r; 
}  -  * /; 
 
 //我现在可以访问JavaScript对象并可以执行以下操作：
 
 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的网站上，我认为我缺少一件重要的事情：
$ b

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

I was wondering if it is possible to include SVG content inside a panel (or whatever would work in GWT), be able to add more to the SVG (like add a circle or a curve) programmatically , and handle mouse events (would this be in SVG or GWT?). I've tried creating an HTML object adding something along the lines of:

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

That didn't work (nothing visible in output) but I'm not sure if it was because I did it wrong or it's not allowed.

I was able to do a simple example in GWT with Google Visualization's LineChart but I'd like to move away from Google Visualization and be able to generate the SVG myself and customize it further. I've looked around and many resources points to using Canvas but I'm not sure if that's the best route yet.

I'm also a bit baffled about the example here. I tried a simple copy-paste of it to try locally and it didn't seem to work at all. I was however able to get another sample working with just HTM (embed with src pointing to SVG file) L + separate SVG file but I haven't been able to access it using GWT using RootPanel.get(...).

EDIT: I've read about SVG not working with Hosted Browser and compiling it does work but I am uncertain how to refer to the SVG (which I have placed into the HTML via ). If I can access it then presumably I can add to its innerHTML. I've tried in RootPanel.get("hi").getElement().setInnerHTML("...") but that doesn't seem to work or did I mess up? I guess the goal is to be able to manipulate a SVG file which I linked somehow (whether in GWT or in HTML) and be able to modify it based on user's input.

2nd EDIT So far, I've been programming functionality inside of the actual SVG file. In our setup, our SVG is an embedded object and we passed 'document' to the embedded SVG. Passing information from an embed object to and from HTML is quite doable since the HTML has access to our SVG functions and the SVG has access to the 'document'.

There are more transparent ways of doing so (Rapahel) where FireBug could see the SVG directly which is nice but now not quite necessary. Thus far, I don't think any of the solutions I've looked at were IFrames but I could be wrong. A little warning, SVG can be pretty slow sometimes.

I would say my issue is solved (sort of?) but I'm not using Raphael, jQuery, nor GWT at the moment but the method I described in my answer should still work if I want to use GWT.

解决方案

After playing around a bit, I've been most successful with using Raphaël (which handles cross-browser compatibility) though I suspect anything along those lines would work just fine. Basically I do the following in JavaScript:

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

Then I would do the following in 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);
}-*/;

I've also been reading around and it seems that porting Raphaël into GWT (this article is a good read) will not only increase performance (as per some post I read on Google Groups but can't find at the moment - they mentioned the compiler does quite a bit of work) but also facilitate coding & debugging.

So I accomplished my goal of being able to manipulate the SVG directly (somewhat until I port Raphaël into Java or at least create wrappers). I have yet to look seriously into the Google Visualization API but I suspect it might work just as well but I'm not sure if it is robust enough for my needs.

An important thing I believe I was missing as stated on Raphaël's site was the following:

This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.

这篇关于在GWT中使用SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！