JavaScript图像缩放和平移（拖动）

Question

有关缩放大图像和平移的任何建议吗？理想情况下在页面上内嵌。

我一直在使用PanoJS（又名GSV2），但现在越来越多的人使用iPhone / iPad / Android类型设备，这个库要么太慢，要么旧版本不支持拖动（我正在使用的那个）目前）。

http://code.google.com/p/panojs/

http://www.dimin.net/software/panojs/

我目前的想法是，对于这些小型处理器，使用平铺图像方法太多了（在最大变焦时尝试拖动144个单独的图像，从3000 x 3000px原始图像，每个图块为250x250px）。

所以可能更多的是在设置宽度/高度加载原始图像...并编写我自己的JS来缩放/拖动，或使用另一个库（我现在似乎无法找到）...然后是使用jQuery（使用jQuery UI进行可拖动支持）的问题，或者只是自己编写原始JS来保持代码量。

Answer 1

更多回答我自己的问题，因为标准库似乎不能像我需要的那样工作，我最终创建了自己的解决方案：

https://github.com/craigfrancis/zoomify

目的是您可以复制此代码，然后根据您自己的特定要求对其进行自定义...理想情况下，您应该能够阅读/理解代码，而不是将其放入您的项目并希望获得最佳

Answer 2

我建议为屏幕宽度的移动设备制作视口。

设置视口外的所有图像以显示多个图块：none。 然后当用户平移时只更新显示属性。

这样浏览器将主要计算移动了一些图像的大元素，然后计算一些图像的开启和关闭状态。

图形密集程度远低于重新计算图形重div元素。

Answer 3

在浏览了这个之后，我决定使用OpenSeadragon（New BSD许可证），这是一个开源的，基于网络的查看器，用于高分辨率可缩放图像（桌面和移动）。我需要具有Multi-Image支持和filtering功能的图像金字塔来源（通过众多插件之一）

另一个强有力的竞争者是OpenLayers（2-Clause BSD）。这是a static image的一个简单示例，这里是complete list of examples。