@losting/timeline

Canvas timeline supports zooming, dragging, infinite scrolling, and custom control levels.

5.0.0
Source
npm

Version published: 2 months ago

Weekly downloads: 42; decreased by-43.24%

Maintainers: 0

Weekly downloads

Created: 3 years ago

Source

简体中文 | English

Timeline

Canvas 时间轴，支持缩放、拖拽、无限滚动、自定义控制级别预览图演示地址

如何使用

ES Module

npm install @losting/timeline

<canvas id="Timeline"></canvas>

import Timeline from '@losting/timeline';

const timeline = new Timeline('#Timeline', {
  fill: false,
  width: 1000,
  height: 60,
});

// 自定义绘制
timeline.draw({
  currentTime: 1651827817000,
  areas: [{
    startTime: 1651827433000,
    endTime: 1651829413000,
    bgColor: '#f897aa'
  },{
    startTime: 1651829533000,
    endTime: 1651832533000,
  }],
});

timeline.on('dragged', (timestamp) => {
  console.log(new Date(timestamp));
  // ...
})

CDN

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/@losting/timeline@4.0.0/dist/timeline.iife.js"></script>
</head>
<body>
  <canvas id="Timeline"></canvas>
  <script>
    const timeline = new window['$timeline']('#Timeline');
    // ....
  </script>
</body>
</html>

配置文档

Config

属性	类型	是否必填	默认值	说明
fill	boolean	否	true	是否适应父容器宽高，若为false则需要手动设定canvas宽高
width	number	否	1000	canvas宽度
height	number	否	60	canvas高度
bgColor	string	否	rgba(0,0,0,0.5)	canvas背景色
textColor	string	否	#ffffff	文字颜色
fontFamily	string	否	Arial	字体
scaleColor	string	否	#ffffff	刻度颜色
scaleSpacing	number	否	7	刻度间距
areaBgColor	string	否	#ffffff55	阴影区域背景颜色
pointerColor	string	否	#00aeec	当前时间指针颜色
pointerWidth	number	否	3	当前时间指针宽度
pointerDisplayWidth	number	否	100	当前时间显示区域宽度
pointerDisplayHeight	number	否	14	当前时间显示区域高度
fps	number	否	60	帧数
zoom	integer	否	3	初始缩放值，`0` ~ `timeSpacingList.length - 1` 之间(包含)的正整数。对应 `timeSpacingList` 的索引值
timeSpacingList	number[]	否	`[10, 100, 1000, 10000, 60000, 600000, 3600000, 86400000, 604800000]`	自定义每刻度所占时间（毫秒）
scaleHeight	object	否	`{ long: this.$canvas.height / 3, short: this.$canvas.height / 10 }`	刻度高度，如果设置此项，则long、short必填
bgTextColor	string	否	rgba(`textColor`, .18)	背景文字的颜色
thresholdsConfig	Object	否	见默认配置文件	对应缩放阈值的配置, 当 `timeSpacingList` 配置时，该选项必填

Events

事件名	说明	参数示例
draw	timeline 的自定义绘制方法	draw(DrawConfig)
on	监听 timeline 内部事件，目前只支持事件名 `dragged`，拖动结束的回调事件。	on(name, (listener) => void)
off	取消监听 timeline 内部事件	off(name, listener)、取消全部 off('*')
getCurrentTime	获取当前时间	-

DrawConfig

参数	类型	是否必填	默认值	说明
currentTime	number	否	`Date.now()`	中心点指向时间戳（毫秒）
areas	Object[]	否	[]	阴影区配置，见 AreaConfig

AreaConfig

参数	类型	是否必填	默认值	说明
startTime	number	是	-	阴影区域开始时间戳（毫秒）
endTime	number	是	-	阴影区域结束时间戳（毫秒）
bgColor	string	否	`Config.bgColor`	当前阴影区背景颜色

License

MIT

Keywords

FAQs

What is @losting/timeline?

Is @losting/timeline popular?

Is @losting/timeline well maintained?

Package last updated on 19 Sep 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install