raphaeljs画图

raphaeljs画图

raphaeljs,画图,最关键的需要理解SVG的path,而难点在于path是遵循贝塞尔曲线的,贝塞尔曲线是由起始点和终点以及两个控制点总共4个点来确定曲线的走向的,曲线的函数是一个基于时间的动态函数。具体贝塞尔曲线的方程参看这里http://zh.wikipedia.org/wiki/%E8%B2%9D%E5%A1%9E%E7%88%BE%E6%9B%B2%E7%B7%9A

而SVG中各个说明如下:http://en.wikipedia.org/wiki/Scalable_Vector_Graphics和http://www.w3.org/TR/SVG/paths.html

用raphaeljs画曲线的demo:http://fanstu.sinaapp.com/god/raphaeljs/path.php

具体path的字符串含义:

M  moveto  (x y)+

Z  closepath  (none)

L  lineto  (x y)+

H  horizontal lineto  x+

V  vertical lineto  y+

C  curveto  (x1 y1 x2 y2 x y)+

S  smooth curveto  (x2 y2 x y)+

Q  quadratic Bézier curveto  (x1 y1 x y)+

T  smooth quadratic Bézier curveto  (x y)+

A  elliptical arc  (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

R  Catmull-Rom curveto*  x1 y1 (x y)+

这里,M代表起始点的位置,也就是说利用raphael从哪个坐标开始画,如果是画直线,那么L指向的位置是直线的终点。H和V代表水平和垂直的直线。C是最常用的也是参数最多最复杂的,C代表curve就是基于被赛尔曲线的path,x1 y1 x2 y2是两个控制点的坐标,x y是终点。而S,Q,T都是C的升级版平滑和二阶及二阶平滑。

当然raphael也提供了基础的比如circle,rect,text和image等元素,构造这样的对象直接用于画图控制,利用raphael已经可以做任何画图了。



你可能感兴趣的:(raphaeljs画图)