使用 Raphael js 和JSON 来实现具备保存功能的简单的仿QQ秀

本人花了不少时间泡在google上查找Raphael js 的相关资料，先将如下信息分享给对raphael js感兴趣的同学

简单QQ秀的功能实现： 用户进入该php 页面，显示一个用户可以自定义肤色，发型，身材等特征的个性定制区域。当然这些特征多是由一些简单的Raphael js绘制的图形构成. （关于Raphael js 绘图方面的资料，大家可以去其官方网站上找，比较简单，CSDN上也有人发过教程，就不再介绍了。）

网上基本查找不到保存Raphael js的资料，通过在其官网找到一个图形例子页面，并查看其页面源码，发现Raphael js使用SVG 格式来实现对所绘制图形的保存。当然在国外的一些问答网站上有人提到了这一点。

1.raphael js 转换成 json

 当用户完成简单QQ秀后点击保存按钮，则会将用户绘制的图形及填充色转换成JSON 关于转换成JSON ，花费了我很多的时间。 图形的一些基本属性都能够获取到并填写到JSON中，但是图形的显示或隐藏属性却怎么样都获取不到。 baidu 了之后，发现style=“display：none” 属性是 computed style 。 费了九牛二虎之类也没有将 style 中的display 属性获取到。

google 了一把，发现很多老外也写了关于 将 Raphael js 转换成JSON 的资料，但都回避了 display 属性的获取。想了半天，最后想到其实可以用 opacity： 1/0 来使绘制对象显示或隐藏。

虽然 在 firebug 和 chrome 中有看到图形有 style=“opacity ：1” 的属性， 但在绘制的时候使用 rect(...).attr("opacity","0") ; 可以将opacity 设置为 0 当然在 firebug 和chrome 中 图形的 属性为: style=“ opacity:0” opacity:0

请注意： 在style 中 opacity 设置为0了， 浏览器又重新添加了一个属性值为0的opacity 虽然增加了一相同的属性，但我们想要的效果已经达到： 这个时候 可以获取到 opacity 的属性值，当然这个属性值是 opacity:0 而不是从style 中获取到的。

2. JSON 转换成 SVG

在JQuery 中将raphael js 图形转换成 JSON 对象后，通过 JQuery 的ajax 功能将JSON 对象传递到另外一个将JSON 转换成SVG 的php文件中 请注意： 在 JQuery 的 $.post 中不要使用“json” 返回内容格式，也就是jQuery.post(url, [data] , [callback] , [type] ) 不需要设置【type】 的值

3. SVG 回传给原始页面

SVG 转换成功后回传给原始页面，原始页面的获取到这些SVG 数据时，AJAX 的回调函数 需要在在SVG 数据前添加 ‘’ .即 '......'形式，并将SVG 数据存储到数据库中

4.下次用户登录时，可以选择加载已经完成的图形。 至于如何使用Raphael js 将SVG 数据转换成图形，请自己google 。

如果需要上文提到的所有工具代码，请留言，谢谢！！！ 实现这个功能，花了我很长的时间去查阅资料，并经历了一个痛苦的调试过程，如有转载，请注明原文章地址并提

及到博主的用户名，谢谢！！！