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

上缩放大图像和平移周围任何建议？理想情况下在页面上内联。JavaScript的图像缩放和平移（拖动）

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

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

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

我现在的想法是，使用平铺图像的方法实在是太多了，这些小处理器（最大变焦试图拖动144倍个人的图像，从3000×3000px原始图像，其中每个瓦片是250x250px）。

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

来源

2012-07-04 Craig Francis

这是一个很广泛的问题，实际上包括几个更多的问题。你想知道什么？什么意思_inline在page_上？ – WrongAboutMostThings

@WrongAboutMostThings感谢您的期待和评论，并为延迟感到抱歉（没有收到电子邮件通知）......无论如何，我正在使用这两个库，并且都无法在移动设备上正常工作，所以询问是否有人有任何问题更好的选择。我最终不得不编写我自己的，但没有包含任何库（尝试使用可拖动功能的jQuery UI工作，但在一些较大的图像上仍然存在明显的滞后）。 –

更多这样回答我的问题，因为标准库似乎没有工作，以及我需要，我结束了创建我自己的解决方案：

https://github.com/craigfrancis/zoomify

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

来源

2012-07-29 12:17:27

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

设置所有可在视口外部超过一个瓦块以便显示图像：无。然后，当用户只是更新显示属性。

这样的浏览器将主要计算大量元素与一些图像中的运动，然后计算和关闭一些图像的状态。

少了很多图形密集型，而不是重新计算图形沉重的div元素。

来源

2012-07-04 21:28:28 Tschallacka

谢谢@Michael，我确实尝试了对这些库的一些代码（更多的是旧的GSV2，它已经在网站上使用）......并且在试图平移这些单独的映像时我无法减少负载，即使有黑客使用显示器：无......我最终创建了我自己的非常基本的JS，缩小了1个图像（设置宽度/高度，以便浏览器缩小比例），然后添加一些简单的mouseup/down ，触摸和关键事件以允许滚动，并且缩放级别的更改将在稍后添加到GitHub中。 –

四处寻找这也之后，我决定用OpenSeadragon（New BSD许可证），一个开源的，高分辨率的图像缩放（桌面和移动），基于Web的浏览器。我需要它的图像金字塔的来源与Multi-Image支持和filtering能力（通过插件的许多之一）

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

来源

2018-01-16 13:06:13 DJDaveMark

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

回答

相关问题