网页矢量图形 Raphael 学习

入门介绍，http://cancerbero.mbarreneche.com/raphaeltut/#sec-types-gradient

因为公司的欧洲网站需要使用到Chart即报表，虽然可以用Google的JS报表工具，但有的还是需要自定义，所以找了之前的一个JS库。发现这个库还是通过leaf这个网站，http://www.nissanusa.com/leaf-electric-car/index。

比较难理解的是 三次贝塞曲线及二次贝塞曲线，一开始不知道，三次就是两个控制点，二次就是一个控制点。给我的一个代码看看。p="M20,20q0,-20,30,-20l90,0q30,0,30,20z"

M: 移动到20，20起点。

q：二次贝塞曲线,控制点是起点和终点(30,-20) 的中间点

Raphael Text的位置

var paper= Raphael(0,0,200,300);

var t=paper.text(0,0,'Hello');

默认情况下，文字的中点对齐在[0,0]点，跟平常的左对齐有点出入，需要调整成 paper.text(0,0,'Hello').attr({'text-anchor':'start'}), 详细可参考 Raphael Document的 attr().

Raphael 画线粗细的问题

使用Raphael 时，总感觉画的很很粗，后来发现，需要将起点的值设置为小数点  **.5

var paper=Raphael(0,0,800,600);

paper.path(M10,2H400);

这个画来的线，要粗一点，有2个像表的宽，经过测试，最细线值为M10,2.5H400

Raphael 画圆

paper.path("M250,200a50,50,0,1,1,0.1,0").attr({"fill":"#ff0"})

M: 画笔移动到 250,200,

a50,50,0,1,1,0.1,0  前两个为长半径及短半径，第三至第5个不需要设置，0.1, 0 即（相对于起点250,200）, 使用曲线不闭合。