一个深度缩放脚本,允许放大图像,但界面"magnifying glass"



我正在寻找一个基于tile的缩放脚本,允许放大图像,但带有"放大镜"界面。

所谓的"放大镜"界面,我指的是像Wadda这样的东西,用户可以点击图像的某个部分,然后将周围区域放大。放大的区域包含在覆盖缩略图的圆圈中。Wadda的演示可以在这里看到:http://maxpert.github.com/wadda/

这个解决方案对于我的预期用途来说是完美的,除了一个重要的事实,即脚本需要在任何事情发生之前加载整个高清图像。这对于我的项目来说是不可行的,因为我的高清图像可以达到5000x5000px或更高。

与其加载整个高清图像,不如像leaf-leafletjs.com这样的基于tile的缩放解决方案更合适。但我仍然希望"放大镜"变焦UX类似于Wadda。

我的问题是:是否有一个脚本(或修改的脚本),结合了Wadda的用户体验与基于瓷砖的深度缩放传单?

用户可以点击较小缩略图的一部分,并在圆形覆盖层中看到放大的区域-其中放大的区域使用基于tile的加载方式加载。

PS:对不起,标题太长了。

我很难用一句话来描述我在寻找什么。

高层次的回答,有一些疑问:

传单TileLayer类有一个tileload事件,您可以订阅。传单中的瓷砖是img元素,所以在这种情况下,您可以将img元素的title属性设置为高分辨率版本的瓷砖,这是wadda需要的。

问题是普通的瓷砖服务器提供的瓷砖都是相同的大小。如果你放大,你会得到一个更高分辨率的贴图,但面积更小。为了使wadda工作,我认为您需要一个高分辨率的相同的区域的tile。因此,如果原始贴图是256x256px,你想放大到2倍,那么高分辨率的URL必须提供相同面积的512x512px贴图。

好的一面是,如果有一个服务器可以这样做(或者可能是两个服务器),我怀疑这样做是非常可行的。

我不知道这有多大帮助,但我想我应该添加http://openseadragon.github.com/(类似于传单的技术)使用画布来渲染(当然,在支持画布的浏览器上),所以它可能更符合你想做的事情。您可能会创建一个openseaddragon查看器,然后在它创建的画布上使用一个剪切区域。当然,您需要管理它的缩放和平移状态,以及在屏幕上移动它以匹配用户的鼠标。

对于这个问题,也许你可以对传单做同样的事情,在它的包含div上放置一个非常大的边框半径。

无论如何,这两种解决方案都需要一些发展,但似乎是可能的。

我参与了openseaddragon项目,所以如果你最终使用它,我很乐意听到它!

最新更新