FlyLine

基于canvas的飞线图

引用flyline.js文件

全局flyline对象，包含以下方法：

• setCanvas
• addFlyL

初始化

首先使用setCanvas方法指定飞线图所处的画布,此方法没有返回值,参数为一个css选择器字符串:

flyline.setCanvas("#canvas");

添加直线型飞线

flyline.addFlyL(o)

其中o为对象类型,一个完整的o应该如下:

o = {
	start:{x:100,y:100},
	target:{x:300,y:500},
	color:"#eeff00",
	time:1000,
	len:0,
	size:5
}

使用方法

在引入flyline.js后可以在自己的脚本中使用:

flyline.setCanvas("#cavnas");
flyline.addFlyL(o);

//添加后立即开始，完成后自动销毁，可以多次调用addFlyL方法

参数说明

属性	描述	类型	必须
start	起点坐标	对象类型，包含x/y属性	是
target	终点坐标	对象类型，包含x/y属性	是
color	飞线颜色	CSS颜色字符串	否,默认黑
time	持续时间	毫秒	否,默认1000
len	飞线长度	范围0-1	否,默认1
size	飞线宽度	像素	否,默认5

飞线原理说明

首先看一下此飞线图设计原理5个过程

图1为初始状态，s为起点，e为终点，p1和p2为两个中间点，初始时候s、p1和p2重叠：

图2为p1匀速离开s点，那么p2点离开s点的时间由参数len决定，len其实是个百分比，用来表示p1到p2之间的距离与s到e之间距离的比例：

图3为p1和p2同时过渡到e点，由于速度不变，p1和p2的相对位置保持不变：

图4表示p1已经到达e点，p2还未到达：

图5表示p1和p2都到达e点，此时飞线完成，从飞线数组中移除此条飞线释放内存：

绘制时在p1和p2之间绘制一条渐变线条即可。在计算时候p1和p2分别有一个参数t,这个参数从0递增到1，增量由帧率+预定的时间算出。

二次贝塞尔飞线

添加一个二次贝塞尔飞线:

var o = {
	start:{x:100,y:100},
	target:{x:300,y:500},
	color:"#eeff00",
	time:1000,
	len:0,
	size:5,
	i:0.3
}

flyline.addFlyQ(o);

参数说明:

属性	描述	类型	必须
start	起点坐标	对象类型，包含x/y属性	是
target	终点坐标	对象类型，包含x/y属性	是
color	飞线颜色	CSS颜色字符串	否,默认黑
time	持续时间	毫秒	否,默认1000
len	飞线长度	范围0-1	否,默认1
size	飞线宽度	像素	否,默认5
i	弯曲程度	系数 范围[-1,1]	否,默认0.3

控制点参数

控制点参数为i,如下图，从起点s到终点e，控制点总是位于中垂线上，边界为i=-1和i=1。

i为负值时控制点位于右侧，i为正值时位于左侧

i=1或i=-1时，控制点最远，此时控制点距离s和e的中点距离为s到e的距离。此时线条最弯曲。

曲线飞线存在小问题，接下来考虑使用lineDash做