OpenSeadragon缩放问题

Question

我正在尝试学习openseadragon的缩放功能，然而，我不理解一些东西。我组合了一个简单的例子，并且有几个问题：https://codepen.io/Ivalina/pen/poPbaMv

当页面第一次加载时，我如何确保当我单击“立即缩小”时，图像不会变得比原来更小。这是令人困惑的，因为我希望它从最小的地方开始。(优先级)

另一个问题，我确实设置了最小和最大缩放级别，但当我继续点击放大时，它肯定会超过3次点击。放大后的缩小也是如此。有没有办法将缩放限制在特定的点击量(最好是3次)。

var tileSources = {
    Image: {
        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
        Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
        Format: "jpg",
        TileSize: "256",
        Size: {
            Width:  "13920",
            Height: "10200"
        }
    }
};

var viewer = OpenSeadragon({
    id: "seadragonviewer",
    prefixUrl: "//openseadragon.github.io/openseadragon/images/",
    tileSources: tileSources,
    visibilityRatio: 1.0,
    constrainDuringPan: true,
    minZoomLevel: 0,
    maxZoomLevel: 2,
    zoomPerClick: 1.5,
    gestureSettingsMouse: {
      clickToZoom: false,
      scrollToZoom: false,
      flickEnabled: true
    },
    gestureSettingsTouch: {
      clickToZoom: false
    },
    visibilityRatio: 1.0,
    useCanvas: false
});

Answer 1

这本身不一定是一个答案，但我需要比评论更多的空间，所以这里是这样的：

OSD“缩放”是基于图像的宽度和观看者的宽度之间的关系。当图像完全水平填充查看器时，该值为1。如果放大到查看者仅显示图像宽度的一半，则缩放为2。放大到查看者只能保持图像宽度的四分之一时，缩放为4。maxZoomLevel选项基于这些条件。

默认情况下，可以放大的最远距离基于在maxZoomPixelRatio选项(默认值为1.1)中指定的图像像素与屏幕像素的比率。换句话说，如果maxZoomPixelRatio为1，那么您只能放大到足以看到图像像素1:1。正如您已经发现的，您可以使用maxZoomLevel覆盖它，但您可以获得多接近实际像素将取决于您的查看器的大小。

无论如何，如果你想要的是保证三次点击，而你并不关心你离实际像素有多近，这里有一个场景：

如果你的图像在水平方向上自然地填满了观众，你会得到1的开始缩放。如果zoomPerClick设置为2，那么在第一次点击时，你的缩放比例将是2。在第二次点击时，它将是4(缩放倍数)，在第三次缩放时，它将是8。因此，在这种情况下，你应该将maxZoomLevel设置为8。

如果您的图像不是以1开始缩放(因为它足够高，没有填满查看器的宽度)，则必须以该开始缩放作为maxZoomLevel的基础。如果你有一个不同的zoomPerClick，你必须考虑到这一点。

如果你真的关心第三次点击时你能得到的实际像素有多接近，你需要调整你的zoomPerClick，这样它对于每个观众的大小/图像大小的比例都是不同的。

我希望这些额外的背景信息能有所帮助！

编辑:下面是如何设置zoomPerClick的方法：

你需要知道的是主页缩放(用户开始将图像完全放大)和完全缩放(当你一直放大以查看图像的像素1:1)，然后你需要计算出为了达到完全缩放，你必须将主页缩放乘以3倍(因为你想点击3次)。幸运的是，您可以在加载图像之后执行此操作，因此OpenSeadragon可以为您完成大部分计算工作。

viewer.addHandler('open', function() {
  const homeZoom = viewer.viewport.getHomeZoom();
  const fullZoom = viewer.viewport.imageToViewportZoom(1);
  viewer.zoomPerClick = Math.cbrt(fullZoom / homeZoom);
});

我还没有测试过这段代码，但它应该是基本的想法。