使用Javascript、jQuery或HTML5画布实现无限缩放

2022-03-17 00:00:00 zooming jquery javascript html infinite

我见过这个"The Scale of the Universe 2",我只想知道这是否可以使用javascript或jQuery或HTML5画布来完成。

如果您单击某个项目(例如"人"),将在其旁边弹出一条信息。

如果有人有类似的问题,我在这里搜索了3天。但我只看到了类似谷歌地图的行为,你可以放大地图光标的位置。

其实我想做一个类似"时间线"的效果,或者像Mac OS X上的"时光机"恢复。

  • 缩放的固定位置。与Google地图缩放不同,您可以在任何地方平移和缩放。
  • 我可以将(例如"人")图像和文本放在div上吗?
  • 有关于此方面的文章/教程吗?

选项:

  • Javascript
  • jQuery
  • HTML5画布和CSS3变换并将其滚动到Z轴,以便可以放大/缩小。
  • Flash/Flex(我不想在CPU上使用大量资源,因为我需要大分辨率或全屏。

解决方案

可以在HTMLCanvas中实现无限缩放,这是我实现的概念证明的source code,here您可以对其进行现场测试。

它的实现实际上相当棘手,很可能需要使用大小数。

我遵循的方法使用与d3-zoom相同的坐标空间。基本上,你有三个坐标,x,y和k,k是变焦。如果k为2,则意味着您已将所有内容加倍。

现在,如果您要进行无限缩放,很容易达到k = 64,但这已经超出了Float64精度,并且您会有很多瑕疵,图像中的平移不流畅,或者您没有放大您想要的位置。

避免这些工件的一种方法是使用无限长度的坐标,例如BigIntegers。为了使我的实现简单并且与d3-zoom兼容,我改用了大小数,但是我必须实现我自己的BigDecimals库,整数部分基本上是无限精度,小数部分基本上是32位精度。当然,您还需要调整zooming library以支持BigDecimals。此外,在d3变焦的情况下,很多计算是在初始坐标空间(k=1)进行的,但是浮点划分总是会有错误,而且一旦你足够深了,也是可以察觉到的。若要避免这种情况,您需要在本地执行所有计算。

坚持使用d3-zoom库可能听起来很麻烦,但缩放UX实际上很棘手,特别是如果您在不同的k上合并这两个功能,您将需要考虑滚动、缩放手机、双击.

如果您想要使用SVG转换,那么您需要伪造它。您将在节点几乎不可见时引入节点,允许对其进行缩放。但是,最有可能的是,当它们太大而无法避免出现工件时,您还需要伪造它。

相关文章