JavaScript图像缩放和平移(拖动)

Question

对放大和平移大图有什么建议吗？理想情况下，在页面上内联。

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

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

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

我目前的想法是，使用平铺图像的方法对这些小处理器来说太多了(最大缩放尝试从3000 x 3000px的原始图像中拖动144个单独的图像，其中每个平铺图像是250x250px)。

因此，可能更多地考虑将原始图像加载到具有设置的宽度/高度的中。或者编写我自己的JS来缩放/拖动，或者使用另一个库(我现在似乎找不到)……还有一个问题是使用jQuery (使用jQuery UI支持可拖动)，或者自己编写原始JS以减少代码量。

Answer 1

更重要的是，在回答我自己的问题时，由于标准库似乎没有像我需要的那样工作得很好，我最终创建了自己的解决方案：

https://github.com/craigfrancis/zoomify

其意图是您可以复制此代码，然后根据您自己的特定需求对其进行自定义……因此，理想情况下，你应该能够阅读/理解代码，而不是仅仅把它放到你的项目中，然后期待最好的结果。

Answer 2

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

将视口外部的所有图像设置为显示多个平铺:无。然后，当用户平移时，只需更新显示属性。

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

与重新计算图形繁重的div元素相比，图形密集度要低得多。

Answer 3

在四处寻找之后，我决定使用OpenSeadragon (New BSD licence)，一个开源的、基于网络的高分辨率可缩放图像(桌面和移动设备)查看器。我需要它用于具有Multi-Image支持和filtering功能的图像金字塔源代码(通过众多插件中的一个)。

另一个强有力的竞争者是OpenLayers (2-Clause BSD.下面是一个使用a static image的简单示例，下面是complete list of examples。