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()是形状对象的一个常用方法，它可以改变形状对象的属性，例如：

//绘制一个矩形，左上角位于(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);

阅读全文……