Adding/positioning 独立覆盖 openseadragon 图像和相关错误消息

Question

我遵循 Basic Single-Row Tile Source Collection 示例，使用示例中提到的相同配置和图块源。

我现在正尝试在第一张和第二张图片上添加叠加层，但遇到了麻烦。

第一个叠加层应该放在第一个图像的顶部，第二个叠加层应该放在第二个图像的顶部，但不是这样的..

我正在将 overlays 集合添加到 tileSources 集合。

不同页面的叠加不是独立的吗？

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

[Viewport.imageToViewportRectangle] is not accurate with multi-image; use TiledImage.imageToViewportRectangle instead

.

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"
                        }
                    }
                }
            ]
        });


})

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

Adding/positioning 独立覆盖 openseadragon 图像和相关错误消息

Adding/positioning independent overlays to openseadragon images and related error message

html

javascript

css

openseadragon