使用Javascript,Jquery或HTML5 Canvas进行无限缩放

Question

我已经看过这个" 宇宙的规模2 ",我只想知道这是用javascript,jQuery还是用HTML5 Canvas完成的.

如果单击某个项目(例如"人"),则会在其旁边弹出一个信息.

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

实际上我想制作一个类似效果的"时间轴",或者像Mac OS X上的"Time Machine"恢复一样.

• 固定缩放位置.不像谷歌地图缩放,你可以在任何地方平移和缩放.
• 我可以把(例如"人类")图像和文字放在div上吗？
• 有没有关于此的文章/教程？

选项:

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

Answer 1

可以在 HTML 画布中实现无限缩放，这是我实现的概念验证的源代码，您可以在这里进行实时测试。

实际上实现起来相当棘手，而且很可能您需要使用大的小数。

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

现在，如果你想做无限缩放，这是很容易达到的k = 64，但这已经超出了 float64 精度，并且你将有很多伪影，其中图像中的翻译不平滑，或者你不缩放在你想要的地方。

避免这些伪影的一种方法是使用无限长度的坐标，例如 BigIntegers。为了使我的实现变得简单并与 d3-zoom 兼容，我使用了大十进制，但我必须实现我自己的BigDecimals库，基本上整数部分具有无限精度，小数部分具有 32 位精度。当然，您还需要调整缩放库以支持 BigDecimals。而且，在 d3-zoom 的情况下，很多计算都是在初始坐标空间中完成的，(k=1)但是浮点数的除法总是会出现错误，而且一旦你足够深入，它也是可以察觉的。为了避免这种情况，您需要在本地进行所有计算。

坚持使用 d3-zoom 库可能听起来很麻烦，但缩放 UX 实际上很棘手，特别是如果你将其组合在不同的位置k，你需要考虑滚动、在手机上缩放、双击。 。

如果您想使用 SVG 转换，那么您需要伪造它。当节点几乎不可见时，您将引入节点，允许缩放它们。然而，当它们太大时，您很可能还需要伪造它以避免出现伪影。

Answer 2

这在 HTML5 中是完全可行的。实际上，任何能够显示和缩放图像的系统都应该能够。这不是一张大图像被缩放，而是大量图像被缩放（例如，最初的人物是一张图像，当您放大或缩小时，它会被缩放和移出）。这个想法很棒，但我并没有真正看到其中有任何技术性能。只要正确限制调整大小和位图的图像数量，它就应该保持不错的 FPS 速率。