JavaScript 图像缩放和平移（拖动）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11327274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript image zoom and pan (drag)
提问by Craig Francis
Any recommendations on zooming a large image and panning around? ideally inline on the page.
关于缩放大图像和平移的任何建议？理想情况下内嵌在页面上。
I've been using PanoJS (aka GSV2), but now more people are using iPhone/iPad/Android type devices, this library is either too slow, or the older versions do not support dragging (the one I'm using at the moment).
我一直在使用 PanoJS（又名 GSV2），但现在越来越多的人使用 iPhone/iPad/Android 类型的设备，这个库要么太慢，要么旧版本不支持拖动（我目前正在使用的那个） ）。
http://code.google.com/p/panojs/
http://code.google.com/p/panojs/
http://www.dimin.net/software/panojs/
http://www.dimin.net/software/panojs/
My current thought is that using the tiled images approach is too much for these little processors (at maximum zoom trying to drag 144 individual images, from a 3000 x 3000px original image, where each tile is 250x250px).
我目前的想法是，使用平铺图像方法对于这些小处理器来说太过分了（在最大缩放时尝试从 3000 x 3000 像素的原始图像中拖动 144 个单独的图像，其中每个平铺为 250x250 像素）。
So probably looking more at loading the original image in an with a set width/height... and either writing my own JS to zoom/drag, or using another library (which I can't seem to find at the moment)... then there is the question of using jQuery (with jQuery UI for draggable support), or just writing the raw JS myself to keep the amount of code down.
所以可能会更多地考虑以设置的宽度/高度加载原始图像......并且要么编写我自己的 JS 来缩放/拖动，要么使用另一个库（我目前似乎找不到）。 . 然后是使用 jQuery（带有可拖动支持的 jQuery UI）的问题，或者只是自己编写原始 JS 以减少代码量。
回答by Craig Francis
More so answering my own question, as the standard libraries don't seem to work as well as I needed, I ended up creating my own solution:
更重要的是回答我自己的问题，因为标准库似乎不像我需要的那样工作，我最终创建了自己的解决方案：
https://github.com/craigfrancis/zoomify
https://github.com/craigfrancis/zoomify
The intention is that you can copy this code and then customise it to your own particular requirements... so ideally you should be able to read/understand the code, rather than just dropping it into your project and hoping for the best.
目的是您可以复制此代码，然后根据您自己的特定要求对其进行自定义……因此理想情况下，您应该能够阅读/理解代码，而不是将其放入您的项目中并希望获得最佳效果。
回答by Tschallacka
I would suggest making a viewport for mobile devices of screen width.
我建议为屏幕宽度的移动设备制作一个视口。
set all the images that are outside the viewport for more than one tile to display:none. Then when the user pans just update the display property.
将视口外的所有图像设置为显示：无。然后当用户平移时只更新显示属性。
That way the browser will mainly compute a large element moving with a few images, and then compute the on and off state of some images.
这样浏览器将主要计算一个带有一些图像的大元素移动，然后计算一些图像的开和关状态。
a lot less graphics intensive than to recalculate a graphics heavy div element.
与重新计算图形繁重的 div 元素相比，图形密集度要低得多。
回答by DJDaveMark
After looking around for this too, I decided to use OpenSeadragon(New BSDlicence), an open-source, web-based viewer for high-resolution zoomable images (desktop and mobile). I needed it for the Image Pyramid sources with Multi-Imagesupport and filteringcapabilities (via one of a multitude of plugins)
环顾四周后，我决定使用OpenSeadragon（新 BSD许可证），这是一个开源的、基于 Web 的查看器，用于高分辨率可缩放图像（桌面和移动）。我需要它用于具有多图像支持和过滤功能的图像金字塔源（通过众多插件之一）
Another strong contender was OpenLayers(2-Clause BSD). Here's a simple example with a static image, and here's the complete list of examples.
另一个强有力的竞争者是OpenLayers（2-Clause BSD）。这是一个带有静态图像的简单示例，这是示例的完整列表。
