gpt4 book ai didi

javascript - 在 Html5 Canvas 上绘制带滚动条的可缩放时间线

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:35:34 24 4
gpt4 key购买 nike

我需要为我的 Web 项目制定时间表。类似于 this - 我阅读了这个时间线的代码,但不理解它,因为它没有足够的文档。

我的问题是所有这些背后的数学(而不是与 Canvas 的交互)。
have read several有关滚动条数学的文章,但没有一篇谈论缩放。
一些 articles建议持有宽度值非常大的 Canvas 元素 - 并仅显示 View Port .
我认为这不是正确的方法 - 我只想绘制正确的视口(viewport)。

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

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

  • 应该画什么点,画在哪里?
  • 拇指的大小和位置是多少?
  • 有关于此类事情的文章/教程吗?
  • 最佳答案

    你也许可以使用类似 Flot 的东西它处理点的放置,以及缩放和平移。 Here's一个例子。

    还有很多其他绘图库,here a good list .

    关于javascript - 在 Html5 Canvas 上绘制带滚动条的可缩放时间线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12148852/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com