我见过这个“宇宙的规模2 http://htwins.net/scale2/“我只是想知道这是否可以使用 javascript 或 jQuery 或 HTML5 Canvas 来完成。
如果您单击一个项目（例如“人类”），它旁边会弹出一条信息。
我在这里搜索了3天，是否有人有类似的问题。但我只看到类似谷歌地图的行为，你可以放大地图光标位置。
实际上我想制作一个类似“时间轴”的效果，或者像Mac OS X上的“时间机器”恢复一样。
- 固定变焦位置。不像谷歌地图缩放，您可以在任何地方平移和缩放。
- 我可以将（例如“人类”）图像和文本放在 div 上吗？
- 有关于此的可用文章/教程吗？
Options:
- JavaScript
- jQuery
- HTML5 Canvas 和 CSS3 Transform 并将其滚动到 Z 轴，以便您可以放大/缩小。
- Flash/Flex（我不想在 CPU 上使用大量资源，因为我需要大分辨率或全屏。
可以在 HTML canvas 中实现无限缩放，这就是源代码 https://github.com/furstenheim/infinite-mosaic我实施的概念证明here https://furstenheim.github.io/infinite-mosaic/你可以现场测试它。
实际上实现起来相当棘手，而且很可能您需要使用大的小数。
我遵循的方法使用与以下相同的坐标空间d3-zoom https://github.com/d3/d3-zoom。基本上，您有三个坐标：x、y 和 k。 K是变焦。如果 k 是 2，则意味着您已将所有内容加倍。
现在，如果你想做无限变焦，这是很容易达到的k = 64，但这已经超出了 float64 精度，并且您将有很多伪影，其中图像中的翻译不平滑，或者您没有放大到您想要的位置。
避免这些伪影的一种方法是使用无限长度的坐标，例如 BigIntegers。为了使我的实现变得简单并与 d3-zoom 兼容，我使用了大十进制，但我必须实现我自己的库大十进制 https://github.com/furstenheim/small-decimal，基本上整数部分无限精度，小数部分32位精度。当然，你还需要适应缩放库 https://github.com/furstenheim/d3-zoom支持 BigDecimals。此外，在 d3-zoom 的情况下，很多计算都是在初始坐标空间中完成的(k=1)但是浮点数的除法总会有一个错误，而且一旦你足够深，它也是可以察觉的。为了避免这种情况，您需要在本地进行所有计算。
坚持使用 d3-zoom 库可能听起来很麻烦，但缩放 UX 实际上很棘手，特别是如果您将其组合在不同的位置k，您需要考虑滚动、缩放手机、双击……
如果您想使用 SVG 转换，那么您需要伪造它。当节点几乎不可见时，您将引入节点，允许缩放它们。然而，当它们太大时，您很可能还需要伪造它以避免出现伪影。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
