Skip to content

xswei/FlyLine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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重叠:

image

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

image

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

image

图4表示p1已经到达e点,p2还未到达:

image

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

image

绘制时在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=-1i=1

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

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

image

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

About

基于canvas的飞线图

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published