Raphaeljs 插件实现任意SVG节点加载

SVG 和Raphael

     http://raphaeljs.com/ 官网地址

     一般在做svg 开发的时候你可选的三方类库实在太少了，Raphael 是一个用户量比较大，而且一直在升级维护，只能凑活用，Raphael 有一个很强大的功能就是几乎通吃所有浏览器，这种主要兼容旧式浏览器的设计基本抛弃了很多浏览器对svg高级功能的支持，例如SMIL 协议，但是相对来说能支持这么多浏览器版本ie6+ firefox chrome 而且性能还不错，api 非常简单使用户开发难度大大降低，官方网站的例子也挺炫。总体感觉svg 是种非常好的技术，尤其是在互联网web 中有天然的优势，而且几乎所有浏览器都支持，但是不知道svg 一直没有发展起来，也就是做charts控件公司和地图行业公司一般会使用，其他用应用的的不是很多，但是前一段有个趋势排名svg 上升势头不错，svg 应该是网页图形开发的非常重要的选择，不应该被边缘化，Raphael 的作者挺牛的还是参与svg 标准制定后来被sencha 弄走做charts extjs4系列的chart 好像就是他负责做的，这些都是闲话瞎扯。

     使用中的烦恼

在使用raphael 的时候都被折磨过，raphael 基本都是编程式节点加载，通过代码设置svg 的节点属性

 

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

 上边的代码

1：创建svg 画布

2：创建一个circle 

3：给circle 添加属性

    但是我们在实际工作中相当一部分的工作时在使用美工绘制好的图形，对图形中的某些部分进行控制，

例如下图

 

      只要经常使用raphael或者使用Extjs4 系列 的开发者肯定对这只老虎特别熟悉，他的源码也比较恐怖，

http://docs.sencha.com/extjs/4.0.7/#!/example/draw/Tiger.html 这个是在线演示里边有绘制这只老虎的源代码1537 行，我以前在看到这个例子实在不理解作者的目的。

这只虎形成的过程应该是一下步骤

1：美工设计小样

2：使用SVG 绘图工具画出来

3：交给开发者

       开发者拿到这个svg 文件以后如果按照raphael 的做法那就是 把所有属性用raphael 的方式创建出来，我感觉任何程序员会直接疯掉的，这个工作量是让人无法接受，而你做的着所有的一切仅仅是想最后对这只虎进行 平移，缩放，隐藏等这些简单操作

       我在当时使用的时候特别希望raphael 的作者提供一个节点加载工具，把这个复杂无比的东西一次性加载当做一个整体或者是一个图层处理，

什么是图层：

           我不是专业做图形处理的这里是说一下我的理解，就以这只老虎为例子，如果一个画布上加载了一只老虎后又加载了另一只，我们对两个都是整体处理，可以整体调整位置，覆盖关系等就视为一个图层，加载了两个就是两个图层，可以单独处理互不影响，没有相对定位的问题，每个图层的位置都是相对于画布，这样业务处理会非常简单方便利于操作和理解

 

Raphael 不支持节点加载的方式处理svg 图形，在google上搜过很多的方式都没有找到如何处理已存在的节点加载方式，最近重新研究Raphael 尝试找方式处理这个问题，下边代码是通过写了一个Raphael 的插件解决加载节点，在Raphael绘图引擎的底层增加的对<g> 标签的支持，所以就可以对svg 进行类似于图层的处理。

代码中有对 path circle g 节点处理，不停的点击按钮就可以看出图形的变化 

 

 

var canvas=Raphael(10,50,320,200); 
var node= document.getElementById("cr");  
var r1=canvas.circle(50, 50, 10);
r1.attr("fill", "#00ff00");
r1.attr("stroke", "#00ff00");
var r2=canvas.circle(20, 20, 30);
r2.attr("fill", "#00ff00");
r2.attr("stroke", "#00ff00");
var g=canvas.load(document.getElementById("gid")); // 使用扩展的load 方法加载一个外边 g标签
var tg=canvas.load(document.getElementById("triger"));//使用扩展的load 方法加载一个老虎var g= canvas.g(); // 创建一个g 标签

g.add(r1);        // 使用g 扩张的add 属性增加子元素
g.add(r2);
//circle.transform("t100,100r45t-100"); 
//path.transform("t500,500");
g.transform("t500,500"); // 对g 元素进行整体移动

 

 

 

 后记1：

          扩展的g 标签可以通过raphael 的 transform 接口进行处理，但是好像使用animate 的使用出现了一些问题，正在研究animate 的实现原理和transform 的区别如何把animate 的算法应用的到g 标签需要研究一下。

         

版本改进1：

                增加对vml group标签的支持，

                增加g 标签add addArray 功能支持 ，可以很简单的把任意一个rapheal 节点放到g 或group 标签下

 

版本改进2：

               实现了svg 在g 标签下raphael的animate 和transform支持，但是无法解决vml 中group 下的transform 和animate，