目录
1、前端绘图利器-Raphael
2、前端如果使用Raphael绘制流程图会怎样?
今天我们展示一下Raphael经常使用的API,而且该API能够帮助我们完成很多工作。先看看效果:
一个元素在指定路径上做匀速运动。
如果我们要完成这个效果需要运用物理知识:匀速运动公式等;注意“等”;前提你还是学校的学霸,你还记得公式。进入公司后,往往我们开始掉头发,生成肉体游泳圈,哪里还记得什么公式呢。
科普
匀速运动公式:v=s/t 变形公式:s=vt,t=s/v
平抛运动常用公式:
(1)h=1/2gt2 ;(2)x=v0t;(3)vy=gt。
以上这些公式能应用到程序里面完成今天这个运动效果吗?相信你自己心中已经有答案了。
需要使用到的Raphael-API
paper.circle(x,y,r)// 圆形paper.path([pathString]) // 绘制横线箭头paper.text(x,y,text)// 绘制文本Raphael.getTotalLength(path)//获取路径长度Raphael.getPointAtLenght(path,length)// 获取点位分析一下
物体要完成直线运动需知道物体的起点和终点。这是完成直线运动两个关键点的坐标。
物体要完成曲线运动需要用到运动公式,但是今天我们不需要这么复杂的计算,只需要使用一个简单的API和语法就可以了。现在我们需要确定曲线运动拐点的坐标即可(上图的红色弧度点)。
创建两个圆形对象起点(start)和终点(end)
创建运动物体对象(ball)
创建运动轨迹线(line)
创建运动轨迹线这里使用SVG Path语法,通过C命令进行曲线绘制。命令帮助文档如下:
svg path命令帮助文档
代码片段
定时绘图
1、我们需要计算运行总长度和获取停留点的坐标
获取总长度:
var runLength = Raphael.getTotalLength(ballline.path) // path为运动轨迹线
获取停留点的坐标:
// 获取球运动的坐标
var point = Raphael.getPointAtLength(this.line.path, this.step)
2、定时运动重绘算法
代码片段
说明:这里主要讲解思路,如需完整代码请@作者或者留言
是否期待更多精彩讲解,可以点赞鼓励一下+1,未完待续......