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); |