Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thelostword/timeline
Canvas timeline, supports zooming, dragging, and infinite scrolling. -- Canvas 时间轴组件，支持缩放、拖拽、无限滚动
https://github.com/thelostword/timeline
canvas date time timeline
Last synced: 1 day ago
JSON representation
Canvas timeline, supports zooming, dragging, and infinite scrolling. -- Canvas 时间轴组件，支持缩放、拖拽、无限滚动
- Host: GitHub
- URL: https://github.com/thelostword/timeline
- Owner: thelostword
- License: mit
- Created: 2022-05-07T07:28:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-19T09:31:39.000Z (about 2 months ago)
- Last Synced: 2024-10-28T11:43:37.417Z (13 days ago)
- Topics: canvas, date, time, timeline
- Language: TypeScript
- Homepage: https://thelostword.github.io/timeline/
- Size: 615 KB
- Stars: 42
- Watchers: 1
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-repos - thelostword/timeline - Canvas timeline, supports zooming, dragging, and infinite scrolling. -- Canvas 时间轴组件，支持缩放、拖拽、无限滚动 (TypeScript)
README
简体中文 | [English](./README_EN.md)
# Timeline
Canvas 时间轴，支持缩放、拖拽、无限滚动、自定义控制级别
演示地址
## 如何使用
### ES Module
``` shell
npm install @losting/timeline
```
``` html
```
``` JavaScript
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
``` html
Document
const timeline = new window['$timeline']('#Timeline');
// ....
```
## 配置文档
### 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 | 否 | [见默认配置文件](./src/config.ts) | 对应缩放阈值的配置, 当 `timeSpacingList` 配置时，该选项必填 |
### Events
| 事件名 | 说明 | 参数示例 |
| --- | --- | --- |
| draw | timeline 的自定义绘制方法 | draw([DrawConfig](#DrawConfig)) |
| on | 监听 timeline 内部事件，目前只支持事件名 `dragged`， 拖动结束的回调事件。 | on(name, (listener) => void) |
| off | 取消监听 timeline 内部事件 | off(name, listener)、 取消全部 off('*') |
| getCurrentTime | 获取当前时间 | - |
#### DrawConfig
| 参数 | 类型 | 是否必填 | 默认值 | 说明 |
| --- | --- | --- | --- | --- |
| currentTime | number | 否 | `Date.now()` | 中心点指向时间戳（毫秒） |
| areas | Object[] | 否 | [] | 阴影区配置，见 [AreaConfig](#AreaConfig) |
##### AreaConfig
| 参数 | 类型 | 是否必填 | 默认值 | 说明 |
| --- | --- | --- | --- | --- |
| startTime | number | 是 | - | 阴影区域开始时间戳（毫秒） |
| endTime | number | 是 | - | 阴影区域结束时间戳（毫秒） |
| bgColor | string | 否 | `Config.bgColor` | 当前阴影区背景颜色 |
## License
[MIT](https://opensource.org/licenses/MIT)
Copyright (c) 2022-present losting