7

我看过这个“ The Scale of the Universe 2 ”，我只想知道这是否可以使用 javascript 或 jQuery 或 HTML5 Canvas 来完成。

如果您单击一个项目（例如“人类”），则会在其旁边弹出一个信息。

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

实际上，我想制作类似“时间轴”的效果，或者像 Mac OS X 上的“时间机器”恢复。

  • 固定缩放位置。不像谷歌地图缩放，您可以在任何地方平移和缩放。
  • 我可以将（例如“人类”）图像和文本放在 div 上吗？
  • 是否有关于此的可用文章/教程？

选项：

  • Javascript
  • jQuery
  • HTML5 Canvas 和 CSS3 转换并将其滚动到 Z 轴，以便您可以放大/缩小。
  • Flash/Flex（好吧，我不想在 CPU 上使用大量资源，因为我需要它以大分辨率或全屏显示。
4

3 回答 3

3

没有无限变焦。但是，您可以在 HTML5 画布中放大/缩小 SVG 图像。

SVG 支持仿射变换。您可以在仿射变换中设置所需的缩放/平移并显示相关区域。行为/监听器可以用 Javascript 实现，SVG 可以在 HTML5 画布上呈现。

作为起点，您可以查看以下示例：http ://www.html5canvastutorials.com/labs/html5-canvas-scaling-a-drawing-with-plus-and-minus-buttons/

于 2012-09-08T17:39:13.113 回答
3

可以在 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 转换，那么您需要伪造它。您将在它们几乎不可见时引入节点，允许缩放它们。但是，当它们太大而无法避免出现伪影时，很可能您还需要伪造它。

于 2020-12-29T08:30:53.400 回答
2

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

于 2012-09-08T17:10:14.513 回答