xswei / flyline

基于canvas的飞线图

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做

flyline's Issues

请问您这个飞线效果能不能做成带箭头的？

请问您这个飞线效果加个箭头，要怎么加呢？谢谢！
function drawQ(f){
var p1,p2;
if(f.t1<1){
f.t1 += f.step;
f.t1 = Math.min(1,f.t1);
}
if(f.t1>=f.l){
f.t2 += f.step;
f.t2 = Math.min(1,f.t2);
}
p1 = getPointQuadRaticBeizer({x:0,y:0},f.ctl,{x:f.dis,y:0},f.t1);
p2 = getPointQuadRaticBeizer({x:0,y:0},f.ctl,{x:f.dis,y:0},f.t2);

	context.save();
	context.translate(f.s.x,f.s.y);
	context.rotate(f.r);
	var grd = context.createLinearGradient(p2.x, p2.y,p1.x, p1.y);
	grd.addColorStop(0,"rgba(255,255,255,0)");
	grd.addColorStop(1,f.c);
	grd.addColorStop(1,"rgba(255,255,255,0)");
	context.beginPath();
	
	context.strokeStyle = grd;
	context.lineWidth = f.size;
	context.moveTo(0,0);
	context.translate(f.ctl.x,f.ctl.y);
	context.rotate(45*Math.PI/180);
	context.quadraticCurveTo(f.ctl.x,f.ctl.y,f.dis,0);
	context.stroke();
	context.beginPath();
	context.fillStyle = f.c;
	context.arc(p1.x,p1.y,f.size/2,0,Math.PI*2);
	context.fill()
	context.restore();
}