我遵循的Basic Single-Row Tile Source Collection示例具有与示例中相同的配置和图块源。
我现在正在尝试在第一张和第二张图像上添加叠加层，但是这样做很麻烦。
第一个叠加层应已放置在第一张图像的顶部，第二个叠加层应已放置在第二张图像的顶部，但不是那样。
我正在将overlays集合添加到tileSources集合。
叠加层是否不独立于不同页面？
另外，添加叠加层后，在控制台中出现以下错误，我不明白如何在插件的这种基本初始化中使用TiledImage.imageToViewportRectangle。
[Viewport.imageToViewportRectangle]对于多图像不正确；
使用TiledImage.imageToViewportRectangle代替
。
Codepen示例URL：https://codepen.io/hussainb/pen/QQPPvL
Codepen代码：
的HTML：
<div id="overlays">
<div id="overlay1">Overlay One</div>
<div id="overlay2">Overlay Two</div>
</div>
<div id="viewer"></div>
CSS：
body {
margin:0;
padding:0;
}
#viewer {
width:100%;
height: 600px;
margin: auto;
background-color: lightgray;
}
#overlay1, #overlay2 {
width: 100px;
height: 100px;
background-color:powderblue;
}
Javascript：
$( document ).ready(function(){
var viewer = OpenSeadragon({
id: "viewer",
prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/images/",
debugMode: false, //if you want to see the render grid
collectionMode: true,
collectionRows: 1,
collectionTileSize: 1024,
collectionTileMargin: 256,
tileSources: [
{
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
}
,
overlays: [{
id: 'overlay1',
px: 100,
py: 0,
width: 200,
height: 200,
className: 'filter'
}]
},
{
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
},
overlays: [{
id: 'overlay2',
px: 100,
py: 0,
width: 500,
height: 500,
className: 'filter'
}]
},
{
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
}
},
{
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
}
},
{
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
}
},
{
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "https://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
}
}
]
});
})
最佳答案
看来这是OpenSeadragon的错误！这是发行票：
https://github.com/openseadragon/openseadragon/issues/1412
您可以通过以下方式解决此问题：分别存储叠加层，并在图像打开后添加叠加层，例如（假设您已经创建了查看器）：
var overlaySets = [
[{
id: 'overlay1',
px: 100,
py: 0,
width: 200,
height: 200,
className: 'filter'
}],
[{
id: 'overlay2',
px: 100,
py: 0,
width: 500,
height: 500,
className: 'filter'
}]
];
viewer.addHandler('open', function() {
overlaySets.forEach(function(overlaySet, setIndex) {
var tiledImage = viewer.world.getItemAt(setIndex);
if (!overlaySet || !tiledImage) {
return;
}
overlaySet.forEach(function(overlay) {
var rect = new OpenSeadragon.Rect(overlay.px, overlay.py, overlay.width, overlay.height);
rect = tiledImage.imageToViewportRectangle(rect);
overlay.x = rect.x;
overlay.y = rect.y;
overlay.width = rect.width;
overlay.height = rect.height;
delete overlay.px;
delete overlay.py;
viewer.addOverlay(overlay);
});
});
});
您可以在这里看到实际效果：
https://codepen.io/iangilman/pen/aqgzJZ
关于javascript - 向openseadragon图像和相关错误消息添加/定位独立的叠加层，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49096137/