我正在使用 DeepZoom Composer 将不同的图像叠加在一起,顶部的每一层都更小。(类似于http://msdn.microsoft.com/en-us/expression/cc745977.aspx)
有没有一种简单的方法使用 Seadragon Ajax 0.8.9 来放大顶部的每个分层图像(容器显示顶层图像的精确 1:1 比例),而不是手动创建控制覆盖并分配点击行为来缩放/pan 到整体构图的分层区域?
更新: 我还尝试使用 SparseImageSceneGraph.xml 值将 zoomTo 设置为:
<x>0.0663816754801515</x>
<y>0.0850837639496624</y>
<Width>0.0322681051707401</Width>
<Height>0.0322681051707415</Height>
<ZOrder>2</ZOrder>
使用
viewer.viewport.zoomTo(30.990353933356293,
new Seadragon.Point(0.0663816754801515, 0.0850837639496624));
但它与第二级图像略有不同。
也试过:
var x = 0.066381675480155;
var y = 0.085083763949665;
var w = 0.0322681051707403;
var h = 0.0322681051707407;
var rect = new Seadragon.Rect(x,y,w,h);
viewer.viewport.fitBounds(rect);
但这也超出了第二层图像。(即使第二张图像部分可见)
第二次更新
我现在正在研究使用 OpenSeaDragon 来测试我想要实现的目标,这就是我所拥有的:
viewer = new OpenSeadragon.Viewer("container");
$.extend(true, OpenSeadragon.options, {
autoHideControls: false,
defaultZoomLevel : 1,
visibilityRatio : 1.1,
constrainDuringPan : true,
minZoomImageRatio : 1,
maxZoomPixelRatio : 30,
animationTime: 1.5,
tileSources: [{
id: 'example-overlay',
x: 0,
y: 0,
width: 0.015,
height: 0.015,
className: 'highlight'
}]
});
viewer.showNavigator = false;
viewer.open("test4/GeneratedImages/dzc_output.xml");
viewer.clearControls();
我无法使用上述内容显示叠加层,我做错了什么?是否有一个使用 xml(dzi) 初始化 OpenSeadragon 的好例子,其中包含所有叠加层和叠加层的相关点击事件?任何代码示例将不胜感激!