SceneNode(图层),Deep Zoom Composer和Seadragon Ajax

时间:2013-05-13 03:35:18

标签: javascript ajax deepzoom seadragon

我正在使用DeepZoom Composer将不同的图像叠加在另一个上面,顶部的每个图层都较小。 (类似于http://msdn.microsoft.com/en-us/expression/cc745977.aspx

使用Seadragon Ajax 0.8.9是否有一种简单的方法可以放大顶部的每个分层图像(容器显示顶层图像的精确1:1比例),而不是手动创建控件叠加层并指定单击行为缩放/平移到整体构图的分层区域?

更新 我还尝试使用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,包含叠加层的所有叠加和相关的点击事件?任何代码示例都将非常感谢!

1 个答案:

答案 0 :(得分:1)

绝对看起来应该是可能的,而且看起来你正走在正确的轨道上。也许有一些关于这些数字的模式?

顺便说一句,Seadragon Ajax自0.8.9以来已经发展了很多,现在是OpenSeadragon:

http://openseadragon.github.io/

也许您正在尝试做的事情已经适用了吗?如果没有,你可以在那里提交一个错误......它正在积极开发。