0

我正在使用与示例中提到的相同配置和切片源的基本单行切片源集合示例。

我现在正在尝试在第一张和第二张图像上添加叠加层，但在执行此操作时遇到了麻烦。

第一个叠加层应该放在第一个图像的顶部，而第二个叠加层应该放在第二个图像上，但它不会那样发生..

我正在将覆盖集合添加到 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"
                        }
                    }
                }
            ]
        });


})
4

1 回答 1

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

于 2018-03-06T17:46:01.857 回答