使用Javascript、jQuery或HTML5画布实现无限缩放 [英] Infinite Zoom with Javascript, Jquery or HTML5 Canvas

问题描述

我见过这个"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转换，那么您需要伪造它。您将在节点几乎不可见时引入节点，允许对其进行缩放。但是，最有可能的是，当它们太大而无法避免出现工件时，您还需要伪造它。

这篇关于使用Javascript、jQuery或HTML5画布实现无限缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！