在HTML Canvas上缩放用户界面

Question

碰巧我遇到了在HTML Canvas上创建ZUI（缩放用户界面）的任务。这种界面的例子是Deep Zoom和微软的Seadragon。

我正在尝试找到一些库，这些库可以让我创建ZUI而无需自己从头开始编写（虽然我已经为Mac和iOS做过了）。

---

图书馆应具备的主要功能：

1. 将某种“观点”作为基本要素并按层次排列
2. 在视图中绘制矢量图形，文本和图像（可选）
3. 放大200倍
4. 由视图处理的鼠标事件（向上/向下，移动，滚动）

任何建议（即使它们不符合上述条件）都会受到欢迎，因为我在画布上找不到关于ZUI的任何建议。

Answer 1

这可能会让您入门：https://github.com/florianguenther/zui53

  

ZUI53 是一个用于创建功能强大的基于Web的Zoomable的JavaScript库   用户界面（ZUI）与HTML5和CSS3等新技术。

还有OpenSeadragon，但我不确定它是否使用Canvas。

Answer 2

你看过Zoomooz吗？

  

Zoomooz是一个jQuery插件，用于缩放网页元素。它可用于制作Prezi，如幻灯片和缩放图像或其他细节。

http://janne.aukia.com/zoomooz

您可以使用它来缩放到任何DOM元素。使用SVG比使用Canvas更好，因为Canvas在放大时会显示像素化。

Answer 3

你看过Piccolo2d似乎符合你的大部分要求。看一下来自Geneaquilts的视频，该视频展示了他们如何将其用于界面。

Answer 4

还有Taaspace.js使用HTML和CSS3但不使用Canvas。 Taaspace试图抽象出所有不同的输入方法，使其与例如触摸屏设备兼容。你可以查看this example application.