HTML Canvas 上的缩放用户界面
碰巧我面临着在 HTML Canvas 上创建 ZUI（缩放用户界面）的任务。此类界面的例子有 Deep Zoom 和微软的 Seadragon。
我正在尝试找到一些库，让我可以创建 ZUI，而无需自己从头开始编写（尽管我已经为 Mac 和 iOS 完成了）。
该库应具有的主要功能：
- 将某种“视图”作为基本元素，并分层排列它们
- 在视图中绘制矢量图形、文本和图像（可选）
- 缩放至 200 倍
- 由视图处理的鼠标事件（向上/向下，移动，滚动）
任何建议（即使它们不符合上述条件）都将非常受欢迎，因为我在画布上没有找到任何关于 ZUI 的信息。
It happened that I have faced a task to create a ZUI (zooming user interface) on HTML Canvas. The examples of such interfaces are Deep Zoom and Microsoft's Seadragon.
I'm trying to find some libraries that will allow me to create ZUI without writing it by myself from scratch (though I have already done it for Mac and iOS).
The key features that library should have:
- Have some kind of 'views' as basic elements and arrange them hierarchically
- Draw vector graphics, text and images(optional) in views
- Zooming up to 200x times
- Mouse events that are handled by views (up/down, move, scroll)
Any suggestions (even if they don't fit the above conditions) will be very welcomed, as I have found nothing about ZUI on canvas.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这可能会帮助您开始：https://github.com/florianguenther/zui53
还有OpenSeadragon，但我不确定它是否使用Canvas。
This might get you started: https://github.com/florianguenther/zui53
There is also OpenSeadragon, but I'm not sure if it uses Canvas.
你看过 Zoomooz 吗？
http://janne.aukia.com/zoomooz
您可以使用它来缩放到任何 DOM 元素。不过，使用 SVG 比使用 Canvas 效果更好，因为放大时 Canvas 会显示像素化。
Have you had a look at Zoomooz?
http://janne.aukia.com/zoomooz
You can use it to zoom to any DOM element. Works better with SVG than with Canvas though, since Canvas would show pixelated when zoomed in.
你看过Piccolo2d似乎可以满足你的大部分要求。观看 Geneaquilts 的视频，了解他们如何将其用于界面。
Have you looked at Piccolo2d seems to meet most of your requirements. Have a look at the video from Geneaquilts that shows how they used it for there interface.
还有 Taaspace.js 使用 HTML 和 CSS3，但不使用 Canvas。 Taaspace 试图抽象出所有不同的输入方法，使其与触摸屏设备等兼容。您可以查看此示例应用程序。
There is also Taaspace.js that uses HTML and CSS3 but not Canvas. Taaspace tries to abstract out all the different input methods, making it compatible with for example touch screen devices. You could check out this example application.