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

这本身不一定是答案，但我需要 space 而不是评论，所以这里是：

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 以使其对每个观看者都不同 size/image 大小比。

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

编辑：以下是设置 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);
});

这段代码我没有测试过，但应该是基本思路。

OpenSeadragon 缩放问题

OpenSeadragon zoom issues

javascript

openseadragon