raphael.js矢量绘图（3）绘图方法 – Dx. Yang
在RaphaelJs里，用来绘制形状的方法不算多，比较容易掌握。
矩形
参数：x轴坐标，y轴坐标，宽度，高度
paper.rect(x, y, width, height);
圆形
参数：圆心的x轴坐标，y轴坐标，圆半径
paper.circle(x, y, r);
椭圆
参数：圆心的x轴坐标，y轴坐标，x轴半径，y轴半径
paper.ellipse(x, y, xr, yr);
路径
paper.path('M10,10 L20,20');
路径是矢量绘图里最强大的工具，同时也比较复杂。
路径的参数是一组字符串，由“命令字母+坐标数字”的组合构成。
具体设置方法可以参看另外几篇介绍：
路径详解1（基本）：http://xbingoz.com/171.html
路径详解2（曲线）：http://xbingoz.com/194.html
MDN路径教程：http://xbingoz.com/320.html
图片
image方法可以引入图片文件，和HTML里的img标签作用相似。
paper.image(src, x, y, width, height);
文字
RaphaelJs有两个方法用来绘制文字
1、paper.text(50, 50, "Raphaël\nkicks\nbutt!");
text方法用来绘制一般文字，和HTML里的文字一样，它只能使用浏览器支持的字体。
在字符串参数中加入\n可以输入多行文字
2、paper.print(10, 50, "print", paper.getFont("Museo"), 30);
print方法可以渲染任意字体的文字，它的第四个参数是字体，这里需要使用paper.getFont()方法，该方法接受一个字符串参数，表示需要获取的字体名称。只要该字体已在系统中注册，就可以获取，并使用它渲染文字。
图形对象
绘制形状的方法会返回形状对象，该对象可以使用show()、hide()等方法。
attr()是形状对象的一个常用方法，它可以改变形状对象的属性，例如：
|
1
2
3
4
5
6
7
8
9
10
|
//绘制一个矩形，左上角位于(10,10)，宽800，高600，黑色填充//这里可以使用链式操作paper.rect(10, 10, 800, 600).attr('fill', '#000');//或者用一个变量缓存形状对象，便于后续操作var rect1 = paper.rect(10, 10, 800, 600);rect1.attr('fill', '#000');setTimeout(function(){ rect1.attr('fill', 'red');},1000); |