<< RGraph - HTML5 and JavaScript charts | 首页 | rockyuse/svgmap · GitHub >>

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

阅读全文……




发表评论 发送引用通报