2013-10-09 52 views
0

I'm新文件和負載在運行時拉斐爾和想這樣做就如何構建我的應用程序的一些基本問題:我需要預拉伸拉斐爾屏幕,它們保存到

對視覺繪製模型圖形編輯器並將它們保存到文件(我稱之爲屏幕)。在運行時,我需要加載這些屏幕並使用Ajax從服務器數據製作動畫。

使用SVG我可以使用這個簡單的命令加載數據:

<object id="svgobject" type="image/svg+xml" data=".\svg\svgfilename.svg"></object> 

此外,在SVG,我們可以使用一些圖形可視化編輯器和that's都需要我們建立的屏幕。其餘的如果JavaScript代碼來獲取元素ID並在運行時改變它們的屬性,基於Ajax調用來獲取服務器數據。

由於舊版瀏覽器不支持SVG,因此一種自然的選擇就是選擇Raphael,但我不知道是否有支持Raphael腳本語言的可視化圖形編輯器以及如何在運行時保存/加載這些腳本。

那麼,什麼是最好的方法來視覺編輯我的模型,將它們保存到文件並使用Raphael實時加載?

回答

1

伊恩的答案是一個解決方案。另一種做法是將SVG文檔轉換爲Raphael可以理解的數據結構。

對於相對簡單的SVG圖像,您可以使用svg2path。它將SVG文件(或URL中的svg)轉換爲可以加載到Raphael中的路徑。從文檔,運行在命令行上執行以下操作:

svg2path some.svg 

生成稱爲some.path路徑文件,可以在聖拉斐爾被加載(大概使用paper.path()方法)。

它在githubnpm上可用。

+0

有趣,沒有想到這一點。 – Ian

0

VectorEditorJS對你來說是一個不錯的起點。查看editor.js來構建或重建你自己的功能。 Here's演示。

編輯

SVGEdit演示得到了代碼來保存向量作爲svg.You可以看看代碼。

1

你可以使用像https://github.com/wout/raphael-svg-importhttps://github.com/jspies/raphael.serializehttps://github.com/crccheck/raphael-svg-import-classic這樣的插件讓你開始吧。我想你可能需要做一些額外的工作來應付團隊和拉斐爾。

編輯澄清,我不確定從你的其他評論你是什麼意思拉斐爾模式從圖形編輯器。您可以將圖形作爲直觀的SVG並導入。我不確定爲什麼需要支持Raphael腳本。

+0

有兩種策略 - 你可以讓Raphael像你建議的那樣解析SVG,或者讓你的矢量編輯器輸出Raphael可以理解的JSON數據。 – slebetman