在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是一个JavaScript库，可使用HTML5和CSS3等新技术创建功能强大的基于Web的可缩放用户界面（ZUI）。

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

Answer 2

你看过 Zoomooz 吗？

Zoomooz 是一个用于使网页元素缩放的 jQuery 插件。它可用于制作类似幻灯片的 Prezi 以及缩放图像或其他细节。

http://janne.aukia.com/zoomooz

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