首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Raphael学习札记(1)-简介

2012-07-01 
Raphael学习笔记(1)--简介Raphael是一个JavaScript类库,用来在web上绘制矢量图。Raphael通过判断浏览器的不

Raphael学习笔记(1)--简介

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 InternetExplorer?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"}]);

热点排行