看下效果图:
12343534534jhd

先说下核心思路:

  1. 根据定义的圆心坐标画0~100的刻度;
  2. 红色指针围绕固定坐标的旋转;

基本的路径画图这里不详细介绍了。不会的同学可以看raphaeljs官网的api,多多练习即可。咱们直接说核心问题。

先说第一点根据圆心画刻度:用for循环进行绘制,还要用到一些数学的基础指示“勾股定理”。

需要R和弧度求得正弦、余弦的值,即刻度开始或结束点的X、Y坐标;

R是根据需求自定义的;

需要注意的是,弧度和角度是不同的。角度如图是半圆所以为180度,设定需要刻度的数量,180/刻度数量 = 角度; 角度 * 0.017453293 = 弧度;

Math.sin(弧度)为相对圆心的正弦,Math.cos(弧度)为余弦;

4353532dfdfew

看上图,raphaeljs画线段需要两点的不同坐标,这里相当于以Rb为半径的大圆刻度的不同坐标的正弦、余弦值,同理取得Rs为半径的圆上的不同刻度坐标。之前咱们用for循环刻度数量,所以一次循环可以得到,一条刻度线的开始点与结束点的不同坐标,也就是说可以画出一条刻度线。一次循环完整刻度线就画完了。那么0~100的刻度也是同样道理。只是更小半径圆的正弦、余弦。这里不阐述了。

再说第二点关于红色指针的旋转。

用路径画出红色指针。最好用变量定一下。后面修改比较方便,这里变量名为thePointer;要固定点旋转thePointer,需要三个参数、角度、cx、cy。

角度应该是后台传过来的,所以这边随便定义一个值即可。那么坐标的x、y是之前咱们用来求刻度线的圆心,然后结合attr的transform属性就可以旋转角度了。当然加上动画效果会更好的。

 

[infobox style=’regular’ static=’1′]点击这里下载DEMO[/infobox]