{"id":13626438,"url":"https://github.com/thelostword/timeline","last_synced_at":"2025-04-16T14:33:33.286Z","repository":{"id":57678095,"uuid":"489602840","full_name":"thelostword/timeline","owner":"thelostword","description":"Canvas timeline, supports zooming, dragging, and infinite scrolling.       -- Canvas 时间轴组件，支持缩放、拖拽、无限滚动","archived":false,"fork":false,"pushed_at":"2024-09-19T09:31:39.000Z","size":630,"stargazers_count":42,"open_issues_count":2,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-28T11:43:37.417Z","etag":null,"topics":["canvas","date","time","timeline"],"latest_commit_sha":null,"homepage":"https://thelostword.github.io/timeline/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thelostword.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-07T07:28:55.000Z","updated_at":"2024-10-25T03:18:09.000Z","dependencies_parsed_at":"2024-01-14T07:17:41.443Z","dependency_job_id":"f6c0f061-ec36-4942-b448-b3855f5caa59","html_url":"https://github.com/thelostword/timeline","commit_stats":{"total_commits":51,"total_committers":1,"mean_commits":51.0,"dds":0.0,"last_synced_commit":"2834f00cddb4e41dc9204de91a97d815fd24b5be"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thelostword%2Ftimeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thelostword%2Ftimeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thelostword%2Ftimeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thelostword%2Ftimeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thelostword","download_url":"https://codeload.github.com/thelostword/timeline/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223601321,"owners_count":17171833,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","date","time","timeline"],"created_at":"2024-08-01T21:02:18.640Z","updated_at":"2025-04-16T14:33:33.277Z","avatar_url":"https://github.com/thelostword.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"简体中文 | [English](./README_EN.md)\n# Timeline\nCanvas 时间轴，支持缩放、拖拽、无限滚动、自定义控制级别\n![预览图](./example/demo.png)\n\u003ca href=\"https://thelostword.github.io/timeline/\" target=\"_blank\"\u003e演示地址\u003c/a\u003e\n\n## 如何使用\n### ES Module\n``` shell\nnpm install @losting/timeline\n```\n``` html\n\u003ccanvas id=\"Timeline\"\u003e\u003c/canvas\u003e\n```\n\n``` JavaScript\nimport Timeline from '@losting/timeline';\n\nconst timeline = new Timeline('#Timeline', {\n  fill: false,\n  width: 1000,\n  height: 60,\n});\n\n// 自定义绘制\ntimeline.draw({\n  currentTime: 1651827817000,\n  areas: [{\n    startTime: 1651827433000,\n    endTime: 1651829413000,\n    bgColor: '#f897aa'\n  },{\n    startTime: 1651829533000,\n    endTime: 1651832533000,\n  }],\n});\n\ntimeline.on('dragged', (timestamp) =\u003e {\n  console.log(new Date(timestamp));\n  // ...\n})\n```\n\n### CDN\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eDocument\u003c/title\u003e\n  \u003cscript src=\"https://unpkg.com/@losting/timeline@4.0.0/dist/timeline.iife.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ccanvas id=\"Timeline\"\u003e\u003c/canvas\u003e\n  \u003cscript\u003e\n    const timeline = new window['$timeline']('#Timeline');\n    // ....\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## 配置文档\n### Config\n| 属性 | 类型 | 是否必填 | 默认值 | 说明 |\n| --- | --- | --- | --- | --- |\n| fill | boolean | 否 | true | 是否适应父容器宽高，若为false则需要手动设定canvas宽高 |\n| width | number | 否 | 1000 | canvas宽度 |\n| height | number | 否 | 60 | canvas高度 |\n| bgColor | string | 否 | rgba(0,0,0,0.5) | canvas背景色 |\n| textColor | string | 否 | #ffffff | 文字颜色 |\n| fontFamily | string | 否 | Arial | 字体 |\n| timezone | string | 否 | - | 时间显示的时区。支持 IANA 时区格式（如：'Asia/Shanghai'、'America/New_York'、'Europe/London'）或 UTC 偏移格式（如：'+04:00'、'-08:00'） |\n| scaleColor | string | 否 | #ffffff | 刻度颜色 |\n| scaleSpacing | number | 否 | 7 | 刻度间距 |\n| areaBgColor | string | 否 | #ffffff55 | 阴影区域背景颜色 |\n| pointerColor | string | 否 | #00aeec | 当前时间指针颜色 |\n| pointerWidth | number | 否 | 3 | 当前时间指针宽度 |\n| pointerDisplayWidth | number | 否 | 100 | 当前时间显示区域宽度 |\n| pointerDisplayHeight | number | 否 | 14 | 当前时间显示区域高度 |\n| fps | number | 否 | 60 | 帧数 |\n| zoom | integer | 否 | 3 | 初始缩放值，`0` ~ `timeSpacingList.length - 1` 之间(包含)的正整数。 对应 `timeSpacingList` 的索引值 |\n| timeSpacingList | number[] | 否 | `[10, 100, 1000, 10000, 60000, 600000, 3600000, 86400000, 604800000]` | 自定义每刻度所占时间（毫秒） |\n| scaleHeight | object | 否 | `{ long: this.$canvas.height / 3, short: this.$canvas.height / 10 }` | 刻度高度，如果设置此项，则long、short必填 |\n| bgTextColor | string | 否 | rgba(`textColor`, .18) | 背景文字的颜色 |\n| minimumTime | number | 否 | -Infinity | 限制可选范围，允许最小时间 |\n| maximumTime | number | 否 | Infinity | 限制可选范围，允许最大时间 |\n| thresholdsConfig | Object | 否 | [见默认配置文件](./src/config.ts) | 对应缩放阈值的配置, 当 `timeSpacingList` 配置时，该选项必填 |\n\n\n### Events\n| 事件名 | 说明 | 参数示例 |\n| --- | --- | --- |\n| draw | timeline 的自定义绘制方法 | draw([DrawConfig](#DrawConfig)) |\n| on | 监听 timeline 内部事件，目前只支持事件名 `dragged`， 拖动结束的回调事件。 | on(name, (listener) =\u003e void) |\n| off | 取消监听 timeline 内部事件 | off(name, listener)、 取消全部 off('*') |\n| getCurrentTime | 获取当前时间 | - |\n\n\n#### DrawConfig\n| 参数 | 类型 | 是否必填 | 默认值 | 说明 |\n| --- | --- | --- | --- | --- |\n| currentTime | number | 否 | `Date.now()` | 中心点指向时间戳（毫秒） |\n| areas | Object[] | 否 | [] | 阴影区配置，见 [AreaConfig](#AreaConfig) |\n\n##### AreaConfig\n| 参数 | 类型 | 是否必填 | 默认值 | 说明 |\n| --- | --- | --- | --- | --- |\n| startTime | number | 是 | - | 阴影区域开始时间戳（毫秒） |\n| endTime | number | 是 | - | 阴影区域结束时间戳（毫秒） |\n| bgColor | string | 否 | `Config.bgColor` | 当前阴影区背景颜色 |\n\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n\nCopyright (c) 2022-present losting\u003chttps://www.github.com/thelostword\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthelostword%2Ftimeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthelostword%2Ftimeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthelostword%2Ftimeline/lists"}