在 Html5 画布上绘制带有滚动条的可缩放时间线

Question

我的 Web 项目需要时间线。 this 之类的东西 - 我阅读了这条时间线的代码，但由于没有足够的文档记录而无法理解。

我的问题是这一切背后的数学原理（不是与画布的交互）。
我havereadseveral 有关于滚动条数学的文章，但都没有谈到缩放。
一些 articles 建议保留具有非常大宽度值的画布元素 - 并仅显示 View Port.
我认为这不是正确的做法 - 我只想绘制正确的视口。

在我的项目中，我有 n 点数组。
每个点都保存以秒为单位的时间值，但并非所有点都在 Viewp 端口内。

考虑到当前的缩放级别，我该如何计算：

应该画哪些点，在哪里画？

拇指的大小和位置是多少？

有没有关于这种事情的文章/教程？

Answer 1

您也许可以使用Flot 之类的东西来处理点的放置以及缩放和平移。 Here's 就是一个例子。

还有一堆其他的绘图库，here a good list。

Answer 2

您总是拥有 Raphealjs.com，这是最常用的 SVG 库之一，您可以使用它编写自己的 js 来生成时间线。