时间戳

首页 > 解决方案 > OpenSeadragon 缩放问题

javascript - OpenSeadragon 缩放问题

问题描述

我正在尝试学习 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
});

标签： javascriptopenseadragon

解决方案

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

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

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

推荐阅读