js画图工具:Raphael绘制矢量图学习笔记（1）--简介

[url]http://lblovesnow-163-com.iteye.com/blog/1478090[/url]

[color=red][b]更多资料可以参考楼主的文章[/b][/color]

Raphael是一个JavaScript类库，用来在web上绘制矢量图。Raphael通过判断浏览器的不同，创建svg或vml对象，从而达到跨浏览器的效果。【svg简介，svg入门教程，vml简介，vml入门教程】
这意味着，无论是svg还是vml对象，都是一种DOM对象，所以我们可以为它们绑定事件或者修改它们。
Raphael支持用户自定义的扩展，我们可以在此之上扩展自己的组件。例如：gRaphael就是基于raphael创建的图形类库。
Raphael支持的浏览器：Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+

使用Raphael很简单：创建画布，绘制图形，设置样式。代码如下：

// 创建一个320 × 200，左上角距离窗口(x=10,y= 50)的画布  
var paper = new Raphael(10, 50, 320, 200);  

//创建一个圆，圆心的坐标为(x = 50, y = 40), 半径为10。  
var circle = paper.circle(50, 40, 10);  

// 给圆填充颜色为： red (#f00)  
circle.attr("fill", "#f00");  

// 给圆设置边框为： white(#fff)  
circle.attr("stroke", "#fff");  

这只是一个非常简单的例子，展示了raphael的使用。如果以前接触过svg、vml或者canvas，那么raphael上手很容易。raphael支持链式写法（类似于JQuery），但是，需要注意一点，new出来的Raphael返回的是Paper对象，通过Paper创建的图形返回的是Element对象，这就要求我们要熟悉哪些对象包含哪些方法，否则在链式书写的过程中会出现错误。

Raphael的创建有很多种，除了上面的那种之外，还有以下2种：

//第一种：  
//element:DOM对象或者DOM元素的id  
//width:宽度  
//height:高度  
//callback:上下文创建Paper时，执行的函数  
var raphael = new Raphael('raphael',400,400);  
var raphael = new Raphael(document.getElementById('raphael'),400,400);  

//第二种  
//array:[element,width,height,{property:value,<attribute>}]  
//    或者[x,y,width,height,{property:value,<attribute>}]  
//callback:上下文创建Paper时，执行的函数  
var raphael = Raphael(["raphael", 320, 200, {  
    type: "rect",  
    x: 10,  
    y: 10,  
    width: 25,  
    height: 25,  
    stroke: "#f00"  
}, {  
    type: "text",  
    x: 30,  
    y: 40,  
    text: "Dump"  
}]);