预绘制拉斐尔屏幕，将它们保存到文件并在运行时加载

Pre-Drawing Raphael screens, save them to file and load at runtime

本文关键字：存到文件加载运行时绘制屏幕更新时间：2023-09-26

我是Raphael的新手，想做一些关于如何构建我的应用程序的基本问题：

我需要在可视化图形编辑器上绘制模型并将它们保存到文件中(我称之为屏幕(。在运行时，我需要加载这些屏幕并使用 Ajax 从服务器数据对它们进行动画处理。

使用 SVG，我可以使用以下简单命令加载数据：

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

此外，在SVG上，我们可以使用一些图形可视化编辑器，这就是我们构建屏幕所需的全部内容。其余的如果javascript代码获取元素ID并在运行时基于ajax调用更改其属性以获取服务器数据。

由于旧浏览器不支持 SVG，一个自然的选择是选择 Raphael，但我不知道是否有支持拉斐尔脚本语言的可视化图形编辑器以及如何在运行时保存/加载这些脚本。

那么，可视化编辑我的模型，将它们保存到文件中并使用Raphael实时加载的最佳方法是什么？

Ian 的答案是一个解决方案。另一种方法是将SVG文档转换为Raphael可以理解的数据结构。

对于相对简单的SVG图像，您可以使用svg2path。它将SVG文件(或来自URL的svg(转换为可以加载到Raphael中的路径。从文档中，在命令行上运行以下命令：

svg2path some.svg

生成一个名为 some.path 的路径文件，该文件可以在 Raphael 中加载(大概使用 paper.path() 方法(。

它在github和npm上可用。

你可以使用像 https://github.com/wout/raphael-svg-import 或 https://github.com/jspies/raphael.serialize https://github.com/crccheck/raphael-svg-import-classic 这样的插件来帮助你开始。我认为你可能需要做一些额外的工作来应对团体和拉斐尔。

编辑澄清一下，我不确定您的其他评论中您所说的图形编辑器中的拉斐尔模式是什么意思。您可以将图形作为直接的SVG导入。我不确定为什么需要支持拉斐尔脚本。

VectorEditorJS对你来说是一个很好的起点。查看editor.js以在其上构建或重建自己的功能。 Here's演示。

编辑

SVGEdit演示具有将矢量保存为 svg 的代码。您可以查看代码。