添加/定位独立叠加到openseadragon图像和相关的错误消息

Question

我跟随Basic Single-Row Tile Source Collection示例使用与示例中提到的相同的配置和tile源。

我现在正在尝试在第一张和第二张图片上添加叠加层，但却无法做到这一点。

第一个叠加层应该位于第一个图像的顶部，第二个叠加层应该放在第二个图像上但不会发生这种情况。

我正在将覆盖集合添加到tileSources集合中。

不同页面的叠加层是否独立？

另外，我在添加叠加后在控制台中得到以下错误，我不明白如何在插件的这种基本初始化中使用TiledImage.imageToViewportRectangle。

[viewport.imageToViewportRectangle]对于多图像不准确;改为使用TiledImage.imageToViewportRectangle

.

Codepen示例网址：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"
                        }
                    }
                }
            ]
        });


})

Answer 1

看起来这是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