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

【问题标题】：JavaScript image zoom and pan (drag)JavaScript 图像缩放和平移（拖动）
【发布时间】：2023-03-11 20:04:01
【问题描述】：

关于缩放大图像和平移有什么建议吗？最好是内嵌在页面上。

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

我目前的想法是，使用平铺图像方法对于这些小处理器来说太过分了（在最大缩放下尝试从 3000 x 3000 像素的原始图像中拖动 144 个单独的图像，其中每个平铺图像为 250x250 像素）。

因此可能会更多地考虑以设定的宽度/高度加载原始图像......并且要么编写我自己的 JS 来缩放/拖动，要么使用另一个库（我目前似乎找不到)... 然后是使用 jQuery（使用 jQuery UI 来支持可拖动）的问题，或者只是自己编写原始 JS 以减少代码量。

【问题讨论】：

这是一个非常广泛的问题，实际上还包括几个问题。你到底想知道什么？ 页面内嵌是什么意思？
@WrongAboutMostThings 感谢您的关注和评论，很抱歉耽搁了（没有收到电子邮件通知）......无论如何，我正在使用这两个库，但在移动设备上都不能正常工作，所以问是否有人有更好的选择。我最终不得不编写自己的，虽然它不包含任何库（尝试使用 jQuery UI 来实现可拖动功能，但在一些较大的图像上仍然存在明显的滞后）。

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

谢谢@Michael，我确实尝试破解这些库的一些代码（更旧的 GSV2，它已经在网站上使用）......我无法减少负载当试图平移这些单独的图像时，即使有像使用显示器这样的黑客：无......我最终创建了自己的非常基本的 JS，它缩小了 1 个图像（设置宽度/高度，以便浏览器进行缩小缩放），然后添加一些简单的 mouseup/down、touch 和 key events 以允许滚动和更改缩放级别...稍后将添加到 GitHub。

【解决方案3】：

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

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

【讨论】：